Run javascript on form submit with the following examples. These examples use triggers included in Formidable Forms.
Hide confirmation message after 5 seconds
If you are showing your form with your success message and would like to hide it after x seconds you can use this code in your success message:
Your submission was successfully saved.
<script type="text/javascript">
jQuery(document).ready(function($){
$(".frm_message").delay(5000).fadeOut(1000); // change 5000 to number of seconds in milliseconds
});
</script>
Perform action after form submit
If you would like to perform a jQuery or JavaScript action after a form is submitted, there are three different events you may use, depending on the "On Submit" action you have selected in your form's Settings.
After success message
You may use the frmFormComplete event for a javascript or jQuery form submit callback after a success message is displayed. A basic example is shown below.
<script>
jQuery(document).ready(function($){
$(document).on( 'frmFormComplete', function( event, form, response ) {
var formID = $(form).find('input[name="form_id"]').val();
});
});</script>
The form object includes the form element that was submitted. The response object includes the content that is displayed in the success message. This script may be placed within a form's success message or it may be loaded on the page where the form is published. It cannot go in a form's Customize HTML.
Note: To use this function, Submit this form with AJAX must be enabled in the form settings.
After AJAX error message
You may use the frmFormErrors event for a javascript or jQuery form submit callback after an error message is displayed, when the form is set to submit with AJAX. An example is shown below.
<script type="text/javascript">
jQuery(document).ready(function ($) {
$(document).on('frmFormErrors', function( event, form, response ){
alert("errors");
});
});
</script>
Before redirect
You may use the frmBeforeFormRedirect event to run custom code before a form is redirected to a new page. Please note that this may only be used if 'Submit with AJAX' is selected in your form's Settings. A basic example is shown below.
<script>
jQuery(document).ready(function($){
$(document).on( 'frmBeforeFormRedirect', function( event, form, response ) {
var formID = $(form).find('input[name="form_id"]').val();
});
});</script>
The form object includes the form element that was submitted. The response object includes the url that the page will redirect to. This script may be placed in a form's Customize HTML.
After another page's content is shown
You may use the frmPageChanged event to run custom code after the form is replaced with content from another page. A basic example is shown below.
<script>
jQuery(document).ready(function($){
$(document).on( 'frmPageChanged', function( event, form, response ) {
var formID = $(form).find('input[name="form_id"]').val();
});
});</script>
The form object includes the form element that was submitted. The response object includes the content that is displayed from another page. This script must be included outside of the form's HTML in order to be used.
Redirect to URL in new tab
Update: This can be done without any code. See how to redirect after form submit without any code!
If you still want to use code, you can add a redirect Javascript in the "update confirmation message".
<script>
window.open('http://www.yoururl.com', '_blank');
</script>
Redirect to URL in new tab Method 2
The down side of option 1 is that browser pop-up blockers can prevent your redirect window from opening. Option 2 provides another way to open new page/tab on submit without triggering pop-up blockers. To do this, you'll need to go to your form settings -> Customize HTML and add the following to the submit button code just before the [button_action] shortcode.
onclick="window.open('http://yoururl.com', '_blank');"