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?

T.J. Crowder · Accepted Answer · 2011-07-06T15:47:21.243

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.

@Anders: LOL, I added an off-topic at the end that may make you retract that! :-) But I do justify it, and the main answer doesn't require any library (I don't believe in answering non-jQuery questions with jQuery-specific answers, but I do flag up how a decent library -- jQuery or other -- can be helpful). — T.J. Crowder, Jul 06 '11 at 13:57
For some reason this didn't work, the script never gets run when I click the button. Is there something else I need to do to get the code to fire? — Steven, Jul 06 '11 at 15:28
@Steven: No, but I did forget to mention that you need to be sure the code runs *after* the button element is already in the DOM. I've updated to explain that. — T.J. Crowder, Jul 06 '11 at 15:47
+1 for pointing out that id is only client-side and name gets sent to the server, wasn't aware of that and wondered why my POST-Variable was empty. — Select0r, Jun 25 '18 at 13:21

score 2 · Answer 2 · answered Jul 06 '11 at 13:50

If you'd like to use jQuery, try the following.

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

score 1 · Answer 3 · answered Jul 06 '11 at 13:52

using onclick attribute to call javascript function that will set the hidden field value

 <input type="submit" name="btnHotelSearchAll" value="Search All Hotels" onclick="SetHotelID();">

<script>
   function SetHotelID()
   {
      $('#Hotel').val('0');
   }
</script>

Note I am using Jquery

score 1 · Answer 4 · answered Jul 06 '11 at 13:56

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

Setting a form variable value before submitting

4 Answers4

Linked