passing form data to another HTML page

Question

I have two HTML pages  form html and display html  In form html  there is a form    lt form action  display html  gt       lt input type  text  name  serialNumber    gt       lt input type  submit  value  Submit    gt   lt  form gt    The form data is sent to display html  I want to display and use the form data serialNumber in display html  as shown below    lt body gt       lt div id  write  gt           lt p gt The serial number is   lt  p gt       lt  div gt       lt script gt      function show             document getElementById  write   innerHTML   serialNumber             lt  script gt   lt  body gt    So how can I pass the serialNumber variable from form html to display html so that the above code in display html will show the serial number and the JavaScript function show   gets the serialNumber from the first HTML

User · Answer

Using pure JavaScript It s very easy using local storage  The first page form   x000D   x000D  function getData           gettting the values     var email   document getElementById  email   value      var password  document getElementById  password   value       var telephone  document getElementById  telephone   value       var mobile  document getElementById  mobile   value         saving the values in local storage     localStorage setItem  txtValue   email       localStorage setItem  txtValue1   password       localStorage setItem  txtValue2   mobile       localStorage setItem  txtValue3   telephone        x000D    input      font-size  25px        label      color  rgb 16  8  46       font-weight  bolder         data       x000D      lt fieldset style  width  fit-content  margin  0 auto  font-size  30px   gt           lt form action  action html  gt           lt legend gt Sign Up Form lt  legend gt           lt label gt Email  lt br   gt           lt input type  text  name  email  id  email   gt  lt  label gt  lt br   gt           lt label gt Password lt br   gt           lt input type  text  name  password  id  password   gt  lt  label gt  lt br gt           lt label gt Mobile  lt br   gt           lt input type  text  name  mobile  id  mobile   gt  lt  label gt  lt br   gt           lt label gt Telephone  lt br   gt           lt input type  text  name  telephone  id  telephone   gt  lt  label gt  lt br gt            lt input type  submit  value  Submit  onclick  getData    gt       lt  form gt       lt  fieldset gt  x000D   x000D   x000D   This is the second page   x000D   x000D    displaying the value from local storage to another page by their respective Ids document getElementById  data   innerHTML localStorage getItem  txtValue    document getElementById  data1   innerHTML localStorage getItem  txtValue1    document getElementById  data2   innerHTML localStorage getItem  txtValue2    document getElementById  data3   innerHTML localStorage getItem  txtValue3    x000D    lt div style   font-size  30px   color  rgb 32  7  63   text-align  center   gt       lt div style  font-size  40px  color  red  margin  0 auto   gt          Here s Your data      lt  div gt      The Email is equal to   lt span id  data  gt  Email lt  span gt  lt br gt       The Password is equal to  lt span id  data1  gt  Password lt  span gt  lt br gt      The Mobile is equal to  lt span id  data2  gt  Mobile lt  span gt  lt br gt      The Telephone is equal to  lt span id  data3  gt  Telephone lt  span gt  lt br gt       lt  div gt  x000D   x000D   x000D   Important Note  Please don t forget to give name  action html  to the second html file to work the code properly  I can t use multiple pages in a snippet  that s why its not working here try in the browser in your editor where it will surely work

User · Answer

Use  Get  Method to send the value of a particular field through the browser    lt form action  display html  method  GET  gt       lt input type  text  name  serialNumber    gt       lt input type  submit  value  Submit    gt   lt  form gt

User · Answer

Another option is to use  localStorage   You can easealy request the value with javascript in another page   On the first page  you use the following snippet of javascript code to set the localStorage    lt script gt         localStorage setItem  serialNumber    abc123def456     lt  script gt    On the second page  you can retrieve the value with the following javascript code snippet    lt script gt         console log localStorage getItem  serialNumber      lt  script gt    On Google Chrome You can vizualize the values pressing F12   Application   Local Storage   Source  https   www w3schools com jsref prop win localstorage asp

User · Answer

x000D   x000D   lt form action  display html  method  post  gt  x000D       lt input type  text  name  serialNumber    gt  x000D       lt input type  submit  value  Submit    gt  x000D   lt  form gt  x000D   x000D   x000D    In display html you should add the following code    lt script gt  function getParameterByName name  url        if   url  url   window location href      name   name replace         g       amp         var regex   new RegExp     amp      name          amp       amp                  results   regex exec url       if   results  return null      if   results 2   return         return decodeURIComponent results 2  replace     g            var sn   getParameterByName  serialNumber     document getElementById  write   innerHTML   sn    lt  script gt

User · Answer

You need the get the values from the query string  since you dont have a method set  your using GET by default   use the following tutorial   http   papermashup com read-url-get-variables-withjavascript   function getUrlVars         var vars           var parts   window location href replace     amp        amp         amp     gi  function m key value            vars key    value              return vars

User · Answer

If you have no option to use server-side programming  such as PHP  you could use the query string  or GET parameters   In the form  add a method  GET  attribute    lt form action  display html  method  GET  gt       lt input type  text  name  serialNumber    gt       lt input type  submit  value  Submit    gt   lt  form gt    When they submit this form  the user will be directed to an address which includes the serialNumber value as a parameter  Something like   http   www example com display html serialNumber XYZ   You should then be able to parse the query string - which will contain the serialNumber parameter value - from JavaScript  using the window location search value      from display html document getElementById  write   innerHTML   window location search     you will have to parse                                                                         the query string to extract the                                                                         parameter you need   See also JavaScript query string     The alternative is to store the values in cookies when the form is submit and read them out of the cookies again once the display html page loads   See also How to use JavaScript to fill a form on another page

User · Answer

If your situation is as described  You have to send action to a different servelet from a single form and you have two submit buttons and you want to send each submit button to different pages then your easiest answer is here   For sending data to two servelets make one button as a submit and the other as button On first button send action in your form tag as normal  but on the other button call a JavaScript function here you have to submit a form with same field but to different servelets then write another form tag after first close declare same textboxes there but with hidden attribute now when you insert data in first form then insert it in another hidden form with some javascript code Write one function for the second button which submits the second form  Then when you click submit button it will perform the action in first form  if you click on button it will call function to submit second form with its action  Now your second form will be called to second servlet   Here you can call two serveltes from the same html or jsp page with some mixed code of javascript  An EXAMPLE of second hidden form    x000D   x000D   lt form class  form-horizontal  method  post  action  IPDBILLING  id  MyForm  role  form  gt  x000D       lt input type  hidden  class  form-control  name  admno  id  ipdId  value    gt  x000D   lt  form gt  x000D   lt script type  text javascript  gt  x000D      function Print     x000D          document getElementById  MyForm   submit    x000D        x000D   lt  script gt    x000D   x000D   x000D

User · Answer

first html page    lt form action  display jsp   gt       lt input type  text  name  serialNumber    gt       lt input type  submit  value  Submit    gt   lt  form gt     Second html page   lt body gt   lt p gt The serial number is  lt   request getParameter  serialNumber     gt  lt  p gt   lt  body gt    you will get the value of the textbox on another page

[javascript] passing form data to another HTML page

Important Note:

Examples related to javascript

Examples related to html

Examples related to forms