Geek Answers Handbook

How to Publish HTML List Collections with Multiple Selected Values

I have a list in HTML form with a submit button. There are several options in the list. I can select several values ​​from the list, but I do not know how to determine which values ​​were selected when submitting the form. In addition, I add user-generated values ​​to the list box dynamically using JavaScript, and I would like to say two things when the form submits:

  • What are the options the user added to the field?
  • What values ​​are selected by the user in the field?

Is it possible? Thanks.

+6
html html-select
source share
2 answers

Below you will find an example page.

Note that:

  • The select element (and any form element) requires a name that must be included in the message.
  • only the selected parameters will be published in the select element.

What values ​​are selected by the user in the field?

When a user submits a form, only the selected values ​​will be sent to the server. Depending on the language you use on the server, there are different ways to access them.

What are the options the user added to the field?

As stated above, you only see which options have been selected. But how do you distinguish your options and user options? It depends on what data you send to the user. The universal answer is that you returned that you did not send. However, this can be simplified depending on your data. Since parameters have both a value and a text property, one way to use a numeric value for your regenerated values ​​is. This way your values ​​will be numerical in the response, and the user values ​​will be a text string. This approach assumes that your user will not enter only a numeric value. Another approach is to add a prefix to all user values ​​(remember that you have both a value and a text box for all parameters)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <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>
+4
source share

Having named select with square square brackets, PHP (and probably other server languages) puts the data in an array

Example:

 <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 selection will be available in the $_POST['multiSelects'] array $_POST['multiSelects']

+36
source share

More articles:


All Articles