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

**jomawie** · 07-11-2010 10:57 PM

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.

**MGenev** · 07-11-2010 11:21 PM

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:

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

Would that help?

**tirna** · 07-12-2010 12:05 AM

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.

PHP Code:


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

**jomawie** · 07-12-2010 12:27 AM

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?

**jomawie** · 07-12-2010 12:32 AM

<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

**tirna** · 07-12-2010 12:39 AM

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

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.

**jomawie** · 07-12-2010 12:55 AM

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.

**tirna** · 07-12-2010 01:22 AM

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.

**jomawie** · 07-12-2010 02:10 AM

thanks tirna...

**rangasai** · 09-04-2012 05:20 AM

I worked with example it working fine but it getting the values in address bar.How to get data in web page.

Originally Posted by tirna

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

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.

Thread: Pass Variables from one page to another - JAVASCRIPT// HTML

Thread Tools

Display

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

tirna

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions