I have form to create an itinerary. I have the add new button to create new fields for each day. My form looks like that:
Js
$(document).ready(function() {
bookIndex = 0;
$('#bookForm')
// Add button click handler
.on('click', '.addButton', function() {
bookIndex++;
var $template = $('#bookTemplate'),
$clone = $template
.clone()
.removeClass('hide')
.removeAttr('id')
.attr('data-book-index', bookIndex)
.insertBefore($template);
// Update the name attributes
$clone
.find('[name="day"]').attr('name', 'day[' + bookIndex + ']').end()
.find('[name="departs_on"]').attr('name', 'departs_on[' + bookIndex + ']').end()
.find('[name="arrives_on"]').attr('name', 'arrives[' + bookIndex + ']').end()
.find('[name="port_code"]').attr('name', 'port_code[' + bookIndex + ']').end()
.find('[name="port_name"]').attr('name', 'port_name[' + bookIndex + ']').end()
.find('[name="location"]').attr('name', 'location[' + bookIndex + ']').end()
.find('[name="latitude"]').attr('name', 'latitude[' + bookIndex + ']').end()
.find('[name="longitude"]').attr('name', 'longitude[' + bookIndex + ']').end();
// Add new fields
// Note that we also pass the validator rules for new field as the third parameter
})
// Remove button click handler
.on('click', '.removeButton', function() {
var $row = $(this).parents('.form-group'),
index = $row.attr('data-book-index');
// Remove fields
$('#bookForm')
// Remove element containing the fields
$row.remove();
});
});
And my HTML:
<form id="bookForm" method="post" class="form-horizontal">
<div class="form-group">
<div class="col-xs-4 col-lg-1">
<label class="col-xs-1 control-label">Day</label>
<input type="text" class="form-control" name="day[]" placeholder="day" />
</div>
<div class="col-xs-4 col-lg-2">
<label class="control-label">Departs</label>
<input type="date" class="form-control" name="departs_on[]" placeholder="departs_on" />
</div>
<div class="col-xs-2 col-lg-2">
<label class="control-label">Arrives On</label>
<input type="date" class="form-control" name="arrives_on[]" placeholder="arrives_on" />
</div>
<div class="col-xs-2 col-lg-1">
<label class="control-label">Port Code</label>
<input type="text" class="form-control" name="port_code[]" placeholder="port_code" />
</div>
<div class="col-xs-2 col-lg-1">
<label class="control-label">Port Name</label>
<input type="text" class="form-control" name="port_name[]" placeholder="port_name" />
</div>
<div class="col-xs-2 col-lg-2">
<label class="control-label">Location</label>
<input type="text" class="form-control" name="location[]" placeholder="location" />
</div>
<div class="col-xs-2 col-lg-1">
<label class="control-label">Latitude</label>
<input type="text" class="form-control" name="latitude[]" placeholder="latitude" />
</div>
<div class="col-xs-2 col-lg-1">
<label class="control-label">Longitude</label>
<input type="text" class="form-control" name="longitude[]" placeholder="longitude" />
</div>
</div>
</form>
I have this hidden form as well for the add new fields
<div class="form-group hide" id="bookTemplate">
<div class="col-xs-4 col-lg-1">
<label class="col-xs-1 control-label">Day</label>
<input type="text" class="form-control" name="day" placeholder="day" />
</div>
<div class="col-xs-4 col-lg-2">
<label class="control-label">Departs</label>
<input type="date" class="form-control" name="departs_on" placeholder="departs_on" />
</div>
<div class="col-xs-2 col-lg-2">
<label class="control-label">Arrives On</label>
<input type="date" class="form-control" name="arrives_on" placeholder="arrives_on" />
</div>
<div class="col-xs-2 col-lg-1">
<label class="control-label">Port Code</label>
<input type="text" class="form-control" name="port_code" placeholder="port_code" />
</div>
<div class="col-xs-2 col-lg-1">
<label class="control-label">Port Name</label>
<input type="text" class="form-control" name="port_name" placeholder="port_name" />
</div>
<div class="col-xs-2 col-lg-2">
<label class="control-label">Location</label>
<input type="text" class="form-control" name="location" placeholder="location" />
</div>
<div class="col-xs-2 col-lg-1">
<label class="control-label">Latitude</label>
<input type="text" class="form-control" name="latitude" placeholder="latitude" />
</div>
<div class="col-xs-2 col-lg-1">
<label class="control-label">Longitude</label>
<input type="text" class="form-control" name="longitude" placeholder="longitude" />
</div>
<div class="col-xs-1 col-lg-1">
<button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i></button>
</div>
It working.
I was wondering is there any option to get this as an array and then insert then to database or should I use a loop and run eg 6 times my db query? I got lost a little bit here. I tried to create an array but nothing worked. How to get the values of the inputs for each day and insert into the database with PHP?
In form name attribute
build a array like below
name="data[0][day]"
In jquery
name="data[1][day]" // 1 should be replaced with incrementer variable
so you will get each date separately
. so you can loop
the array
and insert
the data into mysql
.
Example array : This is you will get on server side
array( [0]=>array(
[day]=>value,
[departs_on]=>value,
.......
),
[1]=>array(
[day]=>value,
[departs_on]=>value,
.......
),
.........
)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.