By sending or entering or storing multiple data with a single click you will have to use Jquery and javcript code.
Here we using 2 file for Insert data from MySql database using Ajax.
- index.php
- insert-ajax.php
user_data
CREATE TABLE `user_data` (
`id` int(11) NOT NULL,
`Name` varchar(100) NOT NULL,
`email` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;The CREATE TABLE in MYSQL database is used to create a new table
#index.php
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div style="margin: auto;width: 60%;">
<form id="form1" name="form1" method="post">
<div class="form-group">
<label for="email">Student Name:</label>
<input type="text" name="sname" class="form-control" id="name">
</div>
<div class="form-group">
<label for="pwd">Student email:</label>
<input type="text" name="email" class="form-control" id="email">
</div>
<input type="button" name="send" class="btn btn-primary" value="add data" id="butsend">
<input type="button" name="save" class="btn btn-primary" value="Save to database" id="butsave">
</form>
<table id="table1" name="table1" class="table table-bordered">
<tbody>
<tr>
<th>ID</th>
<th>Name</th>
<th>email</th>
<th>Action</th>
<tr>
</tbody>
</table>
</div>
<script>
$(document).ready(function() {
var id = 1;
/*Assigning id and class for tr and td tags for separation.*/
$("#butsend").click(function() {
var newid = id++;
$("#table1").append('<tr valign="top" id="' + newid + '">\n\
<td width="100px" >' + newid + '</td>\n\
<td width="100px" class="name' + newid + '">' + $("#name").val() + '</td>\n\
<td width="100px" class="email' + newid + '">' + $("#email").val() + '</td>\n\
<td width="100px"><a href="javascript:void(0);" class="remCF">Remove</a></td>\n\ </tr>');
});
$("#table1").on('click', '.remCF', function() {
$(this).parent().parent().remove();
});
/*crating new click event for save button*/
$("#butsave").click(function() {
var lastRowId = $('#table1 tr:last').attr("id"); /*finds id of the last row inside table*/
var name = new Array();
var email = new Array();
for (var i = 1; i <= lastRowId; i++) {
name.push($("#" + i + " .name" + i).html()); /*pushing all the names listed in the table*/
email.push($("#" + i + " .email" + i).html()); /*pushing all the emails listed in the table*/
}
var sendName = JSON.stringify(name);
var sendEmail = JSON.stringify(email);
$.ajax({
url: "save.php",
type: "post",
data: {name: sendName, email: sendEmail},
success: function(data) {
alert(data); /* alerts the response from php.*/
}
});
});
});
</script>
</body>
</html>The JSON.stringify () method converts a JavaScript object or value to a JSON string, optionally replacing values if a replacement function is specified or optionally including only the specified properties if a replacement array is specified.
insert-ajax.php
<?php
$nameArr = json_decode($_POST["name"]);
$emailArr = json_decode($_POST["email"]);
$con = mysqli_connect("localhost", "root", "", "php_ajax");
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
for ($i = 0; $i < count($nameArr); $i++) {
if (($nameArr[$i] != "")) { /* not allowing empty values and the row which has been removed. */
$sql = "INSERT INTO user_data (Name, email)
VALUES
('$nameArr[$i]','$emailArr[$i]')";
if (!mysqli_query($con, $sql)) {
die('Error: ' . mysqli_error($con));
}
}
}
Print "Data added Successfully !";
mysqli_close($con);
?>