Javascript 重复表单输入

Javascript duplicate form input

本文关键字：输入 表单 Javascript      更新时间：2023-09-26

我有一个表单，我需要两个字段相同。在设置第一个之后，我正在尝试使用 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 开始日期的元素上更改

有一些

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

我甚至尝试在提交按钮上放置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"）时，它会触发第三个警报。即使我多次或通过键入更改第一个框中的日期，也不会触发其他警报。

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

onsubmit="return YOUR_FUNCTION_HERE（）"

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

，然后在该函数中设置值：

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

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

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

演示或这个。

您需要将

onchange事件挂接到textbox，然后在触发后复制数据。它应该在日期选取器更新值后触发。

相关文章：