onChange和onSelect事件不會觸發日期選擇器字段

-1

我試圖通過在javascript中使用它們的id來隱藏一個元素，使用onChange="functionName()"事件和onSelect事件更改日期選擇器字段的值。但是這兩個事件都不會觸發函數。這裏是我的代碼，請找出什麼是這裏的錯誤 -onChange和onSelect事件不會觸發日期選擇器字段

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

在此先感謝：）

來源

2015-04-02 Imran Khan

顯示屏拼寫檢查 – 2015-04-02 07:20:18

對不起，我在這裏輸入的錯誤代碼@ Vivek – 2015-04-02 07:29:08

您是否正在調用check_date（）函數。如果是的話，你得到任何錯誤 – sasi 2015-04-02 07:30:42

我已經複製並粘貼你的確切的JavaScript和HTML到一個codepen在這裏，它對我來說非常好（即隱藏當值不同時， ND表示當值相同）：

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

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

是否有可能其它外部因素導致這個問題？

UPDATE：

我已經重新格式化代碼刪除PHP標籤，並在此codepen去除「只讀」屬性，它仍然能正常工作對我來說：http://codepen.io/anon/pen/dPLJaa

通過只讀屬性來看，你會動態地將值分配給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

來源

2015-04-02 07:40:53 Anderson

是的，我從日曆類中分配日期，我也認爲onChange事件沒有觸發，所以我也使用onClick事件，但沒有發生onClick事件。 – 2015-04-02 08:50:42

一個文本框的onChange事件將不會觸發。您需要在更改文本框的值後通過代碼調用on change事件。

事情是這樣的：

document.getElementById(textboxid).onchange();

但在你的情況，你似乎是在提醒check_date（）來驗證可能的日期。在這種情況下，您需要在validateLeave（）函數中調用check_date（）函數，該函數是您在代碼中設置爲窗體onSubmit的函數。

來源

2016-05-10 06:44:48 zapping

onChange和onSelect事件不會觸發日期選擇器字段

回答

相關問題