提交前设置表单变量值

Question

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

<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时，如何在表单提交之前设置隐藏值？

Answer 1

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

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

绝对肯定有什么其他有要么id或name“酒店”的页面上，而您没有使用该名称声明的全局变量，因为某些版本的IE have bugs将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>标记（more here）之前将脚本放在body元素末尾的原因。

如果你真的想要以上的脚本按钮，你必须通过使它成为onload事件处理程序或类似的东西来延迟呼叫。但window.onload发生非常在页面加载的过程中（例如，等待全部图像和其他资源加载），在用户可能与您的表单进行交互之后很久，所以通常最好尽快完成。

---

题外话：我的标准。注意，很多东西是更早和更强劲的通过一个体面的JavaScript库，例如jQuery，Prototype，YUI，Closure，或any of several others制成。例如，jQuery将为您处理document.getElementById中的IE错误，因此您不必担心合并问题。

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

Answer 3

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

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

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

注意我使用Jquery

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