JavaScript n PHP w/ Select Boxes

Question

Example is here.

I'm moving countries from one select box to another, when I submit the form I want the values in the right text box to be used by php. When I give the right box a name for a php array, like ToLB[] the Javascript fails. How can I handle this so that the submitted values will be used by php processes?

Answer 1

in forms it's a typical process to use an action and a method. This is declared within the form tag. For example

<form name='phpSend' method='post' action='myActions.php'>

Now when your form is submitted it is instantly 'posted' to the url myActions.php and is automatically declared as a $_POST array.

The names of the inputs become the array keys and the value becomes the value.

A basic method is to do a procedural action. Meaning if you leave the action attribute blank, the action will submit the form to the page you're already on and use if statements to check if the form has been submitted.

if(isset($_POST)&&isset($_POST['someName'])){
    //form submitted!
}

Now, I've never used a multiple select before so you may want to var_dumb() or print_r() your output to double check but my guess is it'll be an Array within the $_POST array.

Submitting with javascript

if(document.getElementByName('phpSend').submit){//or however your checking
    var selected=[];
    for(var e=0;e<document.getElementByTagName('select').options.length;e++){
        if(document.getElementByTagName('select').options[e].selected==true)selected[e]=document.getElementByTagName('select').options[e].value;
    }
//then add the selected array to your preferred method of sending your data to your php document
}

Answer 2

I have taken a look at your code. There are some missing parts and amendments to do to make it works. I didn't test the amendments but I think they should work.

1)you have to add the hidden field inside the form.

<form name="combo_box" action="test.php">
<input type="hidden" name="valuesToSubmit" value="">

2)Then you have to give the id to the select box because you use the id to reference the object like this var selectobject=document.getElementById("ToLB");

<select multiple size="10" name="ToLB" id="ToLB" style="width:150">

3)Change th submit button with a normal button so you can force the submit only when the loop is ended and the values have been passed into the hidden field.

<input type="button" name="submit" id="submit" value="Submit"  onClick="updateValues()">

4)Force the submit at the end of the javascript

function updateValues(){
    var selectobject=document.getElementById("ToLB");
    var myValues = "";
    for (var i=0; i<selectobject.length; i++){
    myValues = myValues  + selectobject.options[i].value + ",";
    }
    document.form.valuesToSubmit.value=myValues;
    document.combo_box.submit();
    }

Answer 3

I often encounter a situation like this and I usually submit the select options as a string. Add an hidden field to your form:

<input type="hidden" name="valuesToSubmit">

<script type="text/javascript">
var selectobject=document.getElementById("myselect");
var myValues = "";
for (var i=0; i<selectobject.length; i++){
myValues = myValues  + selectobject.options[i].value + ",";
}
document.form.valuesToSubmit.value=myValues;
</script>

In the PHP scripts that receive the posting data you can use the explode function to turn your sting into an array and then iterate on it ... depends what you need to do. Remember to remove the last unwanted ","