Morioh
Login
Iliana Welch

Iliana Welch

1 year ago

How to Get Attribute Values with jQuery

Dynamically Add Remove input fields using JQuery Ajax Example with demo. The example code displays how to generate input fields on the fly in a form as well as submit the HTML input field’s value into the mysql database.

PHP – Dynamically Add Remove input fields using JQuery Ajax Example with Demo

Step 1: Create Database Table

CREATE TABLE IF NOT EXISTS `category` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci AUTO_INCREMENT=24 ;

Step 2: Create index.php File

index.php

<!DOCTYPE html>
<html>
<head>
<title>PHP - Dynamically Add or Remove input fields using JQuery - www.pakainfo.com</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2 align="center">PHP - Dynamically Add or Remove input fields using JQuery - www.pakainfo.com</h2>
<div class="form-group">
<form name="cat_name" id="cat_name">
<div class="table-responsive">
<table class="table table-bordered" id="livemode_field">
<tr>
<td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" required="" /></td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
</tr>
</table>
<input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
</div>
</form>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
var postURL = "/do_submit.php";
var i=1;
$('#add').click(function(){
i++;
$('#livemode_field').append('<tr id="row'+i+'" class="livemode-added"><td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" required /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$('#submit').click(function(){
$.ajax({
url:postURL,
method:"POST",
data:$('#cat_name').serialize(),
type:'json',
success:function(data)
{
i=1;
$('.livemode-added').remove();
$('#cat_name')[0].reset();
alert('Record Inserted Successfully.');
}
});
});
});
</script>
</body>
</html>

Step 3: Create do_submit.php File

do_submit.php

<?php
define (DB_USER, "root");
define (DB_PASSWORD, "DSf89745f");
define (DB_DATABASE, "category_list");
define (DB_HOST, "localhost");
$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE);

if(!empty($_POST["name"])){

foreach ($_POST["name"] as $key => $value) {
$sql = "INSERT INTO category(name) VALUES ('".$value."')";
$mysqli->query($sql);
}
echo json_encode(['success'=>'Categories Inserted successfully.']);
}
?>

I hope you get an idea about add remove input fields dynamically with jquery and submit to database.

#javascript #jquery 

How to Get Attribute Values with jQuery
1.00 GEEK