Check (Select) Radio Button based on some value in JavaScript and jQuery

Anil102

SOLVED CLOSED ACTIVE ANSWERED
User: Anil102
Posted: on May 14, 2020 01:49 AM
Forum: JavaScript
Answer: 1
Views: 1517

Hi,

I have one date field and 3 radio buttons (Temporary, Permanent and contract). After entering date if the experience is Less than 6 months Contracts should be checked or If the experience is more than 6 months and less than 2 years Temporary should be checked in else Permanent is checked.

Could you please help me with this.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="ISO-8859-1">
    <title>Insert title here</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Datepicker - Default functionality</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
    <script>
        $(function () {
            $("#datepicker").datepicker({ dateFormat: 'dd/mm/yy' });
        });
    </script>
</head>
<body>
    <form:form method="post" action="save" modelAttribute="employee">
        <table>
            <tr>
                <td>Date of Joining:</td>
                <td> <input type="text" name="doj" id="datepicker"></td>
            </tr>
            <tr>
                <td>Employee Type:</td>
            </tr>
            <tr>
                <td><label for="male">Permanent</label></td>
                <td><input type="radio" id="emp" name="empType" value="A"></td>
            <tr>
                <td><label for="female">Contract</label></td>
                <td><input type="radio" id="emp2" name="empType" value="B"></td>
            </tr>
            <tr>
                <td><label for="other">Temporary</label></td>
                <td><input type="radio" id="emp3" name="empType" value="C"></td>
            </tr>
            <tr>
                <td> </td>
                <td><input type="submit" value="Save" /></td>
            </tr>
        </table>
    </form:form>
</body>
</html>

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on May 14, 2020 02:59 AM
Report

Hi Anil102,

Refer below sample code and modify according to your condition.

HTML

<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#datepicker").datepicker({
                dateFormat: 'dd/mm/yy',
                onSelect: function (dateString, txtDate) {
                    SetRadioButton(dateString);
                }
            });
        });

        function SetRadioButton(dateString) {
            var parts = dateString.split("/");
            var selectedDate = new Date(parts[1] + "/" + parts[0] + "/" + parts[2]);
            var dtCurrent = new Date();
            var type = "";
            var monthDiff = DifferenceMonths(selectedDate, dtCurrent);
            if (monthDiff > 24) {
                type = "A";
            } if (monthDiff <= 24 && monthDiff > 6) {
                type = "C";
            } if (monthDiff <= 6 && monthDiff > 0) {
                type = "B";
            }
            $("input[name=empType][value=" + type + "]").prop('checked', true);
        }

        function DifferenceMonths(dt2, dt1) {
            var diff = (dt2.getTime() - dt1.getTime()) / 1000;
            diff /= (60 * 60 * 24 * 7 * 4);
            return Math.abs(Math.round(diff));
        }
    </script>
</head>
<body>
    <table>
        <tr>
            <td>Date of Joining:</td>
            <td> <input type="text" name="doj" id="datepicker"></td>
        </tr>
        <tr>
            <td>Employee Type:</td>
        </tr>
        <tr>
            <td><label for="male">Permanent</label></td>
            <td><input type="radio" id="emp" name="empType" value="A"></td>
        <tr>
            <td><label for="female">Contract</label></td>
            <td><input type="radio" id="emp2" name="empType" value="B"></td>
        </tr>
        <tr>
            <td><label for="other">Temporary</label></td>
            <td><input type="radio" id="emp3" name="empType" value="C"></td>
        </tr>
        <tr>
            <td> </td>
            <td><input type="submit" value="Save" /></td>
        </tr>
    </table>
</body>
</html>

Demo

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Check (Select) Radio Button based on some value in JavaScript and jQuery

Company

Explore

Follow us

Contact Us