提交前设置表单变量值 [英] Setting a form variable value before submitting

问题描述

我有一个页面，您可以查看酒店的信息。

 < form id =在这个页面上有一个表格，用于搜索您所在酒店页面的房间可用性。 form1name =form1action =search.aspmethod =POST> 
< input type =hiddenid =Hotelname =Hotelvalue =<％= HotelID％>> 
 
抵达：< input value =<％strURLBookingDate％> type =textid =ArrivalDatename =ArrivalDate> 
出发地：< input value =<％strURLBookingDate2％> type =textid =DepartureDatename =DepartureDate> 
 
< input type =submitname =btnHotelSearchvalue =搜索这家酒店> 
< input type =submitname =btnHotelSearchAllvalue =搜索所有酒店> 
< / form> 
  

但我还需要在表单中添加一个按钮，以便我可以搜索所有酒店点击它。为了实现这一点，我只需要在点击按钮时将名为Hotel的隐藏输入值设置为0.

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

解决方案

您可以勾选点击事件放在 btnHotelSearchAll 然后填写：

 文档。 getElementById（btnHotelSearchAll）。onclick = function（）{
 document.getElementById（Hotel）。value =0; 
}; 
  

绝对可以肯定的是，页面上没有其他 code> id 或 name Hotel，并且您没有使用该名称声明的全局变量，因为某些版本的IE浏览器有错误它们将 name 值和全局变量名称混合到它们用于 document.getElementById 的命名空间中。或者，也可以使隐藏字段上的 id 更加独特（ name 可以保持原样您不必更改后端; id 仅是客户端，名称是发送给服务器）。例如，您可以这样做：

 < input type =hiddenid =HotelFieldname =Hotelvalue =<％= HotelID％>> 
 ^ 
  

然后改变一下代码：

  document.getElementById（btnHotelSearchAll）。onclick = function（）{
 document.getElementById（HotelField）。value =0; 
 // ^ 
}; 
  

---

更新：

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

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

如果脚本块是在按钮上方，那么该按钮在脚本运行时不会存在。这就是为什么经常最好将脚本放在 body 元素的末尾，就在关闭< / body> 标记（更多此处）。





如果您确实需要按钮上方的脚本，则必须通过将 onload 事件处理程序或之类的东西。但是，在页面加载过程的后期（它等待所有的图像和其他资源）时， window.onload 发生在 在用户可能与您的表单进行交互之后很长时间，所以通常最好尽快完成。

---

<关键主题：我的标准说明是，通过使用像 jQuery ，原型， YUI ，关闭或其他几种。例如，jQuery将为您处理 document.getElementById 中的IE错误，因此您不必担心混淆问题。

I have a page where you can view a hotel's information. On this page is a little form to search for room availability for the hotel page you are on.

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

But I also need to add a button to the form that will allow me to search all hotels if I click it. For that to happen, I just need to set the hidden input value named "Hotel" to 0 when the button is clicked.

How can I set that hidden value before the form is submitted when I click btnHotelSearchAll?

解决方案

You can hook the click event on btnHotelSearchAll and then fill in the value:

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

Be absolutely certain there's nothing else on the page that has either the id or name "Hotel", and that you don't have any global variables you've declared with that name, because some versions of IE have bugs where they conflate name values and global variable names into the namespace they use for document.getElementById. Or, alternately, make the id on the hidden field a bit more unique (the name can stay as it is so you don't have to change the backend; the id is only client-side, the name is what's sent to the server). E.g., you can do this:

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

and then change the code a bit:

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

---

Update:

Note that the code to hook up the button must run after the button has been put in the DOM. So with the code above, that means making sure that the script block is below the form in the page, like this:

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

If the script block is above the button, then the button won't exist yet as of when the script runs. This is one reason why it's frequently best to put scripts at the end of the body element, just before the closing </body> tag (more here).

If you really want the script above the button, you have to delay the call by making it an onload event handler or that sort of thing. But window.onload happens very late in the process of a page load (it waits for all images and other assets to load, for instance), long after your users may be interacting with your form, so usually best to do it sooner.

---

Off-topic: My standard note that a lot of this stuff is made earlier and more robust by using a decent JavaScript library like jQuery, Prototype, YUI, Closure, or any of several others. jQuery, for instance, will deal with the IE bugs in document.getElementById for you so you don't have to worry about the conflation problem.

这篇关于提交前设置表单变量值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！