ansaurus

Question

How to post the selections of an HTML List Box with multiple selected values

Answer 1

+1 A:

Below you find an example of a page.

Note that:

the select element (and any form element) needs a name to be included in the post.
only selected options in the select element will be posted.

What values are selected in the box by the user?

When the user submits the form only the selected values will be sent to the server. Depending on what language you are using at the server there are different ways to access them.

What are the options added to the box by the user?

As stated before you only see what options that was selected. But how do you distinguish between your options and the users options? That depends on what data you are sending the user. The universal answer is thats the value you get back that you didn't send. However this can be simplified depending on your data. Since the options have both a value and a text property, one way it to use a numeric value for your pregenerated values. That way your values will be numeric in the reply and the users values will be a text string. This approach assumes that your user will not enter just a numeric value. Another approach is to add a prefix to all user generated values (remember you have both a value and a text field for all options)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
  <head>
    <title>Test of select box</title>
    <script type="text/javascript">
      function addOpt(e) {
        var o=document.createElement("option");
        //o.value= -e.options.length;
        o.text = "Test " + e.options.length;
        o.selected=true;
        e.add(o,null);
      }
    </script>
  </head>
  <body>
    <form method="post" action="mypage.html">
      <input type="button" onclick="addOpt(this.form.myselect)" value="Add option"/>
      <br/>
      <select id="myselect" name="mydata" multiple="multiple" size="10">
        <option value="0">Test 0</option>
        <option value="1">Test 1</option>
        <option value="2">Test 2</option>
      </select>
      <br/>
      <input type="submit"/>
    </form>
  </body>
</html>

some 2008-12-19 02:56:52

can and probably should be done without javascript using []

aleemb 2009-02-15 01:10:50

@aleemb: How does adding [] answers "What are the options added to the box by the user" and "What values are selected in the box by the user"? If you actually look at the javascript above it only adds options to the select box, demonstrating that the text will be used as the value.

some 2009-02-15 04:43:40

Answer 2

+6 A:

By naming your select with trailing square brackets, PHP (and likely other server languages) will put the data in an array

ex:

<form action="process.php" method="post">
  <select name="multiSelects[]" multiple="multiple" size="5">
    <option value="0">Zero</option>
    <option value="1">One</option>
  </select>
  <input type="submit" />
</form>

The selections will be available in the array $_POST['multiSelects']

TenebrousX 2008-12-19 03:30:11

Coolest thing I've seen all day.

ChristianLinnell 2009-06-03 04:48:21

Answer 3

A:

Very nice....I helps me in my current project.

2009-07-26 07:08:19

ansaurus

tags:

views:

answers:

How to post the selections of an HTML List Box with multiple selected values

related questions