Dynamically add remove input fields in PHP with Jquery Ajax
This tutorial is relating to How to dynamically add remove input fields in PHP with Jquery Ajax. Users can insert more than one data at the same time. we use an ajax function call for insert data.
Users can add more fields by clicking on the add more button then a new textbox will appear on the webpage with a remove button. the user wants to remove some field then it can remove input fields on click on the remove button.
index.php
<html>
<head>
<title>How to dynamically add remove input fields in PHP with Jquery Ajax</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.padding_t_b {
padding: 3px 0;
}
</style>
</head>
<body>
<div class="container">
<br>
<h2 align="center">How to dynamically add remove input fields in PHP with Jquery Ajax</h2>
<br>
<form name="dynamic_form" id="dynamic_form">
<div id="dynamic_field_append">
<div class="row padding_t_b">
<div class="col-md-6 col-md-offset-2">
<input type="text" name="name[]" placeholder="Enter your Name" class="form-control">
</div>
<div class="col-md-4">
<button type="button" name="add" id="add_field" class="btn btn-success"> Add More (+) </button>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12 text-center">
<input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
</div>
</div>
</form>
</div>
<script>
$(document).ready(function(){
var i = 1;
$('#add_field').click(function(){
i++;
$('#dynamic_field_append').append('<div class="row padding_t_b" id="row_remove'+i+'"><div class="col-md-6 col-md-offset-2"><input type="text" name="name[]" placeholder="Enter your Name" class="form-control" /></div><div class="col-md-4"><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">Remove (X)</button></div></div>');
});
$(document).on('click', '.btn_remove', function() {
var button_id = $(this).attr("id");
$('#row_remove'+button_id+'').remove();
});
$('#submit').click(function() {
$.ajax({
url:"process.php",
method:"POST",
data:$('#dynamic_form').serialize(),
success:function(data) {
alert(data);
$('#dynamic_form')[0].reset();
}
});
});
});
</script>
</body>
</html>SQL Table
CREATE TABLE devnote_dynamic.demo ( id INT(11) NOT NULL AUTO_INCREMENT , name VARCHAR(255) NULL , created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP , PRIMARY KEY (id)) ENGINE = InnoDB;process.php
<?php
$connect = mysqli_connect("localhost", "root", "", "db_name");
$number = count($_POST["name"]);
if($number > 0) {
$message = false;
for($i=0; $i<$number; $i++) {
if(trim($_POST["name"][$i] != '')) {
$sql = "INSERT INTO table_name (name) VALUES('".$_POST["name"][$i]."')";
mysqli_query($connect, $sql);
$message = true;
} else {
echo "Please Enter Name";
}
}
if($message == true){
echo "Inserted Successfully!";
}
} else {
echo "Something we are wrong!";
}
?>
