Question

我试图通过在javascript中使用onChange="functionName()"事件和onSelect事件更改datepicker字段值来隐藏元素。但是这两个事件都没有触发功能。这是我的代码，请在这里找出错误 -

头部的Java脚本 -

<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代码位于正文部分 -

<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>

提前致谢：）

Answer 1

我已将您的精确JavaScript和HTML复制并粘贴到此处的codepen中，它对我来说非常合适（即，当值不同时隐藏，并显示值相同时）：

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

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

其他外部因素是否可能导致此问题？

更新：

我已经重新格式化代码以删除php标记并删除了＆＃39; readonly＆＃39;在这个codepen中的属性，它仍然适用于我：http://codepen.io/anon/pen/dPLJaa

根据readonly属性判断，您是否会动态地将值分配给date1和date2输入？除非用户实际对输入框进行了更改，否则这可能不会触发onchange事件。

可能与这些问题相同：

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

Fire onchange event for TextBox when readonly is true

Answer 2

如果通过代码更改了值，则不会触发文本框的onChange事件。更改文本框的值后，您需要通过代码调用on change事件。

这样的事情：

document.getElementById(textboxid).onchange();

但在您的情况下，您似乎正在调用check_date（）来验证日期。在这种情况下，您需要在validateLeave（）函数中调用check_date（）函数，该函数是代码中onSubmit形式的集合。

onChange和onSelect事件不是由datepicker字段触发的

2 个答案: