onChange and onSelect event is not triggering by a datepicker field

Question

I'm trying to hide an element by using their id in javascript on changing value of a datepicker field using onChange="functionName()" event and onSelect event. But function is not triggered by both both events. Here is my code , Please find out what is error here -

Java script in head section -

<script type="text/jscript">
    function check_date() {
        var date1 =document.getElementById('date1').value;
        var date2 =document.getElementById('date2').value;

        var style1 = date1 == date2 ? 'block' : 'none';
        document.getElementById('day_name_div').style.display = style1;             
    }
</script>

HTML Code is here in Body Section -

<form name="profile" action="send_mail.php" 
      id="leavemail" method="post" onSubmit="return validateLeave()">
    <table width="50%" style="margin-left:5%" border="0" cellpadding="1" cellspacing="0" id="form">
        <tr>
            <td>Leave From</td>
            <td>:</td>
            <td>
                <input class="tcal" name="date1" id="date1"  
                       onChange="check_date()" 
                       value="<?php echo date("Y-m-d"); ?>" required readonly/>
            </td>
        </tr>                
        <tr><td>&nbsp;</td></tr>                
        <tr>
            <td>Leave To</td>
            <td>:</td>
            <td>
                <input class="tcal" name="date2" id="date2" 
                       onChange="check_date()" 
                       value="<?php echo date("Y-m-d"); ?>" required readonly/>
            </td>
        </tr>
        <tr><td>&nbsp;</td></tr>
        <tr id="day_name_div">
            <td>Day</td>
            <td>:</td>
            <td>
               Full
               <input type="radio" name="day" id="day" value="full" />
               &nbsp;&nbsp;&nbsp;&nbsp;
               Half
               <input type="radio" name="day" id="day" value="half" />
            </td>
        </tr>                
        <tr><td>&nbsp;</td></tr>
        <tr>
            <td>Type</td>
            <td>:</td>
            <td>
                <select name="msg" id="msg" style="width:145px">
                    <option value="0">Please Select</option>
                    <option>Sick Leave</option>
                    <option>Casual Leave</option>
                    <option>Privilege Leave</option>
                    <option>Maternity Leave</option>
                    <option>Paternity Leave</option>
                    <option>Probationary Leave</option>
                </select>              
            </td>
        </tr>
        <tr><td>&nbsp;</td></tr>
        <tr>
            <td>Reason</td>
            <td>:</td>
            <td>
                <textarea name="other" placeholder="Please mention"></textarea>
            </td>
        </tr>
        <tr><td>&nbsp;</td></tr>
        <tr>
            <td colspan="3" align="center">
                <input type="submit" name="SubmitP" value="Request" class="btn"/>
            </td>
        </tr>
    </table>
</form>

Thanks in Advance :)

Are you calling check_date() function. If so are you getting any error — sasi, Apr 02 '15 at 07:30
yes i'm calling check_date() function on event "onChange" @Sasi — Imran Khan, Apr 02 '15 at 07:35
yes thats fine but I am asking the value for your test case which is failing — Vivek Gupta, Apr 02 '15 at 07:43
Which browser are you testing this in? You're script tag is using the MIME type `text/jscript` JScript is an old implementation of ECMAScript proprietary to Microsoft. If you are using a non-IE browser to test this, this script tag may be because it is unrecognised. You should use the `text/javascript` type for the script. — James Hay, Apr 09 '15 at 01:49

score 1 · Answer 1 · edited May 23 '17 at 12:23

I have copied and pasted your exact JavaScript and HTML into a codepen here and it works perfectly fine for me (ie. hiding when the values are different, and showing when the values are the same):

var style1 = date1 == date2 ? 'block' : 'none';
document.getElementById('day_name_div').style.display = style1;

http://codepen.io/anon/pen/yyrpGb

Is it possible other external factors are causing this issues?

UPDATE:

I have reformatted the code to remove the php tags and removed the 'readonly' attribute in this codepen and it still works fine for me: http://codepen.io/anon/pen/dPLJaa

Judging by the readonly attribute, would you be dynamically assigning the values to the date1 and date2 inputs? This may not fire the onchange event unless the user actually makes a change to the input box.

Could be the same issues as these ones:

Input textbox onchange is not firing when data is assigned to input textbox

Fire onchange event for TextBox when readonly is true

Yes, I'm assigning date from a calender class and i'm also think onChange event is not triggering so i also use onClick event but nothing is happens with onClick Event . — Imran Khan, Apr 02 '15 at 08:50

score 0 · Answer 2 · answered May 10 '16 at 06:44

The onChange event of a textbox will not fire if the value is changed through code. You will need to invoke the on change event through code after changing the value of the textbox.

Something like this:

document.getElementById(textboxid).onchange();

But in your case you seem to be calling the check_date() to validate the date probably. In that case you need to call the check_date() function in the validateLeave() function which is the set to the forms onSubmit in you code.

onChange and onSelect event is not triggering by a datepicker field

2 Answers2