Question

我复制了jQuery，但我不知道如何管理它。我尝试了很多方法，尝试了几个代码。

var rowNum = 0;
function addRow(frm) {
    rowNum ++;
    var row = '<p id="rowNum' + rowNum + '"><?= form_input('Day#', '+frm.day_no.value+', 'placeholder="Day#"')?>
     <?= form_input('Day#', '+frm.description.value+', 'placeholder="Day#"')?> 
     <input type="button" value="Remove" onclick="removeRow('+rowNum+');">
     </p>';
    jQuery('#itemRows').append(row);
    frm.day_no.value = '';
    frm.description.value = '';
}

function removeRow(rnum) {
    jQuery('#rowNum'+rnum).remove();
}

<ul>
  <li>
    <label><?= form_input('Day#', '', 'placeholder="Day#"')?></label>
  </li>
  <li>
    <label><?= form_input('Description', '', 'placeholder="Description"')?></label>
  </li>
  <label>
    <input type="button" value="add field" name="add field"> 
  </label>
</ul>

我也试过这个：像这样我已经尝试了几个代码我已经检查了错误但是因为我是新的所以很难弄清楚它是怎么回事。

<div class="col-md-4 publish">
    <h4>Day Plan</h4>
    <div class="line"></div>
    <ul>
        <div class="items">
        <div class="form-group">
        <li><label><input id="day_no" class="form-control" name="day_no" 
         required="required" type="NUMBER" placeholder="Day #" /></li>
            <li><label><input id="description" class="form-control" 
            name="description" required="required" type="TEXTAREA" 
            placeholder="Description" /></label></li></div>
            <label><button type="button" class="add_field_button">Add 
            Field</button> </label>
        </div>

        <script 
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
        </script>
        <script>
            $(document).ready(function() {
                var max_fields = 20;
                var wrapper = $("#items");
                var add_button = $(".add_field_button");

                //var x = 2;
                $(add_button).click(function(e){
                    e.preventDefault();
                    if(x < max_fields){
                        x++;
                        $(wrapper).append(' <ul>
                            <div class="form-group">
                            '<li><label><input id="day_no" class="form-
                            control" name="day_no" required="required" 
                            type="NUMBER" placeholder="Day #" /></label>
                            </li>'
                            '<li><label><input id="description" 
                             class="form-control" name="description" 
                              required="required" type="TEXTAREA" 
                              placeholder="Description" /></label></li>' +
                              '<a href="#" class="remove_field"><i class="fa 
                              fa-times"></a></div></ul>'
                    );

                    }
                });

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

    </ul>

this is the form

Answer 1

我尝试了这个，它对我有用。

            <div class="input-group control-group after-add-more">


                <label><input type="text" name="dayplans[title][]" class="form-control" placeholder="DAY #"></label>
                <label><textarea name="dayplans[description][]" class="form-control" placeholder="Description" style="margin: 0px; width: 196px; height: 56px;"></textarea></label>
                <div class="input-group-btn">
                    <button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i> Add</button>
                </div>
            </div>

            <!-- Copy Fields-These are the fields which we get through jquery and then add after the above input,-->
            <div class="copy-fields" style="display: none">
                <div class="control-group input-group" style="">
                    <label><input type="text" name="dayplans[title][]" class="form-control" placeholder="DAY #"></label>
                    <label><textarea name="dayplans[description][]" class="form-control" placeholder="Description" style="margin: 0px; width: 196px; height: 56px;"></textarea></label>
                    <div class="input-group-btn">
                        <button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
                    </div>
                </div>
            </div>

    <script type="text/javascript">

        $(document).ready(function() {

            //here first get the contents of the div with name class copy-fields and add it to after "after-add-more" div class.
            $(".add-more").click(function(){
                var html = $(".copy-fields").html();
                $(".after-add-more").after(html);
            });
//here it will remove the current value of the remove button which has been pressed
            $("body").on("click",".remove",function(){
                $(this).parents(".control-group").remove();
            });

        });
</script>

如何在使用jQuery提交之前动态地向表单添加自定义字段

1 个答案: