How to: Send data between PHP and JS

This is an example of how to send data from php to jquery. When the button to send the values to
javascript is clicked it will read the values from the php and dynamically recreate the same
questions from the php form. Try it here PHP/JQuery Example!

Create the PHP page to gather the information to send to the javascript:

We'll call this file MyPHPPage.php for example purposes.

<html xmlns = "http://www.w3.org/1999/xhtml"> 
	<head>
		<title>phpstuff</title>	
		<meta http-equiv="X-UA-Compatible" content="IE=9">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
		<script type="text/javascript" src="JavascriptSource.js" charset="utf-8"></script>
	</head>
	<body>		

		<?php
			//PROCESS THE FORM
			if($_SERVER['REQUEST_METHOD'] == 'POST') {
				print("\n\nDo something with this data.");
			//END OF FORM PROCESSING
			} else {
				//PRINT THE FORM
				$numQuestions = 2;	
				print('<div style="padding: 20px 40px 40px 40px; color:#232328; font-family:Verdana, Helvetica, Arial, sans-serif; font-size: 1.1em; width: 100%;">');
				print('This is an example of how to send data from php to jquery. When the button to send the values to</br>
						javascript is clicked it will read the values from the php and dynamically recreate the same</br>
						questions from the php form. ');			
				print('<form action="PHPPage.php" method="post">');	
					print("<input type=\"hidden\" id=\"numQuestions\" name=\"numQuestions\" value=$numQuestions />"); 					
					$iIndex = 0;
					$numOptions = 3;
					for($i=0;$i<$numQuestions;$i++) {
						print('<div>');
						$num = 0;				
						//add question
						$question = "Question ".($i+1);
						print('<p id="q"'.$i.'" style="padding-top:10px; padding-bottom:10px;"></br>'.$question.'</br>');
						
						//add options					
						for($j=0;$j<$numOptions;$j++) {
							$option = "Option ".($j+1);
							print("</br><label style=\"color:#232328; padding-left:50px;  padding-top:4px; padding-bottom:0px;\">
									<input style=\"vertical-align:top; margin-top: 5px;\" type=\"radio\" id=\"q".$i."o".$num."\" class=\"q".$i."\" name=\"response[$i][]\" value=$num /></label>");
							print("<span class=\"optionsSpan\"> $option</span>");						
							print("<input type=\"hidden\" id=\"l".$i."n".$num."\" value=\"".$option."\" />");														
							$num++;
						}	
						
						//info for tentative
						print("<input type=\"hidden\" id=\"question".$i."\" value=\"".$question."\" />");
						print("<input type=\"hidden\" id=\"numO".$i."\" value=$num />");
						print("<input type=\"hidden\" name=\"numOptions[]\" value=$num />");				
						print("</p>");

						//populate choosen array to send to js					
						print("</br><label style=\"color:#232328; padding-left:10px; padding-bottom:0px;\"> Send to JS: <input id=\"t".$i."\" class=\"review\" name=\"tentative[]\" type=\"checkbox\" value=\"".$i."\"></label>");
						print('</div>');
					}

					print('<span id="span_'.$numQuestions.'">');				
					print('<div>');
					print('<p id="comp">End of PHP Questions!</p>');
					print('</div>');
					print('</span>');
					
					print('<p><input type="button" value="Create Javascript Versions" onClick="addQuestions()" /></p>');			
					
					print('<div id="traversequestions"></div>');
						   
					print('<p><input id="submit" type="submit" value="Submit" /></p>');
					
				print('</form>');	
				print('</div');
			}	
		?>
	</body>
</html>

			


Create the javascript to receive the data:

We'll call the javascript file JavascriptSource.js for example purposes.

//variables
var tentativeArray;
var numTentative;

//dynamically create questions for tentative review
function addQuestions() {
	numQ = $('#numQuestions').val();

	//get values of boxes marked tentative
	tentativeArray = $('input:checkbox:checked.review').map(function () {
		return this.value;
	}).get();
	
	numTentative = tentativeArray.length;			

	$.each(tentativeArray, function(index, value) {
		var newDiv = document.createElement("div");
		newDiv.style.cssText = 'color:#232328; font-family:Verdana, Helvetica, Arial, sans-serif; font-size: 1.0em; width: 100%;';
		var qid = "#question"+value;
		var qtype = "#qType"+value;					
		var osize = "#numO"+value;
		var optionSize = $(osize).val();
		var questionText = $(qid).val();
		var questionType = $(qtype).val();

		//add the question
		newP = document.createElement("p");
		newP.style.cssText = 'padding-top:10px; padding-bottom:20px; margin: 0px;';
		var question = document.createTextNode(questionText);
		newP.appendChild(question); 					
		newDiv.appendChild(newP);	
		
		//add the options					
		for(var x=0;x
		

Now you can do whatever you want with the data!