Adding 2 dynamic fields on a click

Question

I am looking for some help how to add 2 field. Here is my example of what I am using. So far I can add the textarea but I want to include the dropdown as well when someone clicks "add question".

$(document).ready(function() {
var max_fields      = 5; //maximum input boxes allowed
var wrapper         = $(".input_fields_wrap"); //Fields wrapper
var add_button      = $(".add_field_button"); //Add button ID

var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
    e.preventDefault();
    if(x < max_fields){ //max input box allowed
        x++; //text box increment
        $(wrapper).append('<div>' + '<label>Question:</label>' + '<textarea class="CommonTextfield" name="mytext[]" placeholder="Example: How valued do you feel at work?"/></textarea><a href="#" class="remove_field btn btn-danger pull-right">Remove question</a></div>'); //add input box
    }
});

$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
    e.preventDefault(); $(this).parent('div').remove(); x--;
})

});

<li class="PostalCode">
              <label for="project_name">Pulse Name</label>
              <?php bs_input_field("text", "project_name", "project_name", "Project Name");?>
             </li> 
             <li class="input_fields_wrap">
              <label for="project_description">Question:</label>
              <textarea class="CommonTextfield" id="project_description" rows="2" name="mytext[]" placeholder="Example: How valued do you feel at work?"></textarea>
             </li>
             <li class="PostalCode">
              <label for="project_type">Question Type:</label>
              <select id="project_type" name="mydrop[]" class="CommonTextfield">
                <option value="">Yes/No</option>
                <option value="">Radio</option>
                <option value="">Multiple Choice</option>
                <option value="">Dropdown</option>
                <option value="">Single line text</option>
                <option value="">Comment Box</option>
              </select> 
             </li>

You can create elements using $('<select>') or $('<option>') and then append them to your wrapper with $(wrapper).append(). — esswilly
– esswilly, Commented Nov 6, 2014 at 18:46

Marikkani Chelladurai · Accepted Answer · 2014-11-06 18:57:48Z

Can you try this

$(document).ready(function() {
        var max_fields      = 5; //maximum input boxes allowed
        var wrapper         = $("ul"); //Fields wrapper
        var add_button      = $(".add_field_button"); //Add button ID

        var x = 1; //initlal text box count
        $(add_button).click(function(e){ //on add input button click
            e.preventDefault();
            if(x < max_fields){ //max input box allowed
                x++; //text box increment
                $(wrapper).append('<div><label>Question:</label><li class="PostalCode"><label for="project_name">Pulse Name</label><?php bs_input_field("text", "project_name", "project_name", "Project Name");?></li><li class="input_fields_wrap"><label for="project_description">Question:</label><textarea class="CommonTextfield" id="project_description" rows="2" name="mytext[]" placeholder="Example: How valued do you feel at work?"></textarea></li><li class="PostalCode"><label for="project_type">Question Type:</label><select id="project_type" name="mydrop[]" class="CommonTextfield">                <option value="">Yes/No</option>                <option value="">Radio</option><option value="">Multiple Choice</option><option value="">Dropdown</option><option value="">Single line text</option><option value="">Comment Box</option></select></li> <a href="#" class="remove_field btn btn-danger pull-right">Remove question</a></div>');}
            });

            $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
            e.preventDefault(); $(this).parent('div').remove(); x--;
        });
    });


<ul>
    <li class="PostalCode">
        <label for="project_name">Pulse Name</label>
        <?php bs_input_field("text", "project_name", "project_name", "Project Name");?>
    </li> 
    <li class="input_fields_wrap">
        <label for="project_description">Question:</label>
        <textarea class="CommonTextfield" id="project_description" rows="2" name="mytext[]" placeholder="Example: How valued do you feel at work?"></textarea>
    </li>
    <li class="PostalCode">
        <label for="project_type">Question Type:</label>
        <select id="project_type" name="mydrop[]" class="CommonTextfield">
            <option value="">Yes/No</option>
            <option value="">Radio</option>
            <option value="">Multiple Choice</option>
            <option value="">Dropdown</option>
            <option value="">Single line text</option>
            <option value="">Comment Box</option>
        </select> 
    </li> 
</ul>

Collectives™ on Stack Overflow

Adding 2 dynamic fields on a click

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related