Dynamically Add-remove Form Fields in jquery with PHP and mysql

Dynamically Add-remove Form Fields in jquery with PHP and mysql

In this Post We Will Explain About is Dynamically Add-remove Form Fields in jquery with PHP and mysql With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to dynamically add / remove input fields in php with jquery ajaxExample

In this post we will show you Best way to implement Add Fields Dynamically using jQuery and PHP, hear for dynamically add input fields and submit to database with javascript and phpwith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

File Structure

index.php
add_fields.js
do_form_data.php

Read Also:  How To Add/Remove Input Fields Dynamically with jQuery?

index.php

	
<form action="do_form_data.php" method="post">
	<div class="my_content_data">
	<div>
	<input type="text" name="mul_field[]" value=""/>
	<a href="javascript:void(0);" class="new_add_button" title="Add simple field"><img src="add-icon.png"/></a>
	</div>
	</div>
	<!-- Save Button : Pakainfo.com-->
	<input type="submit" name="save" value="Submit"/>
</form>

add_fields.js

$(document).ready(function(){
	var maxi_fields = 10;
	var new_add_button = $('.new_add_button');
	var my_content_data = $('.my_content_data');
	var new_field_html = '<div><input type="text" name="mul_field[]" value=""/><a href="javascript:void(0);" class="delete_input_button" title="Delete field"><img src="remove-icon.png"/></a></div>';
	var total_count = 1;
	
	//<!--  Add simple button dynamically: Pakainfo.com-->
	$(new_add_button).click(function(){
		if(total_count < maxi_fields){
		total_count++;
		$(my_content_data).append(new_field_html);
		}
	});
	// Delete dynamically added button : Pakainfo.com
	$(my_content_data).on('click', '.delete_input_button', function(e){
		e.preventDefault();
		$(this).parent('div').remove();
		total_count--;
	});
});

do_form_data.php

<?php
if(isset($_REQUEST['mul_field'])){
	print '<pre>';
	print_r($_REQUEST['mul_field']);
	print '</pre>';
}
?>

Example

I hope you have Got What is dynamically add input fields and submit to database with jquery and php Example And how it works.I would Like to have FeadBack From My Blog(Pakainfo.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(Pakainfo.com) Are Most Always Welcome.