从 bootstrap 动态字段向 mysql table 插入数据
inserting data to mysql table from bootstrap dynamic fields
我正在使用以下 link Adding fields with different names 在 bootstrap 中创建动态字段。现在我想将这些动态字段中的数据插入到 mysql。我无法理解如何开始。你们能帮帮我吗
我试过下面的代码
$link = mysqli_connect("172.16.8.52", "userid", "pwd", "DB_AD");
if($link === false){
echo "<script language=\"JavaScript\">\n";
echo "alert('Cannot connect');\n";
echo "</script>";
die("ERROR: Could not connect. " . mysqli_connect_error());
}
$first_name = mysqli_real_escape_string($link, $_POST['book[0].title']);
$last_name = mysqli_real_escape_string($link, $_POST['book[0].isbn']);
$email_address = mysqli_real_escape_string($link, $_POST['book[0].price']);
// attempt insert query execution
$sql = "INSERT INTO sys_det (IPAddress, AssetTag, SerialNo) VALUES ('$first_name', '$last_name', '$email_address')";
if(mysqli_query($link, $sql)){
echo "Records added successfully.";
echo "<script language=\"JavaScript\">\n";
echo "alert('details Added successfully!');\n";
echo "window.location=' http://10.50.4.20/footer.php'";
echo "</script>";
} else{
echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
echo "<script language=\"JavaScript\">\n";
echo "alert('Username or Password was incorrect!');\n";
echo "window.location=' http://10.50.4.20/Index.php'";
echo "</script>";
}
// close connection
mysqli_close($link);
?>
表单代码
$(document).ready(function() {
var titleValidators = {
row: '.col-sm-3', // The title is placed inside a <div class="col-xs-4"> element
validators: {
notEmpty: {
message: 'The IP Address is required'
},
ip: {
message: 'Please enter a valid IP address'
}
}
},
isbnValidators = {
row: '.col-sm-4',
validators: {
notEmpty: {
message: 'The Asset Tag is required'
},
stringLength: {
max: 15,
message: 'Asset tag length should be 15'
},
regexp: {
regexp: /^[A-Za-z0-9 ]*$/,
message: "No special characters allowed",
}
// isbn: {
// message: 'The Asset Tag is not valid'
//}
}
},
priceValidators = {
row: '.col-sm-3',
validators: {
notEmpty: {
message: 'The Serial No is required'
},
// numeric: {
// message: 'The Serial No must be a alphanumeric number'
//}
}
},
bookIndex = 0;
$('#bookForm')
.formValidation({
framework: 'bootstrap',
live: 'enabled',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
'book[0].title': titleValidators,
'book[0].isbn': isbnValidators,
'book[0].price': priceValidators
}
})
// 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="title"]').attr('name', 'book[' + bookIndex + '].title').end()
.find('[name="isbn"]').attr('name', 'book[' + bookIndex + '].isbn').end()
.find('[name="price"]').attr('name', 'book[' + bookIndex + '].price').end();
// Add new fields
// Note that we also pass the validator rules for new field as the third parameter
$('#bookForm')
.formValidation('addField', 'book[' + bookIndex + '].title', titleValidators)
.formValidation('addField', 'book[' + bookIndex + '].isbn', isbnValidators)
.formValidation('addField', 'book[' + bookIndex + '].price', priceValidators);
})
// Remove button click handler
.on('click', '.removeButton', function() {
var $row = $(this).parents('.form-group'),
index = $row.attr('data-book-index');
// Remove fields
$('#bookForm')
.formValidation('removeField', $row.find('[name="book[' + index + '].title"]'))
.formValidation('removeField', $row.find('[name="book[' + index + '].isbn"]'))
.formValidation('removeField', $row.find('[name="book[' + index + '].price"]'));
// Remove element containing the fields
$row.remove();
});
});
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Boostrap Validator</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/css/bootstrapvalidator.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href="font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<!-- jQuery v1.9.1 or higher
<!-- Path to Bootstrap JS -->
<script type="text/javascript" src="jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- FormValidation plugin and the class supports validating Bootstrap form -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/formValidation.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/framework/bootstrap.min.js"></script>
</head>
<form id="bookForm" method="post" action="mysql.php" class="form-horizontal">
<div class="form-group">
<div class="col-sm-3">
<input type="text" class="form-control" name="book[0].title" placeholder="IP Address" />
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="isbn" name="book[0].isbn" placeholder="Asset Tag(KVBXXXX1DESXXXX)" />
</div>
<div class="col-sm-3">
<input type="text" class="form-control" name="book[0].price" placeholder="Serial No" />
</div>
<div class="col-sm-1">
<button type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i>
</button>
</div>
</div>
<!-- The template for adding new field -->
<div class="form-group hide" id="bookTemplate">
<div class="col-sm-3 ">
<input type="text" class="form-control" name="title" placeholder="IP Address" />
</div>
<div class="col-sm-4">
<input type="text" class="form-control" name="isbn" placeholder="Asset Tag(KVBXXXX1DESXXXX)" />
</div>
<div class="col-sm-3">
<input type="text" class="form-control" name="price" placeholder="Serial No" />
</div>
<div class="col-sm-1">
<button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i>
</button>
</div>
</div>
<div class="form-group">
<div class="col-xs-5 ">
<button type="submit" name="submit1" class="btn btn-default">Submit</button>
</div>
</div>
</form>
现在我已经为 mysql.php
添加了这段代码
<!DOCTYPE html>
<html>
<head>
<title>BootstrapValidator demo</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<h2>Form data</h2>
<hr/>
<p>This is a simple page showing the data you have just submitted</p>
<pre><?php print_r($_POST); ?></pre>
</div>
</div>
</body>
</html>
当我点击提交按钮时,我得到了以下输出。
Array
(
[book] => Array
(
[0] => 3X20586
)
[title] =>
[isbn] =>
[price] =>
[submit1] =>
)
$(document).ready(function() {
$('#bookForm')
.formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
'title[]': {
// The task is placed inside a .col-xs-6 element
row: '.col-sm-3', // The title is placed inside a <div class="col-xs-4"> element
validators: {
notEmpty: {
message: 'The IP Address is required'
},
ip: {
message: 'Please enter a valid IP address'
}
}
},
'isbn[]': {
row: '.col-sm-4',
validators: {
notEmpty: {
message: 'The Asset Tag is required'
},
stringLength: {
max: 15,
message: 'Asset tag length should be 15'
},
regexp: {
regexp: /^[A-Za-z0-9 ]*$/,
message: "No special characters allowed",
}
}
},
'price[]': {
row: '.col-sm-3',
validators: {
notEmpty: {
message: 'The Serial No is required'
},
}
}
}
})
// Add button click handler
.on('click', '.addButton', function() {
var $template = $('#bookTemplate'),
$clone = $template
.clone()
.removeClass('hide')
.removeAttr('id')
.insertBefore($template);
// Update the name attributes
// Add new fields
// Note that we also pass the validator rules for new field as the third parameter
$('#bookForm')
.formValidation('addField', $clone.find('[name="title[]"]'))
.formValidation('addField', $clone.find('[name="isbn[]"]'))
.formValidation('addField', $clone.find('[name="price[]"]'))
})
// Remove button click handler
.on('click', '.removeButton', function() {
var $row = $(this).closest('.form-group');
// Remove fields
$('#bookForm')
.formValidation('removeField', $row.find('[name="title[]"]'))
.formValidation('removeField', $row.find('[name="isbn[]"]'))
.formValidation('removeField', $row.find('[name="price[]"]'))
$row.remove();
})
//twitter bootstrap script
});
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Boostrap Validator</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/css/bootstrapvalidator.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href="font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<!-- jQuery v1.9.1 or higher
<!-- Path to Bootstrap JS -->
<script type="text/javascript" src="jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- FormValidation plugin and the class supports validating Bootstrap form -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/formValidation.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/framework/bootstrap.min.js"></script>
</head>
<form id="bookForm" method="post" action="target.php" class="form-horizontal" autocomplete="off">
<div class="form-group">
<div class="col-sm-3">
<input type="text" class="form-control" name="title[]" placeholder="IP Address" />
</div>
<div class="col-sm-4">
<input type="text" class="form-control" name="isbn[]" placeholder="Asset Tag(KVBXXXX1DESXXXX)" />
</div>
<div class="col-sm-3">
<input type="text" class="form-control" name="price[]" placeholder="Serial No" />
</div>
<div class="col-sm-1">
<button type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i>
</button>
</div>
</div>
<!-- The template for adding new field -->
<div class="form-group hide" id="bookTemplate">
<div class="col-sm-3 ">
<input type="text" class="form-control" name="title[]" placeholder="IP Address" />
</div>
<div class="col-sm-4">
<input type="text" class="form-control" name="isbn[]" placeholder="Asset Tag(KVBXXXX1DESXXXX)" />
</div>
<div class="col-sm-3">
<input type="text" class="form-control" name="price[]" placeholder="Serial No" />
</div>
<div class="col-sm-1">
<button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i>
</button>
</div>
</div>
<div class="form-group">
<div class="col-xs-5 ">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
我已将 book[0].title 更改为 title[],所有其他字段名称也是如此。
target.php 的代码也已更改为
<?php
//var_dump($_POST);
print_r($_POST['title']);
echo '<br/>';
print_r($_POST['isbn']);
echo '<br/>';
print_r($_POST['price']);
die;
?>
Output when clicked on submit
Array ( [0] => 10.50.5.196 [1] => 10.50.5.16 [2] => )
Array ( [0] => kvb2012 [1] => kvb2012 [2] => )
Array ( [0] => 3X [1] => 3Y [2] => )
我正在使用以下 link Adding fields with different names 在 bootstrap 中创建动态字段。现在我想将这些动态字段中的数据插入到 mysql。我无法理解如何开始。你们能帮帮我吗
我试过下面的代码
$link = mysqli_connect("172.16.8.52", "userid", "pwd", "DB_AD");
if($link === false){
echo "<script language=\"JavaScript\">\n";
echo "alert('Cannot connect');\n";
echo "</script>";
die("ERROR: Could not connect. " . mysqli_connect_error());
}
$first_name = mysqli_real_escape_string($link, $_POST['book[0].title']);
$last_name = mysqli_real_escape_string($link, $_POST['book[0].isbn']);
$email_address = mysqli_real_escape_string($link, $_POST['book[0].price']);
// attempt insert query execution
$sql = "INSERT INTO sys_det (IPAddress, AssetTag, SerialNo) VALUES ('$first_name', '$last_name', '$email_address')";
if(mysqli_query($link, $sql)){
echo "Records added successfully.";
echo "<script language=\"JavaScript\">\n";
echo "alert('details Added successfully!');\n";
echo "window.location=' http://10.50.4.20/footer.php'";
echo "</script>";
} else{
echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
echo "<script language=\"JavaScript\">\n";
echo "alert('Username or Password was incorrect!');\n";
echo "window.location=' http://10.50.4.20/Index.php'";
echo "</script>";
}
// close connection
mysqli_close($link);
?>
表单代码
$(document).ready(function() {
var titleValidators = {
row: '.col-sm-3', // The title is placed inside a <div class="col-xs-4"> element
validators: {
notEmpty: {
message: 'The IP Address is required'
},
ip: {
message: 'Please enter a valid IP address'
}
}
},
isbnValidators = {
row: '.col-sm-4',
validators: {
notEmpty: {
message: 'The Asset Tag is required'
},
stringLength: {
max: 15,
message: 'Asset tag length should be 15'
},
regexp: {
regexp: /^[A-Za-z0-9 ]*$/,
message: "No special characters allowed",
}
// isbn: {
// message: 'The Asset Tag is not valid'
//}
}
},
priceValidators = {
row: '.col-sm-3',
validators: {
notEmpty: {
message: 'The Serial No is required'
},
// numeric: {
// message: 'The Serial No must be a alphanumeric number'
//}
}
},
bookIndex = 0;
$('#bookForm')
.formValidation({
framework: 'bootstrap',
live: 'enabled',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
'book[0].title': titleValidators,
'book[0].isbn': isbnValidators,
'book[0].price': priceValidators
}
})
// 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="title"]').attr('name', 'book[' + bookIndex + '].title').end()
.find('[name="isbn"]').attr('name', 'book[' + bookIndex + '].isbn').end()
.find('[name="price"]').attr('name', 'book[' + bookIndex + '].price').end();
// Add new fields
// Note that we also pass the validator rules for new field as the third parameter
$('#bookForm')
.formValidation('addField', 'book[' + bookIndex + '].title', titleValidators)
.formValidation('addField', 'book[' + bookIndex + '].isbn', isbnValidators)
.formValidation('addField', 'book[' + bookIndex + '].price', priceValidators);
})
// Remove button click handler
.on('click', '.removeButton', function() {
var $row = $(this).parents('.form-group'),
index = $row.attr('data-book-index');
// Remove fields
$('#bookForm')
.formValidation('removeField', $row.find('[name="book[' + index + '].title"]'))
.formValidation('removeField', $row.find('[name="book[' + index + '].isbn"]'))
.formValidation('removeField', $row.find('[name="book[' + index + '].price"]'));
// Remove element containing the fields
$row.remove();
});
});
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Boostrap Validator</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/css/bootstrapvalidator.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href="font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<!-- jQuery v1.9.1 or higher
<!-- Path to Bootstrap JS -->
<script type="text/javascript" src="jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- FormValidation plugin and the class supports validating Bootstrap form -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/formValidation.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/framework/bootstrap.min.js"></script>
</head>
<form id="bookForm" method="post" action="mysql.php" class="form-horizontal">
<div class="form-group">
<div class="col-sm-3">
<input type="text" class="form-control" name="book[0].title" placeholder="IP Address" />
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="isbn" name="book[0].isbn" placeholder="Asset Tag(KVBXXXX1DESXXXX)" />
</div>
<div class="col-sm-3">
<input type="text" class="form-control" name="book[0].price" placeholder="Serial No" />
</div>
<div class="col-sm-1">
<button type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i>
</button>
</div>
</div>
<!-- The template for adding new field -->
<div class="form-group hide" id="bookTemplate">
<div class="col-sm-3 ">
<input type="text" class="form-control" name="title" placeholder="IP Address" />
</div>
<div class="col-sm-4">
<input type="text" class="form-control" name="isbn" placeholder="Asset Tag(KVBXXXX1DESXXXX)" />
</div>
<div class="col-sm-3">
<input type="text" class="form-control" name="price" placeholder="Serial No" />
</div>
<div class="col-sm-1">
<button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i>
</button>
</div>
</div>
<div class="form-group">
<div class="col-xs-5 ">
<button type="submit" name="submit1" class="btn btn-default">Submit</button>
</div>
</div>
</form>
现在我已经为 mysql.php
添加了这段代码 <!DOCTYPE html>
<html>
<head>
<title>BootstrapValidator demo</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<h2>Form data</h2>
<hr/>
<p>This is a simple page showing the data you have just submitted</p>
<pre><?php print_r($_POST); ?></pre>
</div>
</div>
</body>
</html>
当我点击提交按钮时,我得到了以下输出。
Array
(
[book] => Array
(
[0] => 3X20586
)
[title] =>
[isbn] =>
[price] =>
[submit1] =>
)
$(document).ready(function() {
$('#bookForm')
.formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
'title[]': {
// The task is placed inside a .col-xs-6 element
row: '.col-sm-3', // The title is placed inside a <div class="col-xs-4"> element
validators: {
notEmpty: {
message: 'The IP Address is required'
},
ip: {
message: 'Please enter a valid IP address'
}
}
},
'isbn[]': {
row: '.col-sm-4',
validators: {
notEmpty: {
message: 'The Asset Tag is required'
},
stringLength: {
max: 15,
message: 'Asset tag length should be 15'
},
regexp: {
regexp: /^[A-Za-z0-9 ]*$/,
message: "No special characters allowed",
}
}
},
'price[]': {
row: '.col-sm-3',
validators: {
notEmpty: {
message: 'The Serial No is required'
},
}
}
}
})
// Add button click handler
.on('click', '.addButton', function() {
var $template = $('#bookTemplate'),
$clone = $template
.clone()
.removeClass('hide')
.removeAttr('id')
.insertBefore($template);
// Update the name attributes
// Add new fields
// Note that we also pass the validator rules for new field as the third parameter
$('#bookForm')
.formValidation('addField', $clone.find('[name="title[]"]'))
.formValidation('addField', $clone.find('[name="isbn[]"]'))
.formValidation('addField', $clone.find('[name="price[]"]'))
})
// Remove button click handler
.on('click', '.removeButton', function() {
var $row = $(this).closest('.form-group');
// Remove fields
$('#bookForm')
.formValidation('removeField', $row.find('[name="title[]"]'))
.formValidation('removeField', $row.find('[name="isbn[]"]'))
.formValidation('removeField', $row.find('[name="price[]"]'))
$row.remove();
})
//twitter bootstrap script
});
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Boostrap Validator</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/css/bootstrapvalidator.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href="font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<!-- jQuery v1.9.1 or higher
<!-- Path to Bootstrap JS -->
<script type="text/javascript" src="jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- FormValidation plugin and the class supports validating Bootstrap form -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/formValidation.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/framework/bootstrap.min.js"></script>
</head>
<form id="bookForm" method="post" action="target.php" class="form-horizontal" autocomplete="off">
<div class="form-group">
<div class="col-sm-3">
<input type="text" class="form-control" name="title[]" placeholder="IP Address" />
</div>
<div class="col-sm-4">
<input type="text" class="form-control" name="isbn[]" placeholder="Asset Tag(KVBXXXX1DESXXXX)" />
</div>
<div class="col-sm-3">
<input type="text" class="form-control" name="price[]" placeholder="Serial No" />
</div>
<div class="col-sm-1">
<button type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i>
</button>
</div>
</div>
<!-- The template for adding new field -->
<div class="form-group hide" id="bookTemplate">
<div class="col-sm-3 ">
<input type="text" class="form-control" name="title[]" placeholder="IP Address" />
</div>
<div class="col-sm-4">
<input type="text" class="form-control" name="isbn[]" placeholder="Asset Tag(KVBXXXX1DESXXXX)" />
</div>
<div class="col-sm-3">
<input type="text" class="form-control" name="price[]" placeholder="Serial No" />
</div>
<div class="col-sm-1">
<button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i>
</button>
</div>
</div>
<div class="form-group">
<div class="col-xs-5 ">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
我已将 book[0].title 更改为 title[],所有其他字段名称也是如此。 target.php 的代码也已更改为
<?php
//var_dump($_POST);
print_r($_POST['title']);
echo '<br/>';
print_r($_POST['isbn']);
echo '<br/>';
print_r($_POST['price']);
die;
?>
Output when clicked on submit
Array ( [0] => 10.50.5.196 [1] => 10.50.5.16 [2] => )
Array ( [0] => kvb2012 [1] => kvb2012 [2] => )
Array ( [0] => 3X [1] => 3Y [2] => )