Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Dan Ridley
PLUS
Dan Ridley
Courses Plus Student 14,839 Points
Posted by Dan Ridley
Dan Ridley
Courses Plus Student 14,839 Points

Keep a Modal Window open after form submission.

Hello everyone. I am using Twitter Bootstrap's Modal Window feature to display a contact form. The Form has back end validation and when you click the submit button, the window closes and does not display a success or errors unless I open the modal window again. Can anyone help me figure out how to keep the window from closing after pressing submit?

7 Answers

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Dan,

If none of Dave's suggestions end up working out or if it's not desirable to reopen the modal then I think you can try intercepting the submit button as Adam has suggested.

You can prevent normal form submission and then send the data yourself with ajax. Then you can get the response back from your script and display it in the modal.

Here's a few links that might help you with that.

From the jQuery docs, see last example:
https://api.jquery.com/jQuery.post/

Here's some stackoverflow solutions using serialize():
http://stackoverflow.com/questions/1960240/jquery-ajax-submit-form

Maybe this answer in particular: http://stackoverflow.com/a/6960586

Dave McFarland
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

I think Dan must already be using AJAX to submit the form details and retrieve a response that appears in the modal dialog -- if not, the browser would navigate to the form processing script, exiting the page with the modal dialog.

Dan Ridley, maybe you can post a live example so we can see what's going on.

Dave McFarland
STAFF
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

I'm not that familiar with the Bootstrap modal window, but I did quickly check the documentation: http://getbootstrap.com/javascript/#modals

There are a couple of things you might try. The modal dialog has a few special "events" that you can add programming to. In particular, there's an event called hide.bs.modal that is triggered as soon as the hide method is called -- in other words you can run some programming as soon as the modal is instructed to close. So you might be able to use that event to either 1. prevent the dialog from closing or 2. immediately open the dialog again.

Try this code to see if you can prevent the dialog from closing:

$('#mymodal').on('hidden.bs.modal', function() {
  return false;
});

Replace #mymodal with whatever ID you've applied to the html for the modal dialog.

If that doesn't work you can try to open the dialog again immediately like this:

$('#mymodal').on('hidden.bs.modal', function() {
  this.modal('show');
});
Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Believe you can also use the following

$( "form" ).submit(function( event ) {
  event.preventDefault();
});
Dan Ridley
PLUS
Dan Ridley
Courses Plus Student 14,839 Points
Dan Ridley
Dan Ridley
Courses Plus Student 14,839 Points

Hey guys! I currently do not have my files in front of me but I greatly appreciate your willingness to help me with this issue. I will give your suggestions a try to night when I get home. I am running WordPress for this project and using Bootstrap as my responsive framework. I am using a WordPress plug in to create and submit the form.

Dan Ridley
PLUS
Dan Ridley
Courses Plus Student 14,839 Points
Dan Ridley
Dan Ridley
Courses Plus Student 14,839 Points

Hey guys! thanks for the suggestions! I tried all of the methods that you told me to try and the only one that did anything was Adam's. When I used the code that Adam said, the modal and form didn't do anything at all. The form didn't run but the modal did not close. So, we got the modal to stay open on submit but the form doesn't process.

Dave, I tried the code you said to try and nothing happened after I submitted the form, I inserted the code after the modal and when that did not work I inserted it at the end of my page and that did nothing either. I hope I was putting it in the right place. Any help would be greatly appreciated.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Dan,

Could you tell us what plugin you're using? That may help with the solution.

To get some clarification here -

Before you implemented any of these solutions, does the form submit to itself and redirect to itself and you get a full page reload which is what closes the modal? My answer was based off this assumption. Or does the form submit, the modal closes, but there is no page reload?

As far as I can tell, the only ways to close a bootstrap modal are:

  1. Through user action by clicking the "X" or the "close" button
  2. Closing it programmatically
  3. Leaving or reloading the page.

So I would think that either 2 or 3 is happening unless there are some other ways a modal can be closed that I've overlooked.

Adam Sackfield can correct me if I'm wrong but I think his answer was only meant as a starting point. That code will intercept the submit button and prevent normal form submission but you then have to manually submit the form data. My answer was meant to be an extension of his answer.

Dan Ridley
PLUS
Dan Ridley
Courses Plus Student 14,839 Points
Dan Ridley
Dan Ridley
Courses Plus Student 14,839 Points

Hey guys, I am using Contact Form by BestWebSoft. I am not sure what it does because it is a plugin. The browser does not reload when it submits. The form submits and the modal closes with no reload.

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Dan Ridley , Have you gotten this resolved yet?

All the research I've done seems to suggest that as long as you have an ajax enabled form it should work out.

I looked up what info I could on "Contact Form" and if it is an ajax enabled form then it doesn't seem to be advertised as such. I tried looking through the source code for it and I don't think I found anything to indicate it uses ajax. There was a lot of code though and I could have easily missed it.

Are you developing locally? Is it possible that it's happening so fast that it doesn't seem like a redirection?

One quick thing you could try is have the net panel open in developer tools when you go to the contact page. Then go ahead and submit the form and see what http response status codes you see for the page. If you see 302 for your contact page then I think that means the page is redirecting to itself and it's likely you do not have an ajax enabled form.

If the page is redirecting to itself then that could explain why the modal closes.

If you determine it's not ajax enabled then your only option might be to fork the plugin and make the necessary changes so it uses ajax. Check the license it uses. If this is beyond your skill set or the scope of the project then I recommend you switch to another plugin that does say it is ajax enabled.

Let us know what you come up with so future readers can benefit from the solution.

Dan Ridley
PLUS
Dan Ridley
Courses Plus Student 14,839 Points
Dan Ridley
Dan Ridley
Courses Plus Student 14,839 Points

Hey guys, thank you so much for all the help you have givin me. It look like if I use Contact Form 7 for wordpress it seems to solve the problem. Thanks so much for your help and research. thats why I love this forum.