我的表格如下所示：
<form method="post" action="{{ url('/page/save') }}" class="pageForm">
<input type="hidden" name="_token" value="{{ csrf_token() }}" />
<div class="box-body">
<div class="form-group">
<label>Page-Title:</label>
<input type="text" value="" name="page_title" class="form-control" id="" placeholder="Enter Page Title">
</div>
<div class="form-group">
<label>Page-Alias:</label>
<input type="text" value="" name="page_alias" class="form-control" id="" placeholder="Auto-Generated If Left Blank">
</div>
<div class="form-group">
<label>Add Image</label>
<div class="input-group">
<input class="form-control" placeholder="Use Image Of 840 X 320 For Better Resolution" name="page_image" value="" type="text" id="page_image">
<span class="input-group-addon" style="background: #3C8DBC">
<a style="cursor: pointer;" onclick="BrowseServer('page_image');" >
<span style="color: #FFF;">Select Image</span>
</a>
</span>
</div>
</div>
<!-- Page Type -->
<div class="form-group">
<label>Select-Type:</label>
<br/>
<input type="checkbox" style="margin: 10px;" class="page_type" name="page_type" value="single_page">Individual Page
<input type="checkbox" style="margin: 10px;" class="page_type" name="page_type" value="post_page">Post's Page
</div>
<!-- Post Type -->
<div class="form-group" id="postSelect" style="display: none;">
<label>Select-Post:</label>
<br/>
<select id="allPosts" value="" name="page_postParent" class="form-control">
<option selected disabled value="">Select Post For Page </option>
<option value="8">About Us</option>
<option value="10">Blog</option>
<option value="12">Day Tour</option>
</select>
</div>
<!-- Adding menu to navigation -->
<div class="form-group" id="singleMenuNav" style="display: none;">
<div class="form-group">
<label>Enter Menu Title for page:</label>
<input type="text" id="page_navTitle" name="page_navTitle" value="" class="form-control" />
</div>
<div class="form-group">
<label>Add-Menu To:</label>
<br/>
<input type="checkbox" style="margin: 10px;" class="menuLocation" name="nav_location[]" value="mainMenu">Main Menu
<input type="checkbox" style="margin: 10px;" class="menuLocation" name="nav_location[]" value="footerMenu">Footer Menu
<input type="checkbox" style="margin: 10px;" class="menuLocation" name="nav_location[]" value="subMenu">Sub-Menu
<input type="checkbox" style="margin: 10px;" class="menuLocation" name="nav_location[]" value="category">Add To Category
</div>
</div>
<!-- Sub-Menu List -->
<div class="form-group" id="menuSelect" style="display: none;">
<label>Select-Menu:</label>
<br/>
<select id="allMenus" value="" name="page_menuParent" class="form-control">
<option selected disabled value="">Select Parent Menu For Page </option>
<option value="8">About Us</option>
<option value="12">Contact Us</option>
</select>
</div>
<!-- Category List -->
<div class="form-group" id="categorySelect" style="display: none;">
<label>Select-Category:</label>
<br/>
<select id="allMenus" value="" name="page_menuParent" class="form-control">
<option selected disabled value="">Select Category For Page </option>
<option value="1">Nepal</option>
<option value="2">Bhutan</option>
</select>
</div>
<!-- Template Type -->
<div class="form-group" id="template" style="display: none;">
<label>Template:</label>
<br/>
<select id="templateOption" value=" " name="page_template" class="form-control">
<option selected disabled value="">Select Template For Page </option>
<option value="generic">Generic Page</option>
<option value="itinerary">Itinerary Page</option>
</select>
</div>
</div>
<!--End of row-->
<!-- Generic Content -->
<div class="row" id="genericContent" class="pageTemplate" style="margin-top: 40px; display:none;">
<!-- left column -->
<div class="col-md-12">
<!-- general form elements -->
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">Generic Page</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
</div>
<div class="form-group">
<label>Enter Page Content:</label>
<br/>
<textarea name="page_content" class="editor form-control"></textarea>
</div>
</div>
<!--End of primary box-->
</div>
<!--End of col-md-12-->
</div>
<!--End of row-->
<!-- Individual Pages -->
<div class="row" id="itineraryContent" class="pageTemplate" style="margin-top: 40px; display: none;">
<!-- left column -->
<div class="col-md-12">
<!-- general form elements -->
<div class="box box-primary">
<div class="box-header" style="margin-top: 5px;">
<h3 class="box-title">Itinerary Page</h3>
</div>
<!-- /.box-header -->
<hr/>
<div class="box-header">
<h3 class="box-title">Trip Excrept</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<div class="form-group">
<textarea class="editor" name="trip_excrept"></textarea>
</div>
</div>
<!-- End of box body-->
</div>
<!--End of primary box-->
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">Trip Information </h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<div class="form-group">
<label>Trip PDF</label>
<div class="input-group">
<input class="form-control" placeholder="Upload The Trip PDF" name="trip_pdf" value="" type="text" id="trip_pdf">
<span class="input-group-addon" style="background: #3C8DBC">
<a style="cursor: pointer;" onclick="BrowseServer('trip_pdf');" >
<span style="color: #FFF;">Select Image</span>
</a>
</span>
</div>
</div>
<div class="form-group">
<label>Trip-Starting Price:</label>
<input type="number" value="" name="trip_price" class="form-control" id="" placeholder="Enter Trip's Starting Price">
</div>
<div class="form-group">
<label>Trip-Price Info:</label>
<input type="text" value="" name="trip_priceInfo" class="form-control" id="" placeholder="Enter Trip's Price" />
</div>
<div class="form-group">
<label>Trip-Duration:</label>
<br/>
<em style="margin: 10px;">Min-Days</em>
<input type="number" name="trip_duration[]" />
<em style="margin: 10px;">Max-Days</em>
<input type="number" name="trip_duration[]" />
</div>
<div class="form-group">
<label>Total-Persons:</label>
<br/>
<em style="margin: 10px;">Min-People</em>
<input type="number" name="trip_person[]" />
<em style="margin: 10px;">Max-People</em>
<input type="number" name="trip_person[]" />
</div>
<div class="form-group">
<label>Trip-Accomodation Type:</label>
<input type="text" value="" name="trip_accomodation" class="form-control" id="" placeholder="Enter Trip Accomodation" />
</div>
<div class=" form-group ">
<label>Trip-Transportaion:</label>
<input type="text " value=" " name="trip_transport " class="form-control " id=" " placeholder="Enter Transportation Info ">
</div>
<div class="form-group ">
<label>Map-Guide:</label>
<input type="text " value=" " name="trip_mapGuide " class="form-control " id=" " placeholder="Enter URL To Trip 's Map">
</div>
<div class="form-group">
<label>Trip-Fooding:</label>
<br/>
<em style="margin: 10px;">Breakfast</em>
<input type="number" name="trip_fooding[]" />
<em style="margin: 10px;">Lunch</em>
<input type="number" name="trip_fooding[]" />
<em style="margin: 10px;">Dinner</em>
<input type="number" name="trip_fooding[]" />
</div>
</div>
<!-- End of box body-->
</div>
<!--End of primary box-->
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">Trip Highlights*</h3>
<div style="float: right; color:3C8DBC;">
<span><h6>*Min-Trip Highlights: 3</h6></span>
<span><h6>*Total Trip-Highlights Must Be Multiple Of 3</h6></span>
</div>
</div>
<!-- /.box-header -->
<div class="box-body">
<!-- Trip Highlights Div-->
<div id="tripHighlights">
<div class="form-group">
<label>Trip-Highlight Title:</label>
<input type="text" value="" name="trip_highlightTitle[]" class="form-control clearHiglights" id="highlightTitle" 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>
<!-- End Of Highlights Trip-->
</div>
<!-- End of box body-->
</div>
<!--End of primary box-->
</div>
<!--End of col-md-12-->
<button type="submit " style="margin: 10px; " class="btn btn-primary ">Create Page</button>
</div>
<!--End of row-->
`
我的表单末尾的Trip Highlights Div将使用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++;
});
当我这样做并提交表单时，动态创建的输入字段中的数据将不会被提交，只有最初提供的输入字段数据才会被提交，但是当我为Trip Highlights Div创建一个单独的表单并使用相同的jquery代码时post数据包含来自动态生成的输入字段的数据。这里有什么问题。我提交此表单时获得的帖子数据是
'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)