In this article we can see about submitting a form using twitter boostrap modal . Twitter bootstrap contains a modal which has responsive features and beautiful CSS styles.
Here we required two files:
» index.html
» process.php
Javascript and CSS files :
Include Jquery and Bootstrap files in index.html
<link href="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
Form content :
Here modal is referred by div id “form-content” which is basically hidden while loading and the form is referred by class “contact”.
<div id="thanks"><p><a data-toggle="modal" href="#form-content" class="btn btn-primary">Contact us</a></p></div> <!-- model content --> <div id="form-content" class="modal hide fade in" style="display: none; "> <div class="modal-header"> <a class="close" data-dismiss="modal">×</a> <h3>Contact us</h3> </div> <div> <form class="contact"> <fieldset> <div class="modal-body"> <ul class="nav nav-list"> <li class="nav-header">Name</li> <li><input class="input-xlarge" value=" krizna" type="text" name="name"></li> <li class="nav-header">Email</li> <li><input class="input-xlarge" value=" user@krizna.com" type="text" name="Email"></li> <li class="nav-header">Message</li> <li><textarea class="input-xlarge" name="sug" rows="3"> Thanks for the article and demo </textarea></li> </ul> </div> </fieldset> </form> </div> <div class="modal-footer"> <button class="btn btn-success" id="submit">submit</button> <a href="#" class="btn" data-dismiss="modal">Close</a> </div> </div>
Jquery code :
The below code will submit the form to process.php file and shows the processed results in the “thanks” div .
<script>
$(function() {
//twitter bootstrap script
$("button#submit").click(function(){
$.ajax({
type: "POST",
url: "process.php",
data: $('form.contact').serialize(),
success: function(msg){
$("#thanks").html(msg)
$("#form-content").modal('hide');
},
error: function(){
alert("failure");
}
});
});
});
</script>» process.php
The below php code will get the values from the form for processing .
<?php
if (isset($_POST['name'])) {
$name = strip_tags($_POST['name']);
$email = strip_tags($_POST['Email']);
$sug = strip_tags($_POST['sug']);
echo "Name =".$name."</br>";
echo "Email =".$email."</br>";
echo "Message =".$sug."</br>";
echo "<span class="label label-info" >your message has been submitted .. Thanks you</span>";
}?>» index.html Full code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery AJAX form submit using twitter bootstrap modal</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<link href="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h4>Demo Page</h4>
<div id="thanks"><p><a data-toggle="modal" href="#form-content" class="btn btn-primary">Contact us</a></p></div>
<!-- model content -->
<div id="form-content" class="modal hide fade in" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Contact us</h3>
</div>
<div>
<form class="contact">
<fieldset>
<div class="modal-body">
<ul class="nav nav-list">
<li class="nav-header">Name</li>
<li><input class="input-xlarge" value=" krizna" type="text" name="name"></li>
<li class="nav-header">Email</li>
<li><input class="input-xlarge" value=" user@krizna.com" type="text" name="Email"></li>
<li class="nav-header">Message</li>
<li><textarea class="input-xlarge" name="sug" rows="3"> Thanks for the article and demo
</textarea></li>
</ul>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-success" id="submit">submit</button>
<a href="#" class="btn" data-dismiss="modal">Close</a>
</div>
</div>
</div>
<script>
$(function() {
//twitter bootstrap script
$("button#submit").click(function(){
$.ajax({
type: "POST",
url: "process.php",
data: $('form.contact').serialize(),
success: function(msg){
$("#thanks").html(msg)
$("#form-content").modal('hide');
},
error: function(){
alert("failure");
}
});
});
});
</script>
</body>
</html>
Great tutorial. But I’m having a problem. The JavaScript you’ve provided at the end of form is bypassing my validation. Any suggestions?
Great tutorial. But I’m having a problem. The JavaScript you’ve provided at the end of form is bypassing my validation. Any suggestions?
Thank you so much , This was a great tutorial.
Thank you so much , This was a great tutorial.
Is there a way to hide the submit button after a successful registration?
I use a double opt-in signup and put the return messages from my signup script in the same modal just above the form.
When I get a successful signup I show the message “Please go and check you email” and would like to remove/hide the submit button, otherwize if the click again they get a “This email is already registered” message.
Is there a way to hide the submit button after a successful registration?
I use a double opt-in signup and put the return messages from my signup script in the same modal just above the form.
When I get a successful signup I show the message “Please go and check you email” and would like to remove/hide the submit button, otherwize if the click again they get a “This email is already registered” message.
alert failure?
alert failure?
where do i put the email were i want the message to be delivered?
where do i put the email were i want the message to be delivered?
Hi. If I update to the latest version of bootstrap, the modal popup no longer appears. Any thoughts on what I need to do will be appreciated. Thanks
$(“#your-form-id”).removeClass(‘hide’);
Hi. If I update to the latest version of bootstrap, the modal popup no longer appears. Any thoughts on what I need to do will be appreciated. Thanks
$(“#your-form-id”).removeClass(‘hide’);
javascript alert failure on your code?
you should have tested it before posting?
javascript alert failure on your code?
you should have tested it before posting?
My process.php can’t get POST data from other include file. It’s problem..
My process.php can’t get POST data from other include file. It’s problem..
try $.post or XMLHttpRequest
I loved as much as you will receive carried out right here.
The sketch is attractive, your authored subject matter stylish.
nonetheless, you command get got an edginess over that you wish
be delivering the following. unwell unquestionably come further formerly again as exactly the same nearly very often inside case you shield this hike.
How valide data inputs ?
where are you From dear
‘
How can vilidade its ?
How validade its fields inputs ?
i dont wnat to have ajax is there any simple way like i post from a form to a modal using hidden inputs to process data
Plugins For Comment are some good