CODEWITHSUNDEEP
javascriptjquery
ReadyPlayer1
ReadyPlayer1

Reputation: 41

Appending an element based on choice from a dropdown

I am trying to create multiple fields based on a choice from a dropdown menu but when I choose from the options it only takes into account the first drop down menu, so if I create 3 fields with different values it will only take the first field 3 times

Here is the current function I'm using to work it

<button id="addInput">Add Another Field</button>

<div id="inputDiv">
    <p>
        <select id = "dropdown">
            <option value="null"></option>
            <option value="text">Text</option>
            <option value="note">Note</option>
        </select>
    </p>
</div>
<button id="submit">submit</button>
<div id="form"></div>

jQuery

$('#submit').live('click', function() {
  $("select").each(function() {
    if($('#dropdown').val() == "text"){
      $("#form").append('<input type="text"/>');
    }
    else if($('#dropdown').val() == "note"){
      $("#form").append('<textarea></textarea>');
    }
  });
});

And heres the fiddle I'm working on http://jsfiddle.net/me74Z/

Upvotes: 0

Views: 130

Answers (5)

fhall
fhall

Reputation: 21

You're not selecting the current element in the loop. Try this

$('#submit').live('click', function() {
    $("select").each(function() {
        if($(this).val() == "text"){
            $("#form").append('<input type="text"/>');
        }
        else if($(this).val() == "note"){
            $("#form").append('<textarea></textarea>');
        }
    });
});

By replacing '#dropdown' with this the loop checks the val of the current element instead of the first.

Upvotes: 1

Lucas Trzesniewski
Lucas Trzesniewski

Reputation: 51330

I've updated your fiddle in several ways:

  • use $(this).val() - that's the actual answer to your question
  • use a class for remInput - you shouldn't have multiple elements with the same id
  • use on instead of the deprecated live
  • use a switch for readability
  • use closest in the removal code, to make your code work if everything is wrapped in another <p>

http://jsfiddle.net/LucasTrz/me74Z/8/

$('#addInput').on('click', function() {
    $('#inputDiv').append('<p> <select> <option value="null"></option> <option value="text">Text</option> <option value="note">Note</option> </select> <button class="remInput">Remove</button> </p>');     
});

$(document).on('click', '.remInput', function() { 
    $(this).closest('p').remove();
});

$('#submit').on('click', function() {
    $("select").each(function() {
        switch($(this).val()) {
            case "text":
                $("#form").append('<input type="text"/>');
                break;
            case "note":
                $("#form").append('<textarea></textarea>');
                break;
        }
    });
});

Upvotes: 1

guramidev
guramidev

Reputation: 2238

You are using #dropdown, use $(this) instead.

Here is fiddle : http://jsfiddle.net/me74Z/6/

Code :

$('#submit').live('click', function() {
$("select").each(function() {
    if($(this).val() == "text"){
        $("#form").append('<input type="text"/>');
    }
    else if($(this).val() == "note"){
        $("#form").append('<textarea></textarea>');
    }

});
});

Upvotes: 1

Kevin Lynch
Kevin Lynch

Reputation: 24703

You just need to use this. This way it is checking each iteration of the element and check it's own value (this) accordingly.

DEMO http://jsfiddle.net/me74Z/4/

$('#submit').live('click', function() {
    $("select").each(function() {
        if($(this).val() == "text"){
            $("#form").append('<input type="text"/>');
        }
        if($(this).val() == "note"){
            $("#form").append('<textarea>hell</textarea>');
        }
    });
});

Upvotes: 0

j08691
j08691

Reputation: 207881

That's because you're only checking the value of #dropdown. Use this instead:

if ($(this).val() == "text") {
    $("#form").append('<input type="text"/>');
} else if ($(this).val() == "note") {
    $("#form").append('<textarea></textarea>');
}

jsFiddle example

Note: as others have mentioned, it's time to use .on() instead of .live() as it was removed in jq 1.9.

Upvotes: 0

Related Questions