My Problem :
I have a modal form which pops up when I click on a submit button . The modal form allows the user to fill in a set of fields and request for a demo from an organization . The form data is then inserted into a mysql database using codeigniter . When the user submits the validated form , the modal popup simply displays a success message and a dynamically generated button (replacing the previous form ), which allows the user to close the modal form .
When I click on the dynamically generated close button , the modal form closes and refreshes the page .
However , I am unable to do the same (refresh the page) when I click on the close icon on the top right corner on the modal form .
I have tried using the following code , but I am not able to refresh the page on the close event of the modal popup.
$('#mymodal').on("hidden", function() {
location.reload();;
});
I have also tried using the following code :
$('#mymodal').on("hidden.bs.modal", function() {
location.reload();;
});
I have used jquery.mask.js and jquery.validate.min.js for form validation for the modal form.
My research :
I have gone through the following questions on Stack Overflow :
- Refresh parent page after closing modal
- How to reload page on closing a Bootstrap 3 modal
- Refresh parent page when jQuery UI Dialog is closed
- Hook into dialog close event
My modal form :
<div class="container">
<!-- <form name="" id="" action="" method="get"> -->
<!-- Trigger the modal with a button -->
<div class="col-md-2 col-md-offset-5">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" style="margin:0 auto;">Request a Demo</button>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" id="idmodaldialog">
<!-- Modal content-->
<form name="frmdemo" id="idfrmdemo" method="post">
<div class="modal-content">
<div class="modal-header" align="center">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><strong>Request a Demo</strong></h4>
</div>
<div class="modal-body" id="idmodalcontent">
<div class="row">
<div class="form-group col-md-6">
<label for="txtfirstname">FIRST NAME</label>
<input name="txtfirstname" type="text" class="form-control required" placeholder="Please enter your first name" id="idfirstname" >
</div>
<div class="form-group col-md-6">
<label for="txtlastname">LAST NAME</label>
<input name="txtlastname" type="text" class="form-control required" placeholder="Please enter your last name" id="idlastname">
</div>
</div>
<div class="form-group">
<label for="Email">EMAIL</label>
<input type="email" name="txtemail" class="form-control" placeholder="Please enter your email id" id="idemail">
<div class="divstyle">(Please enter your email id in block letters)</div>
</div>
<div class="form-group">
<label for="idcompany">COMPANY</label>
<input type="text" name="txtcompany" placeholder="Please enter the name of your company" class="form-control" id="idcompany" >
</div>
<div class="form-group">
<label for="Phone">PHONE</label>
<input type="tel" name="txtphone" placeholder="Please enter your phone number" class="form-control" id="idphone">
</div>
<div class="form-group">
<label for="">MODE OF CONTACT</label>
<select name="selmode" id="idmode" class="form-control">
<option value="">Select</option>
<option value="email">Email</option>
<option value="phone">Phone</option>
</select>
</div>
</div>
<div class="modal-footer">
<input type="submit" id="idsubmit" name="submit" value="Submit" class="btn btn-warning" />
</div>
</div>
</form>
</div>
</div>
</div>
My Jquery Form validation Code :
// Wait for the DOM to be ready
$(function() {
$('#mymodal').on("hidden", function() {
location.reload();;
});
$('#idphone').mask('(000) 000-0000');
// Initialize form validation on the registration form.
// It has the name attribute "frmdemo"
$("form[name='frmdemo']").validate({
// Specify validation rules
rules: {
// The key name on the left side is the name attribute
// of an input field. Validation rules are defined
// on the right side
"txtfirstname": {required:true,firstnameval:true},
"txtlastname": {required:true,lastnameval:true},
"txtemail": {
required: true,
// Specify that email should be validated
// by the built-in "email" rule
email: true,
emailval:true
},
"txtcompany": {
required: true,
companyval:false
},
"txtphone" : {
required : true,
usphoneval:true
},
"selmode" :{
required : true
}
},
// Specify validation error messages
messages: {
txtfirstname: {
required:"Please enter your first name" ,
firstnameval:"Enter proper first name"
//firstnameval:"Enter only alphabets ",
},
txtlastname: {
required:"Please enter your last name " ,
lastnameval:"Enter proper last name"
//firstnameval:"Enter only alphabets ",
},
txtemail: {
required : "Please enter a valid email address",
emailval : "Please enter your corporate email id"
},
txtcompany: {
required :"Please enter the name of your company",
companyval:"Enter a proper company name"
},
txtphone: {
required :"Please enter your phone number",
usphoneval :"Please enter a valid phone number"
},
selmode:"Please select the mode in which we should contact you"
},
// Make sure the form is submitted to the destination defined
// in the "action" attribute of the form when valid
submitHandler: function(form) {
// form.submit();
$('#idmodalcontent').html('Form submitted successfully');
var input = $('<input/>').attr({ type: 'button', name:'btnsubmit', value:'Close', id:'idclose',"class":"btn btn-warning"});
//"data-dismiss":'modal',
$(".modal-footer").html(input);
$("#idclose").on("click",function(){
location.reload();
});
/*$('#idmodalcontent').modal({
onClose: function(dialog){
location.reload(true);
}
});
*/
return false;
}
});
//add your own custom validation rule
//US phone format
$.validator.addMethod("usphoneval", function(value,element)
{
//^\(?([d]{3})\)?[. ]?([d]{3})[. ]?([d]{4})$
if (/^\(?([0-9]{3})\)?[ ]?([0-9]{3})[-]?([0-9]{4})$/.test(value))
{
return true;
} else {
return false;
}
},function()
{
});
//first name : only alphabets
$.validator.addMethod("firstnameval", function(value,element)
{
//^\(?([d]{3})\)?[. ]?([d]{3})[. ]?([d]{4})$
if (/^[a-zA-Z]{1,256}$/.test(value))
{
return true;
} else {
return false;
}
},function()
{
});
$.validator.addMethod("lastnameval", function(value,element)
{
//first character alphabet - rest alphanumeric
if (/^[a-zA-Z][a-zA-Z0-9]{0,256}$/.test(value))
{
return true;
} else {
return false;
}
},function()
{
});
//validate company - first character alphabet,rest only alphabet,dot,spaces
$.validator.addMethod("companyval", function(value,element)
{
if (/^[a-zA-Z][a-zA-Z. ]{1,256}$/.test(value))
{
return true;
} else {
return false;
}
},function()
{
});
$.validator.addMethod("emailval", function(value,element)
{
var n = value.lastIndexOf('@');
var extension = value.substring(n+1).toLowerCase();
if (extension == "gmail.com" || extension=="aol.com"|| extension=="facebook.com"|| extension=="googlemail.com"
|| extension=="hotmail.com" || extension=="hotmail.co.uk" || extension=="yahoo.com" || extension=="yahoo.co.uk"
|| extension=="live.com" || extension=="att.net" || extension=="comcast.net" || extension=="gmx.com"
|| extension=="mac.com" || extension=="me.com" || extension=="sbcglobal.net" || extension=="verizon.net"
|| extension=="msn.com" || extension=="mail.com"|| extension=="email.com" || extension=="games.com"
|| extension=="gmx.net" || extension=="hush.com" ) {
return false ;
} else {
return true;
}
},function()
{
});
});
