Select from multiple HTML fields then add total to another list

Question

I have 3 HTML fields: a textbox and two select lists. What I'm trying to do is let the user enter something in the text field and choose options from the other two lists and then click an "Add" button which adds his total selection to another list. This final list is the one to be submitted and received by the CGI script.

So for example a user types in "Toyota" and selects Sedan from one list and 2004 from a second list and clicks add. Then, "Toyota Sedan 2004" would be added to an empty list. The user can add multiple selections to the list or remove from the list. And this list is the one that is submitted when the form is submitted. It is preferable if I do this in Javascript only so no JQuery. Can anyone point me in the right direction?

manji · Accepted Answer · 2012-10-13 07:45:02Z

What you need is, when the "add" button is clicked, a simple javascript function is called that retrieves: the text, selection1 & selection2 => build a new option with these information the append it to the result list.

Key javascript functions:

- document.getElementById
- document.createElement
- appendChild

In your html the form/submit button must be around your result list only.

Example (jsfiddle link):

<html>
    <head>
        <script>
            function add() {
                var txt = document.getElementById("txt").value;
                var sel1 = document.getElementById("sel1").value;
                var sel2 = document.getElementById("sel2").value;
                var result = txt + " " + sel1 + " " + sel2;

                var resultOption = document.createElement("option");
                resultOption.value = result;
                resultOption.text = result;
                document.getElementById("selResult").appendChild(resultOption);
            }
        </script>
    </head>
    <body>
        <input id="txt" type="text" />
        <select id="sel1">
            <option value="value11">value11</option>
            <option value="value12">value12</option>
            <option value="value13">value13</option>
        </select>
        <select id="sel2">
            <option value="value21">value21</option>
            <option value="value22">value22</option>
            <option value="value23">value23</option>
        </select>
        <input type="button" value="add" onClick="javascript:add()"/>
        <br/>
        result:
        <form action ="." method="post">
            <select id="selResult"></select>
            <input type="submit" value="submit"/>
        </form>
    </body>
</html>

RDK · Accepted Answer · 2012-10-13 07:24:30Z

0

Use need to user this jquery plugins:

And some jquery functions that can be useful for you:

answered Oct 13, 2012 at 7:24

RDK

4,5702 gold badges23 silver badges29 bronze badges

Collectives™ on Stack Overflow

Select from multiple HTML fields then add total to another list

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related