Passing Server-side Data using Javascript

Let's say we have a list of items that we need to pass on to another page. This list is called an Array. This might be a list of selected groceries (eg apples, oranges, milk, bread) and we want to pass this list to a checkout page. One way we could have got this list is cycle through a grid and add selected items to the array. However we did it, we have a javascript array called groceries with a number of items in it, like this.

<script type="text/javascript">
// <![CDATA[
	var groceries = new Array(); 
	groceries[0] = "apples"; 
	groceries[1] = "oranges"; 
	groceries[2] = "milk"; 
	groceries[3] = "bread";
// ]]></script>

To pass this array on to a new page, we will use a hidden form then submit the form using the POST method. We could add it a comma separated list to the URL but this method is limited to a maximum of 2,083 characters which won't always be feasible). The form POST method submits the data without using the URL and without a length limit. A hidden form field is just a string of characters. So we'll get each item value in the array, append it to the previous item with a comma between them. This gives a "comma delimited" string of characters.

And since the data might also contain commas, we'll use JavaScript's escape() function to handle these. That way, they can't be confused with the separators.

<script type="text/javascript">
// <![CDATA[
	var groceries = new Array(); 
	groceries[0] = "apples"; 
	groceries[1] = "oranges"; 
	groceries[2] = "milk"; 
	groceries[3] = "bread";
// ]]>
</script>

<form action="OurNextPage.htm" method="POST" name="groceries">
	<input id="itemlist" type="hidden" name="itemlist" /> 
	<input onclick="sendData()" type="button" value="Deliver" />
</form>

<script type="text/javascript">
// <![CDATA[
function delivergroceries()
{
  // Initialize the variable or else it will be &#039;undefined&#039;
  var grocerylist = "";
  for (i = 0; (i < groceries.length); i++) {
  	if (i > 0) {
      		grocerylist+= ",";
	}
    	grocerylist+= escape(groceries[i]);
  }
  document.groceries.itemlist.value = packed;
  document.groceries.submit();
}
// ]]>
</script>

Now, on our destination page (OurNextPage.htm), we can create a script block that will decipher the item list and do something with each value. If you want to use it in javascript on this page too, I would suggest you take each item value and create another array in the same way did on the first page. We just need to loop through the form value for the itemlist field and split it at each comma. For each item, add it to the array. This can be in javascript but the most likely method is via a server-side script like PHP.

<!--?php 
$list= $_POST[&#039;groceries&#039;];
$groceries= split(",", $list);
for ($i = 0; ($i < count($groceries)); $i++) {     
	# Undo what JavaScript&#039;s escape() function did     
	$groceries[$i] = rawurldecode($groceries[$i]);     
	# Slashes need escaping when they appear in code     
	$groceries[$i] = str_replace("", "\", $groceries[$i]);     
	# Quotes need escaping too     
	$groceries[$i] = str_replace(""", """, $groceries[$i]);   
} ?-->
<script type="text/javascript">
// <![CDATA[
var data = new Array (
<?php
for ($i = 0; ($i < count($groceries)); $i++) {     
	if ($i > 0) {
		echo ",n";
	}
	echo "    "";
	echo $groceries[$i];
	echo """;
}
?>
);
// ]]></script>

And now we have another javascript array on the destination page called groceries to use however we like.

Til next time ...