在提交之前设置表单变量值答案

【问题标题】：Setting a form variable value before submitting在提交之前设置表单变量值
【发布时间】：2011-07-06 23:47:21
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript html

【解决方案1】：

可以在btnHotelSearchAll上钩住click事件，然后填入值：

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

绝对确定页面上没有具有id 或name“Hotel”，并且您没有任何已声明的全局变量名称，因为某些版本的 IE have bugs 将 name 值和全局变量名称混合到它们用于 document.getElementById 的命名空间中。或者，或者，使隐藏字段上的id 更加独特（name 可以保持原样，因此您不必更改后端；id 只是客户端，@ 987654338@ 是发送到服务器的内容）。例如，您可以这样做：

<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> 标记 (more here) 之前的原因之一。

如果你真的想要脚本在按钮之上，你必须通过将其设置为onload 事件处理程序或类似的东西来延迟调用。但是window.onload 发生在页面加载过程的非常后期（例如，它等待所有图像和其他资产加载），在您的用户可能很久之后与您的表单进行交互，因此通常最好尽快进行。

题外话：我的标准说明是，通过使用像 jQuery、Prototype、YUI、@987654326 之类的体面的 JavaScript 库，很多这些东西变得更早且更健壮@，或any of several others。例如，jQuery 会为您处理document.getElementById 中的 IE 错误，因此您不必担心合并问题。

【讨论】：

@Anders：哈哈，我在最后添加了一个题外话，可能会让你收回它！ :-) 但我确实证明了这一点，主要答案不需要任何库（我不相信用特定于 jQuery 的答案来回答非 jQuery 问题，但我确实指出了一个像样的库 - jQuery 或其他 -- 可能会有所帮助）。
由于某种原因这不起作用，当我单击按钮时脚本永远不会运行。我还需要做些什么来触发代码吗？
@Steven：不，但我确实忘记提及您需要确保代码在按钮元素已经在 DOM 中运行之后运行。我已经更新以解释这一点。
+1 指出 id 只是客户端，名称被发送到服务器，不知道这一点，想知道为什么我的 POST-Variable 是空的。

【解决方案2】：

如果您想使用 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>

【讨论】：

【解决方案3】：

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

 <input type="submit" name="btnHotelSearchAll" value="Search All Hotels" onclick="SetHotelID();">

<script>
   function SetHotelID()
   {
      $('#Hotel').val('0');
   }
</script>

注意我使用的是Jquery

【讨论】：

【解决方案4】：

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

<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"'>

【讨论】：