Modal Popup Form Submit in Ajax with PHP and Mysql

Modal Popup Form Submit in Ajax with PHP and Mysql

In this Post We Will Explain About is Modal Popup Form Submit in Ajax 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 Bootstrap Modal with Dynamic MySQL Data using Ajax & PHPExample

In this post we will show you Best way to implement jqury Submit Form Using Bootstrap Modal using PHP and mysql, hear for jQuery AJAX form submit using twitter bootstrap modalwith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Read Also:  Angular 7 Tutorial With Example from scratch

File Structure

External Libs
index.php
do_form_process.js
happy_message.php

Include External Libs

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-theme.min.css">
<script src="2.1.3/jquery.min.js"></script>
<script src="3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="happy_message.js"></script>

index.php

	<div id="happy_message"><button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#happy_message-modal">Happy Modal Form</button></div>
	
<div id="happy_message-modal" class="modal fade" role="dialog">
<!-- Modal popup data content-->
<div class="modal-dialog">
<div class="modal-content">
	<div class="modal-header">
	<!-- here close button developed by : Pakainfo.com-->
	<a class="close" data-dismiss="modal">×</a>
	<h3>Send Happy</h3>
	</div>
	<div class="modal-body">
		<form class="happy_message" name="happy_message">
		<strong>Name</strong>
		<br />
		<input type="text" name="name" class="input-xlarge" value="Laeeq">
		<br /><br /><strong>client_email</strong><br />
		<input type="email" name="client_email" class="input-xlarge" value="[email protected]">
		<br /><br /><strong>Comments</strong><br />
		<textarea name="Comments" class="input-xlarge">Thanks for Pakainfo.com tutorials and demos!</textarea>
		</form>
	</div>
	<div class="modal-footer">
		<button class="btn btn-success" id="submit">Send</button>
		<a href="#" class="btn" data-dismiss="modal">Close</a>
	</div>
</div>
</div>
</div>

do_form_process.js

$(document).ready(function(){
	$("button#submit").click(function(){
			$.ajax({
			type: "POST",
			url: "happy_message.php",
			data: $('form.happy_message').serialize(),
			success: function(Comments){
			$("#happy_message").html(Comments)
				$("#happy_message-modal").modal('hide');
			},
			error: function(){
				alert("Error");
			}
		});
	});
});

happy_message.php

<?php
if (isset($_POST['name'])) {
	$name = strip_tags($_POST['name']);
	$client_email = strip_tags($_POST['client_email']);
	$Comments = strip_tags($_POST['Comments']);
	echo "<strong>Name</strong>: ".$name."</br>";
	echo "<strong>client_email</strong>: ".$client_email."</br>";
	echo "<strong>Comments</strong>: ".$Comments."</br>";
	echo "<span class='label label-info'>Your happy_message has been submitted very success with above details!</span>";
}
?>

Example

I hope you have Got What is Bootstrap Modal Form Submit with Ajax & PHP 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.