Javascript 提交前设置表单变量值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6597444/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting a form variable value before submitting
提问by Steven
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.
但我还需要在表单中添加一个按钮，如果我点击它，我将可以搜索所有酒店。为此，我只需要在单击按钮时将名为“Hotel”的隐藏输入值设置为 0。
How can I set that hidden value before the form is submitted when I click btnHotelSearchAll?
当我单击 btnHotelSearchAll 时，如何在提交表单之前设置该隐藏值？
回答by T.J. Crowder
You can hook the clickevent on btnHotelSearchAlland then fill in the value:
您可以将click事件挂钩btnHotelSearchAll，然后填写值：
document.getElementById("btnHotelSearchAll").onclick = function() {
document.getElementById("Hotel").value = "0";
};
Be absolutely certain there's nothingelse on the page that has either the idor name"Hotel", and that you don't have any global variables you've declared with that name, because some versions of IE have bugswhere they conflate namevalues and global variable names into the namespace they use for document.getElementById. Or, alternately, make the idon the hidden field a bit more unique (the namecan stay as it is so you don't have to change the backend; the idis only client-side, the nameis what's sent to the server). E.g., you can do this:
绝对确定页面上没有任何其他内容包含 theid或name“Hotel”，并且您没有使用该名称声明的任何全局变量，因为某些版本的 IE存在将name值和全局变量混为一谈的错误名称进入它们用于的命名空间document.getElementById。或者，或者，使id隐藏字段上的 更加独特（name可以保持原样，因此您不必更改后端；这id只是客户端，即name发送到服务器的内容）。例如，你可以这样做：
<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 afterthe 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:
请注意，挂钩按钮的代码必须在按钮放入 DOM后运行。因此，对于上面的代码，这意味着确保脚本块位于页面中的表单下方，如下所示：
<form ...>
....
</form>
...
<script>
...
</script>
If the scriptblock is abovethe 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 bodyelement, just before the closing </body>tag (more here).
如果该script块位于按钮上方，则该按钮在脚本运行时尚不存在。这就是为什么通常最好将脚本放在body元素末尾，就在结束</body>标记之前（更多在这里）的原因之一。
If you really want the script abovethe button, you have to delay the call by making it an onloadevent handler or that sort of thing. But window.onloadhappens verylate in the process of a page load (it waits for allimages and other assets to load, for instance), long after your users may be interacting with your form, so usually best to do it sooner.
如果您真的想要按钮上方的脚本，则必须通过使其成为onload事件处理程序或类似的东西来延迟调用。但window.onload情况非常的页面加载（等待的过程中后期的所有图像和其它资产负载，例如），经过长期用户可以与您的形式进行互动，所以平时最好早一点这样做。
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.getElementByIdfor you so you don't have to worry about the conflation problem.
题外话：我的标准说明是，通过使用像jQuery、Prototype、YUI、Closure或其他几个中的任何一个像样的 JavaScript 库，很多这些东西是更早和更健壮的。例如，jQuery 会document.getElementById为您处理 IE 错误，因此您不必担心混淆问题。
回答by Brandon Boone
If you'd like to use jQuery, try the following.
如果您想使用 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>
回答by Amir Ismail
using onclickattribute to call javascript function that will set the hidden field value
使用onclick属性调用将设置隐藏字段值的javascript函数
<input type="submit" name="btnHotelSearchAll" value="Search All Hotels" onclick="SetHotelID();">
<script>
function SetHotelID()
{
$('#Hotel').val('0');
}
</script>
NoteI am using Jquery
注意我正在使用Jquery
回答by Federico Contreras
Here you go, let me know if this works...
给你，让我知道这是否有效......
<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"'>
