单击添加2个动态字段

时间:2014-11-06 18:37:21

标签: javascript jquery forms

我正在寻找一些帮助如何添加2个字段。这是我正在使用的例子。到目前为止,我可以添加textarea,但我想在有人点击时添加下拉列表"添加问题"。

$(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> 

1 个答案:

答案 0 :(得分:1)

你能试试吗

$(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>