DOM scripting problem

[tmyonline]

Hello, I have two lists; list A on the left and list B on the right.  List B is initially empty, list A has many options to choose from, i.e., allowing multiple selections.  When a user makes a selection or multiple selections from list A, s/he will click the right arrow ">>" button and the selected items will move to list B.  Likewise, if s/he wants to remove an item from list B, s/he will click the left arrow "<<" button and that item will move back to list A.

 

When a user clicks the submit button, I want all the items that appear on list B to be submitted.  However, I experienced that in order for the list B items to be submitted, they must also be highlighted (selected); this is not so desirable because the user already made her/his selection from list A, s/he does not need to highlight the list B items again in order for them to be submitted.  This is so due to the nature of the html <select> tag.  So, I'm thinking of a solution that, as soon as I click the submit button, JavaScript will use its DOM scripting method to insert the "select" attribute to the option tags, like this:

 

List B (after user selected items A, B, and C from list A by clicking the ">>" button):

 

<select id="dn" name="dn">

  <option value="A">A</option>

  <option value="B">B</option>

  <option value="C">C</option>

</select>

 

When user clicks the submit button, via onsubmit="insertAttributes()", I want to insert the "selected" attribute right before my PHP server code is submitted to the server, i.e., I want list B items to appear like this:

 

<select id="dn" name="dn[]">

  <option value="A" selected="selected">A</option>

  <option value="B" selected="selected">B</option>

  <option value="C" selected="selected">C</option>

</select>

 

This will guarantee that my PHP $_POST array will store the values A, B, C.  What is the DOM method to insert the selected attribute ?  I have tried:

 

var dn = document.getElementById("dn");

for (var i = 0; i < listB.length; i++) {

  dn.childNodes.setAttributes("selected", "selected");

}

 

Anyway, you have the idea.  What would be the correct DOM scripting for this ?  Thanks so much.

[tmyonline]

Hi guys, let me re-phrase my original posting on the DOM parsing issue for clarification.  Somehow I cannot edit my original post.  Thanks.

 

I have two lists; list A on the left and list B on the right. List B is initially empty, list A has many options to choose from, i.e., allowing multiple selections. When a user makes a selection or multiple selections from list A, he will click the right arrow ">>" button and the selected items will move to list B. Likewise, if he wants to remove an item from list B, he will click the left arrow "<<" button and that item will move back to list A.

 

Anyway, when a user clicks the submit button, all the items on list B need to be submitted. However, I experienced that in order for the list B items to be submitted, they must also be highlighted (selected); this is not so desirable because the user already made his selection from list A, he does not need to highlight the list B items again. So, I'm thinking of a solution that, as soon as I click the submit button, JavaScript will use its DOM parsing method to insert the "select" attribute to the option tags, like this:

 

List B (after user selected items A, B, and C from list A by clicking the ">>" button):

 

<select id="dn" name="dn[]">

<option value="A" selected="selected">A</option>

<option value="B" selected="selected">B</option>

<option value="C" selected="selected">C</option>

</select>

 

What would be your DOM method to insert the "selected" attribute ? Thanks so much for your help.

[emehrkay]

Well you'd need to set the select tag to have a multiple attribute multiple="multiple" to allow for multiple selects.

 

What you want to do is very possible -- it has been done many times before, I just cannot think of the name to find it in google.

 

HTML:

You'll need two lists [check]

two arrows (buttons or links) <- | ->

 

JS:

Click event listeners on the arrows \

A function that reads a list for its selected items, removes them from that list and appends them to the other list

 

Sounds like you need three functions, one for each button and the worker. It would look something like this

 

var left_to_right   = document.getElementById('left_to_right_link');
var right_to_left   = document.getElementById('right_to_left_link');
var left_list       = document.getElementById('left_list');
var right_list      = document.getElementById('right_list');

var worker = function(list){
    var other_list  = ''; //do something here to figure out the other list
    var list_items  = list.getElemetsByTagName('option');
    var selected    = []; //empty array
    
    for(var i = 0, len = list_items.length; i < len; i++){
        if(list_items[i].selected) selected.push(list_items[i]);
        //create new elements and remove them from this list
    }
};

left_to_right.onclick = function(){
    worker(left_list);

    return false; //stops the click event
};

[Psycho]

The function below will select all the options in a select list. Just run it onsubmit() of the form.

 

<html>
<head>
<script type="text/javascript">

function selectAll(selectID)
{
    selObj = document.getElementById(selectID);
    for(var i=0; i<selObj.options.length; i++)
    {
        selObj.options[i].selected = true;
    }
}

</script>
</head>

<body>
<select name="test" id="test" multiple="multiple" size="8">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<br />
<button onclick="selectAll('test');">Select All</button>

</body>
</html>

[tmyonline]

Hi mjdamato,

 

Thanks for your suggestion but I have tried something like that before.  The issue with this code is that it can certainly do a select all but all the selected items are still on the client side, not on the server side.  Suppose you have an input field like this:

 

<input type="text" name="name" />

 

When a user clicks the submit button, in PHP, the name value will be stored in the $_POST array, i.e., the name value has been transferred from the client side to the server side so that I can do (in PHP):

 

if (isset($_POST['name']) && $_POST['name'] != '') {

  echo $_POST['name'];

}

 

I'm seeking a similar solution for multiple selections so that when I do (in PHP)

 

foreach ($_POST['dn'] as $dn) {

  echo $dn;

}

 

It will display all the selected items for me.

 

In this regard, I have been thinking of a solution using DOM so that onsubmit will trigger JavaScript to insert the "selected" attribute to every selected item.  This way, the submission will actually transfer all the selected items to the server and the $_POST of each of them will hold the selected value.  Your JavaScript code suggestion is fine but I will have to use Ajax to transfer the selected items to the server.  However, there will be a trade off for me to do this.  Thanks so much guys and hope to hear from you all again.

 

[Psycho]

The solution I provided will do what you are asking. Run the function onsubmit() of the form for Select List B and all of the values in that list will be selected (before the form is submited) and be made part of the POST data.

 

Either you are not understanding the solution or your explanation of what you want is not clear. In the example I posted above, if that function was run onsubmit() of the form, then every time that form is submitted, the variable $_POST['test'] will always be an array of the values (1,2,3,4,5) no matter if the user selected any options in that list or not.

[Psycho]

Here's a working example. No matter what the user does, all the items in the select list are inluded in the post data:

 

<?php

if (isset($_POST['test']))
{
    $response  = "The following values were submitted:";
    $response .= "<ul>\n";
foreach ($_POST['test'] as $value)
    {
        $response .= "<li>$value</li>\n";
    }
    $response .= "</ul>\n";
}

?>
<html>
<head>
<script type="text/javascript">

function selectAll(selectID)
{
    selObj = document.getElementById(selectID);
    for(var i=0; i<selObj.options.length; i++)
    {
        selObj.options[i].selected = true;
    }
    return true;
}

</script>
</head>

<body>
<?php echo $response; ?>
<form method="POST" onsubmit="return selectAll('test');">
<select name="test[]" id="test" multiple="multiple" size="8">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<br />
<button type="submit">Submit</button>
</form>

</body>
</html>

[tmyonline]

Hi mjdamato,

 

Yes, your original code works great.  I just tested it.  Somehow, I miss-read the line

 

selObj.options.selected = true;

 

which really inserted the "selected" attributes to the option tags.  I was trying the setAttribute() function:

 

selObj.options.setAttribute("selected", "selected");

 

but it did not work.

 

Thanks a lot again.

 

Thank you emehrkay a lot too.

[Psycho]

Probably needed to set it to true:

 

selObj.options.setAttribute("selected", true);

 

Please mark topic as solved.