javascript - 提交前设置表单变量值

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

你可以 Hook click事件 btnHotelSearchAll然后填写值:

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 后运行。所以对于上面的代码，这意味着确保脚本 block 位于页面中的表单下方，如下所示:

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

如果script block 位于按钮上方，那么在脚本运行时按钮将不存在。这就是为什么通常最好将脚本放在 body 末尾的原因之一。元素，就在结束之前 </body>标记 ( more here )。

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

---

题外话:我的标准说明是，通过使用像 jQuery 这样的体面的 JavaScript 库，很多这样的东西更早变得更健壮。 , Prototype , YUI , Closure , 或 any of several others .例如，jQuery 将处理 document.getElementById 中的 IE 错误为您提供，因此您不必担心合并问题。