Pass Variables from one page to another – JAVASCRIPT// HTML

@jomawieJul 12.2010

Hello Guys!

I’m still new with javascript. I need help with passing the variables from one page to another. My page has a form (HTML) and what i would like to do is that when i click on submit, the variables or text inputted in the FIRST NAME FIELD, LAST NAME FIELD and ETC would show in the second page. Pls help… i really need to know the basics. I cant seem to find the code. thanks

PS – I COULD add the codes here if needed.

to post a comment

JavaScript

9 Comments(s) _↴

@MGenevJul 12.2010 — #Well, the easiest way would be to use server-side scripting (anyway in most cases a form needs to be passed to the server for further processing) by sending the form fields via GET or POST methods. I'll provide a example using PHP:

[CODE]
 page1.php
 -----
 ...
 <form method="POST" action="page2.php">
 <input type="text" name="field" value="Enter value here" />
 </form>
 ...
 [/CODE]

[CODE]
 page2.php
 -----
 ...
 <form method="POST" action="page3.php">
 <input type="text" name="field" value="<?php echo($_POST['field']) ?>" />
 </form>
 [/CODE]

Would that help?

@tirnaJul 12.2010 — #If you're limited to client-side processing only, then 2 option you have include:

1) using cookies to store the form data

2) pass the form data as query string to another html page.

You would then need to extract the invidual parameters from the query string in the second html page.

Maybe use this as a guide to extract the parameters from the query string.

[code=php]<html>
 <head>
 <title>Form Processor</title>
 </head>
 <body>
 <script type="text/javascript">
 <!-- HIDE FROM INCOMPATIBLE BROWSERS
 if (window != top)
 top.location.href=location.href
 document.write("<h1>Your form has been submitted!</h1><h2>You entered the following data:</h2>");
 
 var formData = location.search;
 formData = formData.substring(1, formData.length);
 
 while (formData.indexOf("+") != -1) {
 formData = formData.replace("+", " ");
 }
 
 formData = unescape(formData);
 var formArray = formData.split("&");
 
 for (var i=0; i < formArray.length; ++i) {
 document.writeln(formArray[i] + "<br />");
 }
 
 // STOP HIDING FROM INCOMPATIBLE BROWSERS -->
 </script>
 </body>
 </html>
 
 [/code]

@jomawieauthorJul 12.2010 — #guys, i really appreciate your help but its seems that the code you have given is way to advance. I'm not using php, just html. do you have any other examples or explanation that a newbie like me would understand?

@jomawieauthorJul 12.2010 — #<html>

<title>Bio Data</title>

<head>

<style type="text/css">

body

{

background-color:#B8BFD8;

}

</style>

<script type="text/javascript">

</script>

</head>

<body>

<form>

<table border="0">

<th> <h1>BIODATA</h1></th>

<tr>

<td>ID#:</td>

<td>

<input type="text" name="id#" />

</td>

</tr>

<tr>

<td>Last Name:</td>

<td>

<input type="text" name="Lname" />

</td>

<tr>

<td>First Name:</td>

 <td> 
 
   <input type="text" name="Fname" /> 
   </td> 
   </tr> 
 
  </tr> 
  <tr> 
   <td>Gender:</td> 
 
   <td> 
   <input type="radio" name="sex" value="male" /> Male<br /> 
   <input type="radio" name="sex" value="female" /> Female
   </td> 
  </tr> 
  <tr> 
   <td>Hobby:</td> 
   <td> 
   <input type="text" name="hobby" /> 
   </td> 
  </tr> 
  <tr> 
   <td></td> 
   <td> 
   <input type="submit" value="Submit" /> 
   </td> 
  </tr>

</table>

</form>

</table>

</form>

</body>

</html>

i just want the information inputted in the text field to be transferred to the next page. hoping to hear from you all.. thanks

@tirnaJul 12.2010 — #The code I posted is actually javascript wrapped in php formatting tags (I like the colours you get ?...but that's just me).

As a demo:

1) substitute your <form> tag with

[CODE]<form action="formProcessor.htm" method="get" >[/CODE]

2) copy and paste the code I posted into a file called formProcessor.htm

3) Open the file you posted in your browser, enter some data in the inputs and then click your submit button.

4) The data you entered in the inputs should then be sent to formProcessor.htm and displayed in your browser.

If you need to do any $erver side processing then you need to follow the example posted by MGenev as a starting point.

@jomawieauthorJul 12.2010 — #thank you tirna. it worked! . you saved my ass. ? if it's not too much to ask.. can you further explain the code you added. ?

@tirnaJul 12.2010 — #The javascript essentially splits the sent query string into an array with each element storing a name/value pair from your form.

If you need more info on the individual functions/methods in the javascript, you should be able to find it on the w3schools website or googling the functions/methods you're not sure of.

@jomawieauthorJul 12.2010 — #thanks tirna... ?

@rangasaiSep 04.2012 — #I worked with example it working fine but it getting the values in address bar.How to get data in web page.:rolleyes:

The code I posted is actually javascript wrapped in php formatting tags (I like the colours you get ?...but that's just me).

As a demo:

1) substitute your <form> tag with

[CODE]<form action="formProcessor.htm" method="get" >[/CODE]

2) copy and paste the code I posted into a file called formProcessor.htm

3) Open the file you posted in your browser, enter some data in the inputs and then click your submit button.

4) The data you entered in the inputs should then be sent to formProcessor.htm and displayed in your browser.

If you need to do any $erver side processing then you need to follow the example posted by MGenev as a starting point.[/QUOTE]

Also in #JavaScript _↴

Still Having Issues Referencing <select> options...multiple javascripts not working on same page sending information as a mail attachment

Success!

Help @jomawie spread the word by sharing this article on Twitter...

Tweet This

Pass Variables from one page to another – JAVASCRIPT// HTML

9 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Pass Variables from one page to another – JAVASCRIPT// HTML

9 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #JavaScript _↴