What is the best practice for passing variables from one HTML page to another?

javascript html grails dojo

13,669

Solution 1

You could just use a hidden input field; that gets transmitted as part of the form.

<html>
  <head>
  </head>
  <body>
    <script type="text/javascript">
      function updateSelectedItemId() {
        document.myForm.selectedItemId.value = 2;
        alert(document.myForm.selectedItemId.value);

       // For you this would place the selected item id in the hidden
       // field in stead of 2, and submit the form in stead of alert
      }
    </script>

    Your grid comes here; it need not be in the form

    <form name="myForm">
      <input type="hidden" name="selectedItemId" value="XXX">
      The submit button must be in the form.
      <input type="button" value="changeSelectedItem" onClick="updateSelectedItemId()">
    </form>
  </body>
</html>

Solution 2

It's good one, but better is to use some script language such as JSP,PHP, ASP....and you can use simple POST and GET methods.

Solution 3

The best method (imho) is to include it in the URL

href="http://NewPage.htm?var=value";

encodeUriComponent a string Value

Solution 4

One way to send over variables using POST to another page is to make the link to the subsequent page a submit input on a form where the action attribute is your target page. For every variable you have, you can include using inputs of attribute type "hidden" in this form, making only the button visible.

Another option is to dynamically generate links on the page with something like PHP where you basically repopulate the current GET queries.

Finally, you can always store this information in the PHP $_SESSION array and not have to worry about continually passing these variables through site navigation.

Your choice will depend on how many navigational options there are where you'd like to keep the same variables. It will also depend on how secure you'd like your back end to be and the amount you'd like to disclose to the advanced web user.

Solution 5

If you are only going to need the ID on the subsequent pages, then you can pass the id as a query string parameter.

But there will be times when you need to relay more information and passing a variety of parameters to different pages and having to maintain different sets of parameters for different pages can get a little hairy. When this is the case I'd suggest that you keep a hidden field on the form and create an argument object that stores each of your parameters. Serialize the argument object with JSON and store this in you hidden field. Post the form back to the server. When the next page loads, deserialize the object and retrieve the values you need.

View more solutions

13,669

Author by

EricGreg

Work in progress...

Updated on June 22, 2022

Comments

EricGreg almost 2 years

I'm relatively new to web application programming so I hope this question isn't too basic for everyone.

I created a HTML page with a FORM containing a dojox datagrid (v1.2) filled with rows of descriptions for different grocery items. After the user selects the item he's interested in, he will click on the "Submit" button.

At this point, I can get the javascript function to store the item ID number as a javascript variable BUT I don't know how to pass this ID onto the subsequent HTML page.

Should I just pass the ID as an URL query string parameter? Are there any other better ways?

EDIT: The overall process is like a shopping cart. The user will select the item from the grid and then on the next page the user will fill out some details and then checkout.

I should also mention that I'm using grails so this is happening in a GSP page but currently it only contains HTML.
extraneon over 15 years

Forgot to say, a button which calls document.myForm.submit() may also be out of the form. Only a type=submit must be IN the form itself.