单击即可添加2个动态字段

Adding 2 dynamic fields on a click

本文关键字：动态 字段 2个 添加 单击      更新时间：2023-09-26

我正在寻找一些如何添加2字段的帮助。这是我使用的示例。到目前为止，我可以添加文本区域，但当有人单击"添加问题"时，我也想包括下拉列表。

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

你能试试这个吗

$(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>
相关文章：