Multiple Dynamically-Added Inputs in HTML Form

Question

I'm trying to add hidden input fields using JavaScript, but I did/have not achieved the desired result.

I want to add hidden fields to a form when a user selects a value from a dropdown list. The number of dropdown lists are not the same in this and other similar pages, there might be more or less than two.

I want to add a number of hidden fields when the user select value from the first dropdown list, and if he selects another value from another dropdown list I want to add additional hidden fields, and to save all the hidden fields' values.

Example:

<select id="s1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

If the user selects "2", I want to add 2 hidden fields:

<select id="s2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

If the user selects "3" in this second list I want to add three additional hidden fields but saving (preserving) the two hidden fields that was already dynamically added using the "s1" earlier.

better you can explain in your mother tongue itself. so atleast someone can understand frd. — Vinoth Babu
– Vinoth Babu, Commented Jan 31, 2013 at 10:20
I dont see what the point of doing this would be, what is your motivation? You could likely use the value of value="" in a for loop which dynamically adds the hidden fields. So when option value="3" is selected, 3 is passed to a function that adds the input fields. But again, what is the point in adding hidden fields? — lukeocom
– lukeocom, Commented Feb 1, 2013 at 5:07

Dukeland · Accepted Answer · 2013-01-31 10:27:26Z

1

Honestly, I have no idea what you are asking...but a quick fix could be using proper syntax for HTML.

i.e.

<select id"s2">

Change to

<select id="s2">

answered Jan 31, 2013 at 10:27

Dukeland

1464 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1218364 Over a year ago

not this is the problem, i wrote the code just for example, i want to save the hidden input that i add previous, and adding a new hidden input when i select a value from the second, like this thimbleopensource.com/tutorials-snippets/multi-ajax-input but with select value

Djave · Accepted Answer · 2013-01-31 10:52:42Z

0

jQuery has the very useful change() function. So you might write something like:

$(document).ready(function(){
    $("#s1").change(function(){
        var field_value = $(this).val();

        // then perhaps:
        for(i = 0; i < field_value; i++){

        }

        // or
        if(field_value == 2){
             // do something 
        }
    });
})

Hope thats of some use. Dukeland has a very good point above as well.

answered Jan 31, 2013 at 10:52

Djave

9,4298 gold badges79 silver badges137 bronze badges

Collectives™ on Stack Overflow

Multiple Dynamically-Added Inputs in HTML Form

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