javascript - Setting a form variable value before submitting

Question

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?

Answer 1

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.