This document provides code examples for sending variables between PHP, HTML forms, and JavaScript. It demonstrates how to: 1) Send variables between PHP, forms, and JavaScript on the same page; 2) Send variables from one page to another via URLs, PHP sessions, or hidden form fields; 3) Dynamically update HTML elements based on form selections like radio buttons or dropdowns.

1. Send, pass, get variables with PHP, Form, HTML & JavaScript code http://www.skytopia.com/project/articles/compsci/form.html
Skytopia > Projects > Technology/science/misc articles > HTML Forms in a nutshell
Ads by Google
PHP CMS Script
PHP Form Post
PHP
Super useful bits of PHP, Form and JavaScript code
All code on this page is considered by us to contain the most basic and important aspects of form
SpeedXML sending. This page basically shows in the shortest possible way how you can:
Allows to extract
import XML Test your PHP offline - Test your PHP pages offline easily, without installing your
Data Free
evaluation copy
own web server.
on line
www.idellys.com/soluti Send variables between Javascript, Form and PHP on the same page:
* PHP variable to Javascript variable or send Form variable to Javascript variable
* PHP variable to Form variable or send Javascript variable to Form variable
* Javascript variable to PHP variable (impossible) or send Form variable to PHP variable (impossible)
Send variables from one page to another:
* URL variables to PHP/JavaScript page - Allow sending different variables via the URL string to the new page (readable
through PHP or Javascript). This is more appropriate than the below if there are few pieces of small info you wish to
send.
* PHP variables to PHP page - Alternatively, maintain a session by sending PHP variables to another page with PHP in
(allows super large arrays).
* Form variables to PHP page - Alternatively, allow sending hidden form variables to a PHP page. This allows the user to
(more easily than the above methods) select options on the page (via URL, radio buttons, or dropdown menu), and for these to be sent
to the new page.
* Form variables (tick boxes) to PHP page - As above but with tick boxes.
Dynamically update HTML - Allow different bits of HTML to dynamically execute according to user
input:
* Change HTML according to radio button selection.
* Change HTML according to dropbox selection.
* Add/remove bits of HTML according to multiple checkboxes.
Send variables between Javascript, Form and PHP on the same page:
PHP variable to Javascript variable:
<?php $myvar=10; ?>
<script type="text/javascript">
jsvar = <?php echo $myvar; ?>;
document.write(jsvar); // Test to see if its prints 10:
</script>
1 of 6 16-Jan-12 9:58 PM

2. Send, pass, get variables with PHP, Form, HTML & JavaScript code http://www.skytopia.com/project/articles/compsci/form.html
Form variable to Javascript variable:
<form name="myform4"> <input type="hidden" name="formvar" value="100"> </form>
<script type="text/javascript">
jsvar = document.myform4.formvar.value;
document.write(jsvar) // test
</script>
PHP variable to Form variable:
<form name="myform4">
<input type="hidden" name="formvar" value="<?php $phpvar=10; echo $phpvar; ?>"> // PHP code inside HTML!!
</form>
Javascript variable to Form variable:
<form name="myform3">
<!-- It needn't be a "hidden" type, but anything from radio buttons to check boxes -->
<input type="hidden" name="formvar" value="">
</form>
<script type="text/javascript">
jsvar=10;
document.myform3.formvar.value = jsvar;
</script>
Javascript variable to PHP variable:
This is impossible (unless you reload the page, or call another page), since all PHP code is rendered first (on the server side),
and then Javascript is dealt with afterwards (on the client side).
Form variable to PHP variable:
Without refreshing, this is impossible like above for similar reasons. If you don't mind a refresh, then either a page reload or
calling another web page would work if you used something like $_POST['FormVar']; in the php file.
Allow sending different variables via the URL string to the new page (readable
through PHP or Javascript).
The version shown below uses PHP to read the variables back, but it's possible to use Javascript and some messy splitting to
do the same (for that route, see this nice little function, or here, or here for example code.)
EXAMPLE:
Send variables via URL!
INSIDE "page1.php" or "page1.html"
// Send the variables myNumber=1 and myFruit="orange" to the new PHP page...
<a href="page2c.php?myNumber=1&myFruit=orange">Send variables via URL!</a>
INSIDE "page2c.php"
<?php
// Retrieve the URL variables (using PHP).
$num = $_GET['myNumber'];
$fruit = $_GET['myFruit'];
echo "Number: ".$num." Fruit: ".$fruit;
?>
2 of 6 16-Jan-12 9:58 PM

3. Send, pass, get variables with PHP, Form, HTML & JavaScript code http://www.skytopia.com/project/articles/compsci/form.html
Maintain a session by sending PHP variables (including multiple full blown
multi-dimensional arrays if you so wish) to a page with PHP in.
INSIDE "page1.php"
<?php
// "session_register()" and "session_start();" both prepare the session ready for use, and "$myPHPvar=5"
// is the variable we want to carry over to the new page. Just before we visit the new page, we need to
// store the variable in PHP's special session area by using "$_SESSION['myPHPvar'] = $myPHPvar;"
session_register();
session_start();
$myPHPvar=5;
$_SESSION['myPHPvar'] = $myPHPvar;
?>
<a href="page2.php">Click this link</a>, and the "$myPHPvar" variable should carry through.
INSIDE "page2.php"
<?php
// Retrieve the PHP variable (using PHP).
session_start();
$myPHPvar = $_SESSION['myPHPvar'];
echo "myPHPvar: ".$myPHPvar." ..........(should say "myPHPvar: 5")<br>";
?>
Allow sending hidden form variables to a PHP page. This allows the user to
select options on the page, and for these to be carried across to the new page.
EXAMPLE:
(these links all go to the same PHP page...)
Click 1st
Click 2nd
Click 3rd
Click 1st
Click 2nd
Click 3rd
INSIDE "page1.php" or "page1.html"
<!-- Pass over to the new page an arbitrary value, which in this case, is determined by... -->
<!-- *********** the link being clicked: (USE THIS OR...) ************** -->
<a href="#" onclick="document.myform.formVar.value='first'; document.myform.submit(); return false">Click 1st</a><br>
<a href="#" onclick="document.myform.formVar.value='second'; document.myform.submit(); return false">Click 2nd</a><br>
<a href="#" onclick="document.myform.formVar.value='third'; document.myform.submit(); return false">Click 3rd</a><br>
<!-- *********** the radio button pressed before clicking "Send Form" (...OR USE THIS OR...) ************** -->
<input name="br" type="radio" onClick="document.myform.formVar.value='first'">Click 1st<br>
<input name="br" type="radio" onClick="document.myform.formVar.value='second'">Click 2nd<br>
<input name="br" type="radio" onClick="document.myform.formVar.value='third'">Click 3rd<br><br>
<!-- *********** the dropdown menu selected before clicking "Send Form" (...OR USE THIS) ************** -->
<select onchange="document.myform.formVar.value=this.value">
<option value="first">Select 1st</option>
<option value="second">Select 2nd</option>
<option value="third">Select 3rd</option>
3 of 6 16-Jan-12 9:58 PM

4. Send, pass, get variables with PHP, Form, HTML & JavaScript code http://www.skytopia.com/project/articles/compsci/form.html
</select>
<!-- ***************************************** -->
<!-- In each of the above three cases, the hidden variable in the code below is needed for it all to work.
Also notice how the destination page is given here, rather than in anything above -->
<form method=post name="myform" action="page2.php">
<input type="hidden" name="formVar" value="">
<input type="submit" value="Send form!">
</form>
INSIDE "page2.php"
<?php
// Retrieve the hidden form variable (using PHP).
$myvar = $_POST['formVar'];
echo "myvar: ".$myvar;
?>
Allow sending hidden form variables (using tick boxes) to a PHP page. This
allows the user to select options on the page, and for these to be carried
across to the new page.
EXAMPLE:
INSIDE "page1.html"
Tick A
Tick B
Tick C
CODE:
INSIDE "page1.html"
Tick A <input type="checkbox" checked onClick="document.myform2.a0.value = this.checked"><br>
Tick B <input type="checkbox" onClick="document.myform2.b0.value = this.checked"><br>
Tick C <input type="checkbox" onClick="document.myform2.c0.value = this.checked">
<form method=post name="myform2" action="page2b.php">
<input type="hidden" name="a0" value="true">
<input type="hidden" name="b0" value="false">
<input type="hidden" name="c0" value="false">
<input type="submit" value="Send form!">
</form>
INSIDE "page2b.php"
<?php
// Retrieve the hidden form variable (using PHP).
$myvarA = $_POST['a0'];
$myvarB = $_POST['b0'];
$myvarC = $_POST['c0'];
echo "myvarA: ".$myvarA."<br>";
echo "myvarB: ".$myvarB."<br>";
echo "myvarC: ".$myvarC;
?>
4 of 6 16-Jan-12 9:58 PM

5. Send, pass, get variables with PHP, Form, HTML & JavaScript code http://www.skytopia.com/project/articles/compsci/form.html
Allow different bits of HTML to dynamically execute according to which radio
button is pressed
This is useful for many purposes including using buttons to change the picture (as part of a gallery), or for different sub forms
to appear accordingly.
EXAMPLE:
Click 1st
Click 2nd
Click 3rd
Anything can go here .....[I am the footer]
CODE:
<script type="text/javascript">
function SetHTML1(type) {
document.getElementById("a1").style.display = "none"
document.getElementById("b1").style.display = "none"
document.getElementById("c1").style.display = "none"
// Using style.display="block" instead of style.display="" leaves a carriage return
document.getElementById(type).style.display = ""
}
</script>
<input name="br" type="radio" checked onClick="SetHTML1('a1')">Click 1st<br>
<input name="br" type="radio" onClick="SetHTML1('b1')">Click 2nd<br>
<input name="br" type="radio" onClick="SetHTML1('c1')">Click 3rd<br><br>
<span id="a1" style="">Anything can go here </span>
<span id="b1" style="display:none">...like an image...<br><img src="http://www.skytopia.com/ar.png"> </span>
<span id="c1" style="display:none">...<a href="http://www.skytopia.com">or a link</a>... </span>
.....[I am the footer] <!-- Not needed, but shows how stuff below the dynamic content makes it move up and down -->
Allow different bits of HTML to dynamically execute according to which
dropdown menu is selected
EXAMPLE:
Anything can go here .....[I am the footer]
CODE:
<script type="text/javascript">
function SetHTML2(type) {
document.getElementById("a2").style.display = "none"
document.getElementById("b2").style.display = "none"
document.getElementById("c2").style.display = "none"
// Using style.display="block" instead of style.display="" leaves a carriage return
document.getElementById(type).style.display = ""
}
</script>
<select onchange="SetHTML2(this.value)">
<option value="a2">Select 1st</option>
<option value="b2">Select 2nd</option>
<option value="c2">Select 3rd</option>
</select>
<span id="a2" style="display:none">Anything can go here </span>
<span id="b2" style="display:none">...like an image...<br><img src="http://www.skytopia.com/ar.png"> </span>
<span id="c2" style="display:none">...<a href="http://www.skytopia.com">or a link</a>... </span>
.....[I am the footer] <!-- Not needed, but shows how stuff below the dynamic content makes it move up and down -->
5 of 6 16-Jan-12 9:58 PM

6. Send, pass, get variables with PHP, Form, HTML & JavaScript code http://www.skytopia.com/project/articles/compsci/form.html
Add/remove bits of HTML according to multiple checkboxes
EXAMPLE: Anything can go here
CODE:
<script type="text/javascript">
function SetHTML3(check,type) {
if(check==true) document.getElementById(type).style.display = "";
else document.getElementById(type).style.display = "none";
}
</script>
<input type="checkbox" CHECKED onClick="SetHTML3(this.checked,'a3')">
<input type="checkbox" onClick="SetHTML3(this.checked,'b3')">
<input type="checkbox" onClick="SetHTML3(this.checked,'c3')">
<span id='a3'> <b> Anything can go here </b></span>
<span id='b3' style="display:none"> <b> ...like an image... <img src="http://www.skytopia.com/ar.png"> </b></span>
<span id="c3" style="display:none"> <b> ...<a href="http://www.skytopia.com">or a link</a> </b></span>
Test your PHP pages offline easily, without installing your own web server.
This was something recently that doubled my productivity in a snap. Simply use EasyPHP. It's only 8 megabyte, and a million
times quicker and simpler to install/configure than a fully blown Apache (or equivalent) server. In fact, it's small GUI window
will make it instant - just make sure you put PHP pages inside its special www folder, and point your browser to the
"http://127.0.0.1/mywebpage.php".
Apart from this amazing time saver, always "View source" to see what PHP outputs to the HTML/Javascript page (remember,
PHP is read by the server, but is not potentially visible to the visitor in the same way that Javascript or HTML is).
The last amazing tip is to insert "exit();" when an annoying bug creeps into the code to see where the code goes wrong (try
"exit()" at different points throughout the code).
Feedback is welcome, whether it's a chat, improvement I can make, or just a quick thanks.
If the info on this site has been of sufficient interest, a small donation would be appreciated:
All pictures and text on this page are copyright 2007 onwards Daniel White.
If you wish to use any images from this page, please contact me for permission.
6 of 6 16-Jan-12 9:58 PM