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

在提交活动前使用表格：

onsubmit =“返回YOUR_FUNCTION_HERE（）”

只需将其添加为提交按钮。

然后在func中设置值：

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

Answer 2

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

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

Demo或This One.

Answer 3

您需要将onchange事件与textbox挂钩，然后在触发后复制您的数据。一旦datepicker更新了值，它就会触发。

Javascript重复表单输入

3 个答案: