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

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

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

绝对确定页面上有 nothing else，其中包含id或name“Hotel”，并且您没有任何全局变量'使用该名称声明，因为某些版本的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";
    //                            ^
};

然后稍微更改一下代码：

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

<强>更新：

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

script

如果body块上面按钮，那么该脚本运行时该按钮将不存在。这就是为什么经常最好将脚本放在</body>元素的末尾，就在结束onload标记（more here）之前。

如果您真的想要上面的按钮，那么您必须通过使其成为window.onload事件处理程序或类似事件来延迟调用。但是document.getElementById在页面加载过程中发生了非常（例如，等待所有图像和其他资产加载）可能会与您的表单进行交互，因此通常最好尽快完成。

偏离主题：我的标准注意事项是，通过使用像jQuery，Prototype，{{{{}}这样不错的JavaScript库，可以更早，更强大地制作这些内容。 3}}，YUI或Closure。例如，jQuery将为您处理{{1}}中的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"'>

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

4 个答案: