Я использую следующую ссылку Добавление полей с разными именами для создания динамических полей в начальной загрузке. Теперь я хочу вставить данные из этих динамических полей в 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>
$(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>
Других решений пока нет …