CODEWITHSUNDEEP
javascriptphpjquery
Maria
Maria

Reputation: 760

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?

Upvotes: 1

Views: 727

Answers (1)

JYoThI
JYoThI

Reputation: 12085

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,
                      .......
                    ),
                      .........  
     )

Upvotes: 2

Related Questions