Submit form after selecting items from multiple dropdown lists - JavaScript

Question

Here is my HTML

<form action="processForm.html" method="post">
    <label for="InputOne">Input One</label>
    <select id="InputOne">
        <option val="1">Item</option>
        <option val="2">Item</option>
        <option val="3">Item</option>
        <option val="4">Item</option>
    </select>

    <label for="InputTwo">Input Two</label>
    <select id="InputTwo">
        <option val="1">Item</option>
        <option val="2">Item</option>
        <option val="3">Item</option>
        <option val="4">Item</option>
    </select>

    <input type="submit" value="Submit">
</form>

How do I enable the user to select from multiple dropdown lists and then hit a Submit button? I found this answer How to submit form on change of dropdown list?. It's close, but I don't think it's what I want. This will submit after a single dropdown list.

Sorry for being unclear. I want to have multiple select elements. — KSHMR, Jul 02 '14 at 13:06
Do you mean that you want to trigger the submission of the form after multiple ` — Terry, Jul 02 '14 at 13:06
I want the submission to trigger upon clicking a Submit button. — KSHMR, Jul 02 '14 at 13:07
@Gudmundur First, wrap everything you want to submit in a `
` element. Declare the appropriate form action and method as needed. The `` will submit the form automatically — that's part of the charm of HTML. — Terry, Jul 02 '14 at 13:08
@jedema that was omitted for your convenience. Imagine a form around my code — KSHMR, Jul 02 '14 at 13:08
@Terry But does it submit the list if it isn't inside an input tag? — KSHMR, Jul 02 '14 at 13:09
@Gudmundur So, what is your question again? If it is wrapped in the form element, the form should submit just fine. You need to elabourate on what kind of behavior you expect, or at least what went wrong. — Terry, Jul 02 '14 at 13:10
Oooh, I see. In that case, I have no problem at all. Sorry for wasting everybody's time on this — KSHMR, Jul 02 '14 at 13:11
@Gudmundur Do you need to collect the selected values on the client or on the server side? This is pure server side. — hex494D49, Jul 02 '14 at 13:18

score 2 · Accepted Answer · edited May 23 '17 at 12:22

The short answer

<form id="my-form" method="post">

    <select name="first-list" multiple="multiple" size="10">
        <option value="0"></option>
        <option value="1">first</option>
        <option value="2">second</option>
        <option value="3">third</option>
    </select>

    <select name="second-list" multiple="multiple" size="10">
        <option value="0"></option>
        <option value="1">first</option>
        <option value="2">second</option>
        <option value="3">third</option>
    </select>

    <!-- use this for client-side processing -->
    <input type="button" name="button" value="submit" />

    <!-- use this for server-side processing -->
    <input type="submit" name="submit" value="submit" />

</form>

EDIT

//  
// Collecting selected items from one or more multiple select-lists 
//
window.onload = function(){
    document.getElementById("button").onclick = function(){
    var lists = document.getElementsByTagName('SELECT'), chosen = [], temp = [], list = {}, i, j; 
    for(i = 0; i < lists.length; i++) {
        list = lists[i];
        temp = [];
        for(j = 0; j < list.length; j++) {
          if(list[j].selected) temp.push(list[j].value);  
        }
        chosen.push(temp);
    }
    console.log(JSON.stringify(chosen));
    // you will have JSON like this [["1","4","5"],["6","7"]]
};

Now, you have a JSON object ready to send on your server. If you have any doubts how to do it, check my previous answer on topic how to send and receive JSON data with JavaScript using POST and GET method.

And check the working fiddle.

OP mentioned that he wanted multiple ` – Terry Jul 02 '14 at 13:09 — Terry, Jul 02 '14 at 13:09
Read the question again :) – hex494D49 Jul 02 '14 at 13:12 — hex494D49, Jul 02 '14 at 13:12

score 0 · Answer 2 · answered Jul 14 '16 at 05:54

0

If I understand correctly. You're having trouble submitting the data from both select dropdown.

I was facing the same problem, but adding enctype='multipart/form-data' to the form class solved it

answered Jul 14 '16 at 05:54

ygongdev

264
3
19

Submit form after selecting items from multiple dropdown lists - JavaScript

2 Answers2

Linked