CODEWITHSUNDEEP
javascripthtml
user1218364
user1218364

Reputation: 153

Multiple Dynamically-Added Inputs in HTML Form

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.

Upvotes: 0

Views: 241

Answers (2)

Djave
Djave

Reputation: 9329

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.

Upvotes: 0

Dukeland
Dukeland

Reputation: 146

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">

Upvotes: 1

Related Questions