提交前设置表单变量值

Setting a form variable value before submitting

本文关键字：变量值 表单 设置 提交      更新时间：2023-09-26

我有一个页面，您可以在其中查看酒店信息。这个页面上有一个小表格，用于搜索您所在酒店页面的可用房间。

<form id="form1" name="form1" action="search.asp" method="POST">
    <input type="hidden" id="Hotel" name="Hotel" value="<%= HotelID %>">
    Arrive: <input value="<% strURLBookingDate %>" type="text" id="ArrivalDate" name="ArrivalDate">                            
    Depart: <input value="<% strURLBookingDate2 %>" type="text" id="DepartureDate" name="DepartureDate">
    <input type="submit" name="btnHotelSearch" value="Search This Hotel">
    <input type="submit" name="btnHotelSearchAll" value="Search All Hotels">                           
</form>

但我也需要在表单中添加一个按钮，如果我点击它，我可以搜索所有酒店。为此，我只需要在点击按钮时将名为"酒店"的隐藏输入值设置为0。

当我单击btnHotelSearchAll时，如何在提交表单之前设置隐藏值？

您可以在btnHotelSearchAll上挂接click事件，然后填写值：

document.getElementById("btnHotelSearchAll").onclick = function() {
    document.getElementById("Hotel").value = "0";
};

请绝对确定页面上没有任何其他包含id或name"Hotel"，并且您没有使用该名称声明的任何全局变量，因为某些版本的IE存在错误，它们将name值和全局变量名称合并到用于document.getElementById的命名空间中。或者，使隐藏字段上的id更加独特(name可以保持原样，这样您就不必更改后端；id只是客户端，name是发送到服务器的内容(。例如，您可以这样做：

<input type="hidden" id="HotelField" name="Hotel" value="<%= HotelID %>">
                              ^

然后稍微更改代码：

document.getElementById("btnHotelSearchAll").onclick = function() {
    document.getElementById("HotelField").value = "0";
    //                            ^
};

更新：

请注意，挂接按钮的代码必须在按钮被放入DOM后运行。因此，对于上面的代码，这意味着要确保脚本块位于页面中的表单下方，如下所示：

<form ...>
....
</form>
...
<script>
...
</script>

如果script块位于按钮上方，则在脚本运行时按钮还不存在。这就是为什么通常最好将脚本放在body元素的末尾，就在关闭</body>标记之前的原因之一(此处详细介绍(。

如果您真的想要按钮上方的脚本，则必须将其设置为onload事件处理程序或诸如此类的东西来延迟调用。但是window.onload在页面加载过程的后期发生(例如，它会等待所有图像和其他资产加载(，在您的用户可能与您的表单交互很久之后，所以通常最好早点完成。

离题：我的标准注意事项是，通过使用一个不错的JavaScript库，如jQuery、Prototype、YUI、Closure或其他任何库，这些东西都变得更早、更健壮。例如，jQuery将为您处理document.getElementById中的IE错误，因此您不必担心合并问题。

如果您想使用jQuery，请尝试以下操作。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" ></script>
<script type="text/javascript" >
$(function(){
  $('#btnHotelSearch').click(function(){
    $('#Hotel').val(0);
  });
});
</script>

使用onclick属性调用javascript函数，该函数将设置隐藏字段值

 <input type="submit" name="btnHotelSearchAll" value="Search All Hotels" onclick="SetHotelID();">
<script>
   function SetHotelID()
   {
      $('#Hotel').val('0');
   }
</script>

注意我使用的是Jquery

给你，让我知道这是否有效。。。

<form id="form1" name="form1" action="" method="POST">
<input type="hidden" id="Hotel" name="Hotel" value="<%= HotelID %>">
Arrive: <input value="<% strURLBookingDate %>" type="text" id="ArrivalDate" name="ArrivalDate">                            
Depart: <input value="<% strURLBookingDate2 %>" type="text" id="DepartureDate" name="DepartureDate">
<input type="submit" name="btnHotelSearch" value="Search This Hotel">
<input type="submit" name="btnHotelSearchAll" value="Search All Hotels" onclick='document.getElementById("Hotel").value="0"'>

相关文章：