Maria Maria - 2 years ago 112
Javascript Question

Get values from Dynamically Input Fields and Store to Database with PHP

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:

enter image description here

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 e.g 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?

Answer Source

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,
                      .......
                    ),
                      .........  
     )  
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download