Send variables between Javascript, Form and PHP on the same page

Posted on Juli 7, 2008. Filed under: Tutorial Programming | Tag:, , |

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>

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>

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




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

Select 1stSelect 2ndSelect 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>
</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="page2.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;
?>




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:

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 = “”
}
Click 1st
Click 2nd
Click 3rd

Anything can go here …like an image…
or a link …..[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:

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 = “”
}
Select 1stSelect 2ndSelect 3rd Anything can go here …like an image…
or a link …..[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 -->




Add/remove bits of HTML according to multiple checkboxes

EXAMPLE:
function SetHTML3(check,type) {
if(check==true) document.getElementById(type).style.display = “”;
else document.getElementById(type).style.display = “none”;
}
Anything can go here …like an image… or a link

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>


Make a Comment

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

Liked it here?
Why not try sites on the blogroll...

%d blogger menyukai ini: