Dynamically Created Input Field's data not being posted

Question

This is the Jquery Code I have used for creating two new Input Fields every time User clicks Add more Button

  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++;
                    });

This newly created element gets attached to the already existing form elements.This is my already existing input fields (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>

All of this exists within the tag But still during post I only get the input from fields that are initially generated in the DOM and not from the ones that is generated using jquery

This is my post result:

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

The actual result I expect is:

'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)

can you pass the index in the name attribute of each field and try again? — Kalish
– Kalish, Commented Apr 21, 2015 at 11:44
the form starts at the beginning of the page and ends at the end of the page @sgt — xenish
– xenish, Commented Apr 21, 2015 at 11:46

Kalish · Accepted Answer · 2015-04-21 12:55:24Z

well, I used your code to create an example, and I can see the dynamically added fields are also part of the form submission. see if this helps!

$(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() );
});
  });

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

Tobse · Accepted Answer · 2015-04-21 12:49:38Z

1

One thing I've stumbled on is that you're using the same id attribute over and over in your clone HTML. I have corrected this here by adding your i-counter to the element's id attribute and it seems to work: 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>';

answered Apr 21, 2015 at 12:49

Tobse

7446 silver badges11 bronze badges

Collectives™ on Stack Overflow

Dynamically Created Input Field's data not being posted

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related