[RESOLVED] Form values not posting

Kudose

Hello all ... this has me stumped.

I have the code below which works fine, but it does not post the select boxes. Anyone have any idea why the select boxes would not show in the $_POST array?

<html> 
<head> 
<script type="text/javascript"> 
<!-- Original :  Phil Webb (phil@philwebb.com) --> 
<!-- Web Site :  http : //www.philwebb.com --> 

<!-- Begin 
function move(fbox, tbox) { 
var arrFbox = new Array (); 
var arrTbox = new Array (); 
var arrLookup = new Array (); 
var i; 
for (i = 0; i <tbox.options.length; i ++ ) { 
arrLookup[tbox.options[i].text] = tbox.options[i].value; 
arrTbox[i] = tbox.options[i].text; 
} 
var fLength = 0; 
var tLength = arrTbox.length; 
for (i = 0; i <fbox.options.length; i ++ ) { 
arrLookup[fbox.options[i].text] = fbox.options[i].value; 
if (fbox.options[i].selected && fbox.options[i].value != "" ) { 
arrTbox[tLength] = fbox.options[i].text; 
tLength ++ ; 
} 
else { 
arrFbox[fLength] = fbox.options[i].text; 
fLength ++ ; 
   } 
} 
arrFbox.sort(); 
arrTbox.sort(); 
fbox.length = 0; 
tbox.length = 0; 
var c; 
for (c = 0; c <arrFbox.length; c ++ ) { 
var no = new Option(); 
no.value = arrLookup[arrFbox[c]]; 
no.text = arrFbox[c]; 
fbox[c] = no; 
} 
for (c = 0; c <arrTbox.length; c ++ ) { 
var no = new Option(); 
no.value = arrLookup[arrTbox[c]]; 
no.text = arrTbox[c]; 
tbox[c] = no; 
   } 
} 
//  End --> 
</script> 

</head> 

<body> 
<?php
  if(isset($_POST)) { echo '<pre>';print_r($_POST);echo '</pre>'; }
?>
<center><BR><BR><BR> 
<form name = "combo_box" method="post"> 
<table><tr><td> 
<select multiple size = "10" name = "list1" style = "width:150"> 
<option value = "12"> Alabama </option> 

<option value = "54"> Alaska </option> 
<option value = "65"> Arizona </option> 
<option value = "45"> Arkansas </option> 
<option value = "2"> California </option> 
<option value = "6"> Colorado </option> 
<option value = "81"> Connecticut </option> 
<option value = "5"> Delaware </option> 
<option value = "23"> District of Columbia </option> 
<option value = "58"> Florida </option> 

<option value = "87"> Georgia </option> 
<option value = "98"> Hawaii </option> 
<option value = "53"> Idaho </option> 
<option value = "22"> Illinois </option> 
<option value = "28"> Indiana </option> 
<option value = "89"> Iowa </option> 
<option value = "71"> Kansas </option> 
<option value = "35"> Kentucky </option> 
<option value = "85"> Louisiana </option> 

<option value = "9"> Maine </option> 
<option value = "7"> Maryland </option> 
<option value = "77"> Massachusetts </option> 
<option value = "36"> Michigan </option> 
<option value = "87"> Minnesota </option> 
<option value = "66"> Mississippi </option> 
<option value = "34"> Missouri </option> 
<option value = "50"> Montana </option> 
<option value = "20"> Nebraska </option> 

<option value = "25"> Nevada </option> 
<option value = "32"> New Hampshire </option> 
<option value = "27"> New Jersey </option> 
<option value = "74"> New Mexico </option> 
<option value = "17"> New York </option> 
<option value = "3"> North Carolina </option> 
<option value = "13"> North Dakota </option> 
<option value = "4"> Ohio </option> 
<option value = "21"> Oklahoma </option> 

<option value = "12"> Oregon </option> 
<option value = "48"> Pennsylvania </option> 
<option value = "63"> Rhode Island </option> 
<option value = "82"> South Carolina </option> 
<option value = "14"> South Dakota </option> 
<option value = "72"> Tennessee </option> 
<option value = "49"> Texas </option> 
<option value = "47"> Utah </option> 
<option value = "92"> Vermont </option> 

<option value = "59"> Virginia </option> 
<option value = "52"> Washington </option> 
<option value = "41"> West Virginia </option> 
<option value = "46"> Wisconsin </option> 
<option value = "95"> Wyoming </option> 
</select> 
</td> 
<td align = "center" valign = "middle"> 
<input type = "button" onClick = "move(this.form.list2,this.form.list1)" value = "<<"> 
<input type = "button" onClick = "move(this.form.list1,this.form.list2)" value = ">>"> 
</td> 
<td> 

<select multiple size = "10" name = "list2" style = "width:150"> 
</select><br /><br /><input type="submit" name="submit_form" value="submit" />
</td></tr></table> 
</form> 

</center> 
</BODY> 
</html>

TIA!

paulnaj

Hi Kudose,

Just tested your code and it does work, but not as one might expect.

Only items that are actually selected (highlighted in the box, not just visible in the box) will be $_POSTED.

BTW As it stands, only one item would be sent even if more than item is selected. I think you would need to make the names of the SELECT boxes name="list1[]" and name="list2[]" to get arrays of items sent.

And then the button onclicks would need changing as well ...

onClick = "move(this.form['list2[]'],this.form['list1[]'])"
onClick = "move(this.form['list1[]'],this.form['list2[]'])"

Hope that helps!

Kudose

Thanks for that info. I was aware of the [] part, but omitted it. 🙂

So how would you propose getting the values?

Think I need to change the form submit to a button and use JS to get the values and post the form?

paulnaj

Hi again,

I think I'd probably have a hidden field that stored all of the state ids from list2, and update that field every time list2 got updated.

Kudose

Good call. I'll post back updated code for everyone once I get it working.

Thanks mate.

Kudose

All I needed to do was create a hidden field, create a new JS array to store the list2 data and update the hidden field when list2 updates. On post, _POST[realList] is exploded by comma and voilá.

<html> 
<head> 
<script type="text/javascript"> 
  <!-- Original :  Phil Webb (phil@philwebb.com) --> 
  <!-- Web Site :  http : //www.philwebb.com --> 
  <!-- Updated By: Travis Crowder (Kudose @ phpBuilder) --> 
  <!-- Web Site :  http : //www.spechal.com --> 

  <!-- Begin 
  function move(fbox, tbox) { 
    var arrFbox = new Array (); 
    var arrTbox = new Array (); 
    var arrLookup = new Array (); 
    var realList = document.getElementById("realList");
    var arrRlist = new Array();
    var i; 
    for (i = 0; i <tbox.options.length; i ++ ) { 
      arrLookup[tbox.options[i].text] = tbox.options[i].value; 
      arrTbox[i] = tbox.options[i].text; 
    } 
    var fLength = 0; 
    var tLength = arrTbox.length; 
    for (i = 0; i <fbox.options.length; i ++ ) { 
      arrLookup[fbox.options[i].text] = fbox.options[i].value; 
      if (fbox.options[i].selected && fbox.options[i].value != "" ) { 
        arrTbox[tLength] = fbox.options[i].text; 
        tLength ++ ; 
      } else { 
        arrFbox[fLength] = fbox.options[i].text; 
        fLength ++ ; 
        } 
    } 
    arrFbox.sort(); 
    arrTbox.sort(); 
    fbox.length = 0; 
    tbox.length = 0; 
    var c; 
    for (c = 0; c <arrFbox.length; c ++ ) { 
      var no = new Option(); 
      no.value = arrLookup[arrFbox[c]]; 
      no.text = arrFbox[c]; 
      fbox[c] = no; 
    } 
    for (c = 0; c <arrTbox.length; c ++ ) { 
      var no = new Option(); 
      no.value = arrLookup[arrTbox[c]]; 
      no.text = arrTbox[c]; 
      tbox[c] = no; 
      arrRlist[c] = no.value;
    } 
    realList.value = arrRlist;
  } 
  //  End --> 
</script> 

</head> 

<body> 
<?php
  if(isset($_POST['realList'])) { echo '<pre>';print_r(explode(",", $_POST['realList']));echo '</pre>'; }
?>
<center><BR><BR><BR> 
<form name = "combo_box" method="post"> 
<table><tr><td> 
<select multiple size = "10" name = "list1" style = "width:150"> 
<option value = "12"> Alabama </option> 

<option value = "54"> Alaska </option> 
<option value = "65"> Arizona </option> 
<option value = "45"> Arkansas </option> 
<option value = "2"> California </option> 
<option value = "6"> Colorado </option> 
<option value = "81"> Connecticut </option> 
<option value = "5"> Delaware </option> 
<option value = "23"> District of Columbia </option> 
<option value = "58"> Florida </option> 

<option value = "87"> Georgia </option> 
<option value = "98"> Hawaii </option> 
<option value = "53"> Idaho </option> 
<option value = "22"> Illinois </option> 
<option value = "28"> Indiana </option> 
<option value = "89"> Iowa </option> 
<option value = "71"> Kansas </option> 
<option value = "35"> Kentucky </option> 
<option value = "85"> Louisiana </option> 

<option value = "9"> Maine </option> 
<option value = "7"> Maryland </option> 
<option value = "77"> Massachusetts </option> 
<option value = "36"> Michigan </option> 
<option value = "87"> Minnesota </option> 
<option value = "66"> Mississippi </option> 
<option value = "34"> Missouri </option> 
<option value = "50"> Montana </option> 
<option value = "20"> Nebraska </option> 

<option value = "25"> Nevada </option> 
<option value = "32"> New Hampshire </option> 
<option value = "27"> New Jersey </option> 
<option value = "74"> New Mexico </option> 
<option value = "17"> New York </option> 
<option value = "3"> North Carolina </option> 
<option value = "13"> North Dakota </option> 
<option value = "4"> Ohio </option> 
<option value = "21"> Oklahoma </option> 

<option value = "12"> Oregon </option> 
<option value = "48"> Pennsylvania </option> 
<option value = "63"> Rhode Island </option> 
<option value = "82"> South Carolina </option> 
<option value = "14"> South Dakota </option> 
<option value = "72"> Tennessee </option> 
<option value = "49"> Texas </option> 
<option value = "47"> Utah </option> 
<option value = "92"> Vermont </option> 

<option value = "59"> Virginia </option> 
<option value = "52"> Washington </option> 
<option value = "41"> West Virginia </option> 
<option value = "46"> Wisconsin </option> 
<option value = "95"> Wyoming </option> 
</select> 
</td> 
<td align = "center" valign = "middle"> 
<input type = "button" onClick = "move(this.form.list2,this.form.list1)" value = "<<"> 
<input type = "button" onClick = "move(this.form.list1,this.form.list2)" value = ">>"> 
</td> 
<td> 

<select multiple size = "10" name = "list2" style = "width:150"> 
</select><br /><br /><input type="hidden" name="realList" id="realList" value="" /><input type="submit" name="submit_form" value="submit" />
</td></tr></table> 
</form> 

</center> 
</BODY> 
</html>