How to keep modal window open on form submit?

[Joanne Masterson]

Is there any way to keep a modal window open after a form is submitted?

I am using Fast Secure Contact forms for the form in WordPress. And I’m using the PopPop plugin to display the form in a modal window.

The problem is that the modal window closes on submit. This prevents visitors from seeing success or error messages .

There are threads like these to explain what to do in similar cases, like this one:

http://stackoverflow.com/questions/11868599/how-to-get-twitter-bootstrap-modals-to-stay-open-on-form-submit

but I am not sure how to apply them to my page here (see “Introductory Consultation” link at bottom):

http://www.potentio.us/expertise/

Suggestions appreciated.

[Joanne Masterson]

Alternatively, is there any way to redirect the user to a success or error page, if it is not possible to keep the form open?

Hmm…

[nkrisc]

The second answer in the stackoverflow link you provided seems like a good approach for your case. If you submit the form through an AJAX call you won’t have to reload the page and can display message back to the user based on the outcome of the call.

That said, from a UX perspective, there’s probably not much reason to keep them on the form in cases of success anyway, but instead display a success message either inline on the page itself o as a modal as well.

In the case of error messages, you should be doing some kind of front-end validation before the form is even submitted to make sure the fields have appropriate data and are formatted appropriately. Only in cases where some server-side error comes up would you encounter the original case you presented.

[Joanne Masterson]

Thanks nkrisc

I appreciate your help.

I do hope to work with the form as it is. Validation before submit is ideal. However, the form plugin does not validate until after the form is submitted.

So, I’d like to try your suggestion to use the 2nd answer, which is to implement this script:

$(function() {
$('#your_form_id').bind('submit', function() {
$.ajax({
url: "your_php_script.php",
type: "POST",
data: {"formFieldName" : formFieldValue}, // here build JSON object with your form data
dataType: "json",
contentType: "application/json",
success: function(msg) {
// this is returned value from your PHP script
//your PHP script needs to send back JSON headers + JSON object, not new HTML document!
// update your "message" element in the modal
$("#message_element_id").text(msg);
}
});
});
};

So, would i wrap that in tags and put it in a function to add it to the ?

Just not sure what to do with the code above.

[Author]

Posts