The results are in!

See what nearly 90,000 developers picked as their most loved, dreaded, and desired coding languages and more in
the 2019 Developer Survey.

inserting data to mysql table from bootstrap dynamic Ask Question

fields

I am using the following link Adding fields with different

names for creating dynamic fields in bootstrap. Now I want
1 to insert data from these dynamic fields to mysql. I am not
able to understand how to start with. Could you guys help
me out

I tried for the below code

$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']);

Home // attempt insert query execution

By using our site, you acknowledge that youINTO
$sql = "INSERT have sys_det
read and(IPAddress,
understand our Cookie SerialNo)
AssetTag, Policy, Privacy Policy, and('$first_name',
VALUES our Terms of Service.
PUBLIC '$last_name', '$email_address')";
if(mysqli_query($link, $sql)){
Stack Overflow echo "Records added successfully.";
echo "<script language=\"JavaScript\">\n";
Tags echo "alert('details Added successfully!');\n";
echo "window.location=' http://10.50.4.20/footer.php'";
Users echo "</script>";
} else{
Jobs 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'";
Teams echo "</script>";
Q&A for work }

// close connection
Learn More mysqli_close($link);
?>

FORM CODE

$(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: {
By using our site, you acknowledge that max:
you have
15, read and understand our Cookie Policy, Privacy Policy, and our Terms of Service.
 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++;
varthat
By using our site, you acknowledge $template
you have=read
$('#bookTemplate'),
and understand our Cookie Policy, Privacy Policy, and our Terms of Service.
$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>

By using our site, you acknowledge

<linkthat you have read and understand our Cookie Policy, Privacy Policy, and our Terms of Service.
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.mi
</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
By using our site, you acknowledge thatclass="col-sm-3">
you have read and understand our Cookie Policy, Privacy Policy, and our Terms of Service.
<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>

Run code snippet Expand snippet

Now i have added this code for mysql.php

<!DOCTYPE html>
<html>
<head>
<title>BootstrapValidator demo</title>
<link
By using our site, you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our Terms of Service.
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>

and when i am clicking on the submit button i am getting

following output.

Array
(
[book] => Array
(
[0] => 3X20586
)

[title] =>
[isbn] =>
[price] =>
[submit1] =>
)

php mysql twitter-bootstrap formvalidation-plugin

edited Feb 23 '16 at 14:05

asked Feb 23 '16 at 3:24

Basati Naveen
105 2 15

By using our site, you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our Terms of Service.
Have you tried making the codes? Perhaps, you can supply
 your codes here :) – budiantoip Feb 23 '16 at 3:28

I have edited the code. I was just checking whether the code is
working without adding dynamic fields – Basati Naveen Feb
23 '16 at 3:39

It's a commercial library, I can't try it :( Could you put this code
at your first line, and let me know the result?
print_r($_POST['book']);die; – budiantoip Feb 23 '16 at 3:57

when i am clicking on submit, the submit button is getting

greyed out and only when i am clicking on add symbol and
clicking on submit i am getting the last textfield value –
Basati Naveen Feb 23 '16 at 6:38

i am getting only the last textfield Array ( [0] => 3R87676 [1] =>
) – Basati Naveen Feb 23 '16 at 6:39

1 Answer

$(document).ready(function() {
0

$('#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 eleme
row: '.col-sm-3', // The title is placed insid
element
validators: {
By using our site, you acknowledge that younotEmpty:
have read{and understand our Cookie Policy, Privacy Policy, and our Terms of Service.
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() {
By using our site, you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our Terms of Service.
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 ne
$('#bookForm')
.formValidation('addField', $clone.find('[name="ti
.formValidation('addField', $clone.find('[name="is
.formValidation('addField', $clone.find('[name="pr
})

// Remove button click handler

.on('click', '.removeButton', function() {
var $row = $(this).closest('.form-group');

// Remove fields
$('#bookForm')
.formValidation('removeField', $row.find('[name="t
.formValidation('removeField', $row.find('[name="i
.formValidation('removeField', $row.find('[name="p
$row.remove();
})

//twitter bootstrap script

});

<!doctype html>
<html>

<head>
<meta http-equiv="content-type" content="text/html; ch
<title>Boostrap Validator</title>

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3
rel="stylesheet">
<link href="http://cdnjs.cloudflare.com/ajax/libs/boot
By using our site, you acknowledge that you have read and understand our Cookie Policy
validator/0.4.5/css/bootstrapvalidator.min.css" , Privacy Policy, and our Terms of Service.
rel="sty
 <link href="http://netdna.bootstrapcdn.com/font-awesom
awesome.min.css" rel="stylesheet">
<link href="font-awesome-4.3.0/css/font-awesome.min.cs
<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"></s

<script src="https://ajax.googleapis.com/ajax/libs/jqu
</script>
<!-- FormValidation plugin and the class supports vali
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/
</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/boo
validator/0.4.5/js/bootstrapvalidator.min.js"></script>

<script
src="https://cdnjs.cloudflare.com/ajax/libs/formvalidati
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/formvalidati
</script>
</head>

<form id="bookForm" method="post" action="target.php" cl

autocomplete="off">
<div class="form-group">

<div class="col-sm-3">
<input type="text" class="form-control" name="titl
</div>
<div class="col-sm-4">
<input type="text" class="form-control" name="isbn
Tag(KVBXXXX1DESXXXX)" />
</div>
<div class="col-sm-3">
<input type="text" class="form-control" name="pric
</div>
<div class="col-sm-1">
<button type="button" class="btn btn-default addBu
</button>
By using our site, you acknowledge</div>
that you have read and understand our Cookie Policy, Privacy Policy, and our Terms of Service.
</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="titl
</div>
<div class="col-sm-4">
<input type="text" class="form-control" name="isbn
Tag(KVBXXXX1DESXXXX)" />
</div>
<div class="col-sm-3">
<input type="text" class="form-control" name="pric
</div>
<div class="col-sm-1">
<button type="button" class="btn btn-default remov
</i>
</button>
</div>
</div>

<div class="form-group">
<div class="col-xs-5 ">
<button type="submit" class="btn btn-default">Subm
</div>
</div>
</form>

Run code snippet Expand snippet

I have changed book[0].title to title[] and same way all

other field names. Also the code of the target.php has
been changed to

<?php
//var_dump($_POST);

print_r($_POST['title']);
echo '<br/>';
print_r($_POST['isbn']);
echo '<br/>';
print_r($_POST['price']);

By using our site, you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our Terms of Service.
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] => )

answered Feb 26 '16 at 6:18

Basati Naveen
105 2 15

By using our site, you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our Terms of Service.