Question

我有表格来创建行程。我有添加新按钮来为每天创建新字段。我的表格看起来像这样：

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

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

我有这个隐藏的形式以及添加新字段

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

工作。

我想知道是否有任何选项可以将其作为一个数组然后插入数据库，或者我应该使用循环并运行例如我的数据库查询的6倍？我在这里迷路了一点。我试图创建一个数组但没有任何效果。如何获取每天输入的值并使用PHP插入数据库？

Answer 1

以表格名称attribute构建如下数组

name="data[0][day]"

在jquery中

name="data[1][day]"   // 1 should be replaced with incrementer variable

所以你会得到每个date separately。这样您就可以loop将array和insert数据加入mysql。

示例数组：这将是server side

array( [0]=>array(
                      [day]=>value,
                      [departs_on]=>value,
                      .......
                    ),
       [1]=>array(
                      [day]=>value,
                      [departs_on]=>value,
                      .......
                    ),
                      .........  
     )

使用PHP从动态输入字段和存储到数据库中获取值

1 个答案: