[help] multidimensional array to submit form data

**Dr.Goodvibes** · 04-26-2012 11:37 PM

I'm attempting to take the values from a HTML form and use JavaScript to create a multidimensional array with only selected values and then return this array as part of the returned POST values to a PHP script where it will be read out from the array into discrete records for updating.

I don't 'need' JavaScript to do this as HTML can parse multidimensional arrays and return the values that have been selected.

The reason I'm using JavaScript is that by reading the checkbox values which have been 'ticked' I can build an array with only the 'records' (each row) that will require to be edit/updated.
Using HTML/POST only, without JavaScript, the values of ALL input fields are returned and this is a waste of header space when may only one to two records out of tens will be updated on a given submit.

I have it all working...sort of... the problem I have is building the multidimensional array in JavaScript and then passing that as a multidimensional array to the HTML input value for POST to PHP.

My array does pass the values back to PHP in the POST data, however it's only in a one dimensional array as seen by PHP print_r().

I know JavaScript doesn't really support multidimensional arrays, but thought one could just add an array to an array and thus build a multidimensional array.

This is the area I'm struggling with.

Any help would be VERY much appreciated.

I have included a small test script to show what I'm attempting to do. Sorry, it's not flash and more than likely logically flaw, but hope we can look past that to provide some direction or possible answers.

My output as seen in PHP is as follows. This is when the cat and car records are selected.

Array ( [0] => Array ( [0] => 3,cat,whiskers,4,car,batmobile ) )

I would like to see something more like:

Array ( [0] => Array ( [0] => 3,cat,whiskers [1] => 4,car,batmobile ) )

HTML Code:

<html>
<head>
<title>This is a Form test</title>

<script type="text/javascript">

function buildInput(){
 
 var fm1 = document.getElementById("fm1");
 var ticked = fm1.editRec;
 
 var invRec = document.getElementById("inp1");
 invRec.name = "invRec[][]";
 invRec.value = new Array();
 
 var invSel = new Array();

 var i = 0;

 for ( j=0; j < ticked.length; j++ ){
  if ( ticked[j].checked === true ){	
	
    var invVal = new Array(3);	
 
    invVal[0] = ticked[j].value;
    invVal[1] = fm1.inv1[j].value;
    invVal[2] = fm1.inv2[j].value;
		
    invSel[i++] = invVal;
	
  }    
 
  invRec.value = invSel;
 }

}

</script>
  
</head>
<body>

  <form id="fm1" method="post" name="form33" accept-charset="utf-8" enctype="multipart/form-data" action="/formTest.html" >
    <fieldset>

  	  <input id="inp1" type="hidden" name="invRec[][]" />

      <table id="tab1">
	   <tr>
	     <td><input title="Update" type="checkbox" name="editRec" value="1"/></td>
	     <td><input type="text" name="inv1" value="sky" /></td>
	     <td><input type="text" name="inv2" value="cloud" /></td>
	   </tr>
	   	   <tr>
	     <td><input title="Update" type="checkbox" name="editRec" value="2"/></td>
	     <td><input type="text" name="inv1" value="rabbit" /></td>
	     <td><input type="text" name="inv2" value="bunny" /></td>
	   </tr>
	   	   <tr>
	     <td><input title="Update" type="checkbox" name="editRec" value="3"/></td>
	     <td><input type="text" name="inv1" value="cat" /></td>
	     <td><input type="text" name="inv2" value="whiskers" /></td>
	   </tr>
	   	   <tr>
	     <td><input title="Update" type="checkbox" name="editRec" value="4"/></td>
	     <td><input type="text" name="inv1" value="car" /></td>
	     <td><input type="text" name="inv2" value="batmobile" /></td>
	   </tr>
      </table>

	  <button onclick="buildInput()">Submit</button>
	  
	</fieldset>
  </form>

  <p>Javascript record: <?php print_r($_POST["invRec"]);?></p>

</body>
</html>

**slaughters** · 04-27-2012 06:11 AM

A simpler way to create a multi dimensional array is like this:

var myArray = new Array(new Array(new Array())));

myArray[1][2][3] = “the 3rd dimension”;

**Dr.Goodvibes** · 04-27-2012 07:08 AM

Thank you slaughters.

I'm wondering if I have understood the inter-play of HTML text type Input and their values and the assignment of an array to that value/name.

I'm almost thinking the name attribute in the HTML input element is the array and that the value attribute is only the mechanism for assigning a value to the array.

It's as if the array assigned to the value attribute is being serialized and that I should be assigning the array to the HTML name attribute instead.

Just thinking out loud, I've never done this before and I'm not sure of the process. More testing I guess.

**Dr.Goodvibes** · 04-27-2012 09:41 AM

Ah, note to self. Thank you.

Think I've worked out how to get the return value from JavaScript.

I got fixated with the array and forgot the DOM.

HTML input element arrays are just additional creations of input elements within the DOM, be that indexed or associative.

The following is a small crude working example of what I was attempting to do.

Now getting the array structure I was after:

Javascript record: Array ( [2] => Array ( [0] => rabbit [1] => bunny ) [3] => Array ( [0] => cat [1] => whiskers ) )

Obviously, if someone can see a much better way of doing this please lettuce know. Cloning the input element and etc...

HTML Code:

<html>
<head>
<title>This is a Form test</title>

<script type="text/javascript">

function buildInput(){
 
 var fm1 = document.getElementById("fm1");
 var ticked = fm1.editRec;
 
 var i = 0;

 for ( j=0; j < ticked.length; j++ ){
 
   if ( ticked[j].checked === true ){	
			
    var oIn = document.createElement("input");
    oIn.type = "hidden";
    oIn.name = "invRec[" + ticked[j].value + "][0]";
    oIn.value =  fm1.inv1[j].value;
	
    fm1.appendChild(oIn);
	
    var oIn = document.createElement("input");
    oIn.type = "hidden";
    oIn.name = "invRec[" + ticked[j].value + "][1]";
    oIn.value =  fm1.inv2[j].value;	

    fm1.appendChild(oIn);	
	
    i++;	
	
  }   
  
 }
 
}

</script>
  
</head>
<body>

  <form id="fm1" method="post" name="form1" accept-charset="utf-8" enctype="multipart/form-data" action="/formTest.html" >
    <fieldset>

      <table id="tab1">
	   <tr>
	     <td><input title="Update" type="checkbox" name="editRec" value="1" title="DB or record index "/></td>
	     <td><input type="text" name="inv1" value="sky" /></td>
	     <td><input type="text" name="inv2" value="cloud" /></td>
	   </tr>
	     <tr>
	     <td><input title="Update" type="checkbox" name="editRec" value="2" title="DB or record index "/></td>
	     <td><input type="text" name="inv1" value="rabbit" /></td>
	     <td><input type="text" name="inv2" value="bunny" /></td>
	   </tr>
	     <tr>
	     <td><input title="Update" type="checkbox" name="editRec" value="3" title="DB or record index "/></td>
	     <td><input type="text" name="inv1" value="cat" /></td>
	     <td><input type="text" name="inv2" value="whiskers" /></td>
	   </tr>
	   <tr>
	     <td><input title="Update" type="checkbox" name="editRec" value="4" title="DB or record index " /></td>
	     <td><input type="text" name="inv1" value="car" /></td>
	     <td><input type="text" name="inv2" value="batmobile" /></td>
	   </tr>
      </table>

	  <button onclick="buildInput()">Submit</button>
	  
	</fieldset>
  </form>

<?php

  $invRec = $_POST["invRec"];
    
  while( list( $key, $val ) = each( $invRec ) ) {

    echo '<p>Key: '.$key. ' A1: '.$val[0]. ' A2: '.$val[1].'</p>';  
    
  }
  
?> 
 
  <p> JavaScript generated array: <?php print_r($_POST["invRec"]); ?> </p>
  
</body>
</html>

Thread: [help] multidimensional array to submit form data

Thread Tools

Display

[help] multidimensional array to submit form data

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions