Question

这是我每次用户点击添加更多按钮时用于创建两个新输入字段的Jquery代码

  var i=1;
                    $('#addMoreHighlights').on('click',function(event){
                        //prevent default action
                        event.preventDefault();
                        var clone = '<div data-count="'+i+'" ><br/><hr/><div class="form-group" ><label>Trip-Highlight Title:</label><input type="text" value="" name="trip_highlightTitle[]" class="form-control clearHiglights" id="" placeholder="Enter Trip Highlight\'s Title"></div><div class="form-group"><label>Trip-Highlight Image</label><div class="input-group"><input class="form-control clearHiglights" placeholder="Upload Image For The Highlight" name="trip_highlightImage[]" value="" type="text" id="trip_highlightImage"><span class="input-group-addon" style="background: #3C8DBC"> <a style="cursor: pointer;"  onclick="BrowseServer("trip_highlightImage");" ><span style="color: #FFF;">Select Image</span></a></span></div></div><button style="float: right; margin: 5px;" data-removeCount="'+i+'"class="removeMoreHighlights btn">Remove</button></div>';

                        $('#tripHighlights').append(clone);
                        i++;
                    });

这个新创建的元素附加到已经存在的表单元素。这是我已经存在的输入字段（html）

<div id="tripHighlights">

                        <div class="form-group" >
                            <label>Trip-Highlight Title:</label>
                            <input type="text" value="" name="trip_highlightTitle[]" class="form-control clearHiglights" id="" placeholder="Enter Trip Highlight's Title">
                        </div>
                        <div class="form-group">
                            <label>Trip-Highlight Image</label>
                            <div class="input-group">
                                <input class="form-control clearHiglights" placeholder="Upload Image For The Highlight" name="trip_highlightImage[]" value="" type="text" id="trip_highlightImage">
                                <span class="input-group-addon" style="background: #3C8DBC">
                                    <a style="cursor: pointer;"  onclick="BrowseServer('trip_highlightImage');" >
                                        <span style="color: #FFF;">Select Image</span>
                                    </a>
                                </span>
                            </div>
                        </div>

                    </div>
                    <button id="addMoreHighlights" class="btn">Add-More</button>

所有这些都存在于标记中但仍然在帖子中我只从最初在DOM中生成的字段获取输入，而不是从使用jquery生成的字段中获取

这是我的帖子结果：

'trip_highlightTitle' => 
    array (size=1)
      0 => string 'title 1' (length=7)
  'trip_highlightImage' => 
    array (size=1)
      0 => string 'image1' (length=6)

我期望的实际结果是：

'trip_highlightTitle' => 
    array (size=1)
      0 => string 'title 1' (length=7)
      1 => string 'title 2'  (length=7)
  'trip_highlightImage' => 
    array (size=1)
      0 => string 'image1' (length=6)
      1 => string 'image2'  (length=6)

Answer 1

好吧，我用你的代码创建了一个例子，我可以看到动态添加的字段也是表单提交的一部分。看看这有帮助！

＆＃13;

$(document).ready(function(){
		var i=1;
                    $('#addMoreHighlights').on('click',function(event){
                        //prevent default action
                        event.preventDefault();
                         var clone = '<div data-count="'+i+'" ><br/><hr/><div class="form-group" ><label>Trip-Highlight Title:</label><input type="text" value="" name="trip_highlightTitle[]" class="form-control clearHiglights" id="" placeholder="Enter Trip Highlight\'s Title"></div><div class="form-group"><label>Trip-Highlight Image</label><div class="input-group"><input class="form-control clearHiglights" placeholder="Upload Image For The Highlight" name="trip_highlightImage[]" value="" type="text" id="trip_highlightImage"><span class="input-group-addon" style="background: #3C8DBC"> <a style="cursor: pointer;"  onclick="BrowseServer("trip_highlightImage");" ><span style="color: #FFF;">Select Image</span></a></span></div></div><button style="float: right; margin: 5px;" data-removeCount="'+i+'"class="removeMoreHighlights btn">Remove</button></div>';

                        $('#tripHighlights').append(clone);
                        i++;
                    });
					$( "form" ).on( "submit", function( event ) {
  event.preventDefault();
  console.log( $( this ).serialize() );
});
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="test" id="test" action="test" method="post">
   <div id="tripHighlights">

                        <div class="form-group" >
                            <label>Trip-Highlight Title:</label>
                            <input type="text" value="" name="trip_highlightTitle[]" class="form-control clearHiglights" id="test1" placeholder="Enter Trip Highlight's Title">
                        </div>
                        <div class="form-group">
                            <label>Trip-Highlight Image</label>
                            <div class="input-group">
                                <input class="form-control clearHiglights" placeholder="Upload Image For The Highlight" name="trip_highlightImage[]" value="" type="text" id="test2">
                               
                            </div>
                        </div>

                    </div>
                    <button id="addMoreHighlights" class="btn">Add-More</button> 
					
					 <button type="submit" class="boton" > Submit</button>
    <button type="reset" class="boton" style="float:right;"> Cancel</button>
</form>

＆＃13;

Answer 2

我偶然发现的一件事是你在克隆HTML中反复使用相同的id属性。我已在此处更正此问题，方法是将您的i-counter添加到元素的id属性中，它似乎有效：https://jsfiddle.net/8ho414nn/4

var clone = '<div data-count="' + i + '" ><br/><hr/>'
          + '<div class="form-group" ><label>'
          ...
          + 'type="text" id="trip_highlightImage' + i + '">'
          ...
          + '"class="removeMoreHighlights btn">'
          + 'Remove</button></div>';

动态创建的输入字段数据未发布

2 个答案: