Javascript重复表单输入

Question

我有一个表单，我需要两个字段相同。在设置第一个之后，我正在尝试使用 javascript 使第二个与第一个相同。

这是javascript（在我的标签上方）

 <script type="text/javascript" charset="utf-8">    
      function updateDate(){        
      startDate = document.getElementById("startdate").value;      
      document.getElementById("enddate").value = startDate;
 } </script>

HTML如下：

 <span class="em-events-search-dates em-date-range">
 <input type="text" id="startdate" class="em-date-input-loc em-date-start" onchange="updateDate();" />
 <input type="hidden" class="em-date-input" name="scope[0]" value="<?php if( !empty($_REQUEST['scope'][0]) ) echo $_REQUEST['scope'][0]; ?>" />
 <input type="text" id="enddate" class="em-date-input-loc em-date-end" />
 <input type="hidden" class="em-date-input" name="scope[1]" value="<?php if( !empty($_REQUEST['scope'][1]) ) echo $_REQUEST['scope'][1]; ?>" />
 </span>

我遇到的问题是，当您单击表单字段时，它会打开一个日期选择器。我很确定它使用了这个确切的插件http://jqueryui.com/demos/datepicker/

不幸的是，这意味着您在选择日期后从未真正单击表单域，也从未键入任何内容。

我在第二个字段上尝试了 onmouseout（带有 em-date-input 类的隐藏字段） 我在第一个 id 为 startdate 的元素上尝试了 onchange

只有当您返回并单击选定日期的可见字段时，有一些有效。问题是，用户永远不会这样做。

我什至试着把 onsubmit="updateDate();"在提交按钮上，希望当您单击它时，它会在提交表单之前更改第二个日期.. 不走运。有什么建议？

编辑：添加警报以查看哪些有效，哪些无效

 <input type="text" onchange="alert('first');" id="startdate" class="em-date-input-loc em-date-start" />
 <input type="hidden" onchange="alert('second');" class="em-date-input" name="scope[0]" value="<?php if( !empty($_REQUEST['scope'][0]) ) echo $_REQUEST['scope'][0]; ?>" />
 <input type="text" onchange="alert('third');" id="enddate" class="em-date-input-loc em-date-end" />
 <input type="hidden" onchange="alert('fourth');" class="em-date-input" name="scope[1]" value="<?php if( !empty($_REQUEST['scope'][1]) ) echo $_REQUEST['scope'][1]; ?>" />

当我更改第二个框 (id="enddate") 上的日期时，它会触发第三个警报。即使我多次更改第一个框中的日期或通过键入，也不会触发其他警报。

Answer 1

您需要将onchange 事件连接到textbox，然后在它触发后复制您的数据。一旦日期选择器更新了值，它就会触发。

Answer 2

在提交事件之前使用表单：

onsubmit="return YOUR_FUNCTION_HERE()"

只需将其添加到您的提交按钮即可。

然后在该函数中设置值：

var YOUR_FUNCTION_HERE = function(){
    //set your hidden inputs
}

Answer 3

如果我理解你的问题，那么你可能想要这个（对你的问题有点困惑）

$(function(){
    $('#startdate, #enddate').datepicker();
    $('#startdate').on('change', function(e){
        $('#enddate').val($('#startdate').val());
    });
});​

Demo 或 This One.