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

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!.

  jquery AJAX Dynamically Add remove PHP MySQLi

File Structure

index.php
add_fields.js
do_form_data.php

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.

  JQuery Push Key And Value Into An Array

Leave a Reply

avatar
  Subscribe  
Notify of