'submit' event handler only firing once, wont work after first time

Question

I have a simple HTML form that is built using Gravity Forms (I have ZERO control over this for the record, so changing it is out of the question)

The form is simple, one text field for an email and a button. On submit, I have an if-else statement. IF the input is empty, do nothing. ELSE if it contains text, open a new window with a PDF and the form should submit normally.

However, after submitting the form with no text, the gravity forms side of things throws an error to the user "Please enter an email", after that error, my event handler no longer works.

If I try and console log it on submit, it works the first time but if I press submit again, this time fixing the email error, my function doesn't run.

Could anybody tell me what is wrong?

Code:

 const form2 = document.getElementById('gform_2'); form2.addEventListener('submit', function(e) { let input2 = document.getElementById('input_2_2').value; console.log(input2) if (input2 == '') { e.preventDefault(); console.log("Submitted") } else { e.preventDefault(); window.open('PDFLINKHERE.com', '_blank'); form2.submit(); } })

 <form method='post' enctype='multipart/form-data' target='gform_ajax_frame_2' id='gform_2' action='/#gf_2'> <div class='gform_body'> <ul id='gform_fields_2' class='gform_fields top_label form_sublabel_below description_below'> <li id='field_2_1' class='gfield gfield_html gfield_html_formatted gfield_no_follows_desc field_sublabel_below field_description_below gfield_visibility_visible'> <h2 class="join-mailing-title">Free PDF</h2> <h6 class="join-mailing">Submit your details below.</h6> </li> <li id='field_2_2' class='gfield gfield_contains_required field_sublabel_below field_description_below hidden_label gfield_visibility_visible'> <label class='gfield_label' for='input_2_2'>Email Address<span class='gfield_required'>*</span></label> <div class='ginput_container ginput_container_email'> <input name='input_2' id='input_2_2' type='text' value='' class='large' placeholder='Email Address' aria-required="true" aria-invalid="false" /> </div> </li> </ul> </div> <div class='gform_footer top_label'> <input type='submit' id='gform_submit_button_2' class='gform_button button' value='Download PDF' onclick='if(window["gf_submitting_2"]){return false;} window["gf_submitting_2"]=true; ' onkeypress='if( event.keyCode == 13 ){ if(window["gf_submitting_2"]){return false;} window["gf_submitting_2"]=true; jQuery("#gform_2").trigger("submit",[true]); }' /> <input type='hidden' name='gform_ajax' value='form_id=2&amp;title=&amp;description=&amp;tabindex=0' /> <input type='hidden' class='gform_hidden' name='is_submit_2' value='1' /> <input type='hidden' class='gform_hidden' name='gform_submit' value='2' /> <input type='hidden' class='gform_hidden' name='gform_unique_id' value='' /> <input type='hidden' class='gform_hidden' name='state_2' value='WyJbXSIsImE2ZTkyMzgyNjE5MDg2NDBhOGIyMDhiNjExYzY0YmZiIl0=' /> <input type='hidden' class='gform_hidden' name='gform_target_page_number_2' id='gform_target_page_number_2' value='0' /> <input type='hidden' class='gform_hidden' name='gform_source_page_number_2' id='gform_source_page_number_2' value='1' /> <input type='hidden' name='gform_field_values' value='' /> </div> </form>

Answer 1

I found the problem - it was this code in the submit button:

onclick='if(window["gf_submitting_2"]){return false;} window["gf_submitting_2"]=true; ' onkeypress='if( event.keyCode == 13 ){ if(window["gf_submitting_2"]){return false;} window["gf_submitting_2"]=true; jQuery("#gform_2").trigger("submit",[true]); }'

Here's the updated code with a demo:

 const form2 = document.getElementById('gform_2'); form2.addEventListener('submit', function(e) { let input2 = document.getElementById('input_2_2').value; console.log(input2) if (input2 == '') { e.preventDefault(); console.log("Submitted") } else { e.preventDefault(); window.open('PDFLINKHERE.com', '_blank'); form2.submit(); } })

 <form method='post' enctype='multipart/form-data' target='gform_ajax_frame_2' id='gform_2' action='/#gf_2'> <div class='gform_body'> <ul id='gform_fields_2' class='gform_fields top_label form_sublabel_below description_below'> <li id='field_2_1' class='gfield gfield_html gfield_html_formatted gfield_no_follows_desc field_sublabel_below field_description_below gfield_visibility_visible'> <h2 class="join-mailing-title">Free PDF</h2> <h6 class="join-mailing">Submit your details below.</h6> </li> <li id='field_2_2' class='gfield gfield_contains_required field_sublabel_below field_description_below hidden_label gfield_visibility_visible'> <label class='gfield_label' for='input_2_2'>Email Address<span class='gfield_required'>*</span></label> <div class='ginput_container ginput_container_email'> <input name='input_2' id='input_2_2' type='text' value='' class='large' placeholder='Email Address' aria-required="true" aria-invalid="false" /> </div> </li> </ul> </div> <div class='gform_footer top_label'> <input type='submit' id='gform_submit_button_2' class='gform_button button' value='Download PDF' /> <input type='hidden' name='gform_ajax' value='form_id=2&amp;title=&amp;description=&amp;tabindex=0' /> <input type='hidden' class='gform_hidden' name='is_submit_2' value='1' /> <input type='hidden' class='gform_hidden' name='gform_submit' value='2' /> <input type='hidden' class='gform_hidden' name='gform_unique_id' value='' /> <input type='hidden' class='gform_hidden' name='state_2' value='WyJbXSIsImE2ZTkyMzgyNjE5MDg2NDBhOGIyMDhiNjExYzY0YmZiIl0=' /> <input type='hidden' class='gform_hidden' name='gform_target_page_number_2' id='gform_target_page_number_2' value='0' /> <input type='hidden' class='gform_hidden' name='gform_source_page_number_2' id='gform_source_page_number_2' value='1' /> <input type='hidden' name='gform_field_values' value='' /> </div> </form>

Also, here's why it didn't work previously: Gravity Forms must have initialized a global variable under window called gf_submitting_2 as false in the beginning. The onclick and onkeypress do the same thing - submit. However, the onkeypress checks if the enter key was pressed. Now for the code inside those listeners - it checks if the variable is true, and if it is, it prevents resubmitting by returning false . However, if it is false , as it is in the beginning, the if statement isn't evaluated and the global variable is set to true by the code after that, also meaning that the first submit isn't blocked.

Note that the enter key is already part of form submit natively, as in you don't need an event listener for it.

Also, if you cannot change the code inside the submit button, simply set window["gf_submitting_2"] to false every time the form is submitted:

 const form2 = document.getElementById('gform_2'); form2.addEventListener('submit', function(e) { let input2 = document.getElementById('input_2_2').value; console.log(input2) if (input2 == '') { e.preventDefault(); console.log("Submitted") window["gf_submitting_2"] = false; } else { e.preventDefault(); window.open('PDFLINKHERE.com', '_blank'); window["gf_submitting_2"] = false; form2.submit(); } })

 <form method='post' enctype='multipart/form-data' target='gform_ajax_frame_2' id='gform_2' action='/#gf_2'> <div class='gform_body'> <ul id='gform_fields_2' class='gform_fields top_label form_sublabel_below description_below'> <li id='field_2_1' class='gfield gfield_html gfield_html_formatted gfield_no_follows_desc field_sublabel_below field_description_below gfield_visibility_visible'> <h2 class="join-mailing-title">Free PDF</h2> <h6 class="join-mailing">Submit your details below.</h6> </li> <li id='field_2_2' class='gfield gfield_contains_required field_sublabel_below field_description_below hidden_label gfield_visibility_visible'> <label class='gfield_label' for='input_2_2'>Email Address<span class='gfield_required'>*</span></label> <div class='ginput_container ginput_container_email'> <input name='input_2' id='input_2_2' type='text' value='' class='large' placeholder='Email Address' aria-required="true" aria-invalid="false" /> </div> </li> </ul> </div> <div class='gform_footer top_label'> <input type='submit' id='gform_submit_button_2' class='gform_button button' value='Download PDF' onclick='if(window["gf_submitting_2"]){return false;} window["gf_submitting_2"]=true; ' onkeypress='if( event.keyCode == 13 ){ if(window["gf_submitting_2"]){return false;} window["gf_submitting_2"]=true; jQuery("#gform_2").trigger("submit",[true]); }' /> <input type='hidden' name='gform_ajax' value='form_id=2&amp;title=&amp;description=&amp;tabindex=0' /> <input type='hidden' class='gform_hidden' name='is_submit_2' value='1' /> <input type='hidden' class='gform_hidden' name='gform_submit' value='2' /> <input type='hidden' class='gform_hidden' name='gform_unique_id' value='' /> <input type='hidden' class='gform_hidden' name='state_2' value='WyJbXSIsImE2ZTkyMzgyNjE5MDg2NDBhOGIyMDhiNjExYzY0YmZiIl0=' /> <input type='hidden' class='gform_hidden' name='gform_target_page_number_2' id='gform_target_page_number_2' value='0' /> <input type='hidden' class='gform_hidden' name='gform_source_page_number_2' id='gform_source_page_number_2' value='1' /> <input type='hidden' name='gform_field_values' value='' /> </div> </form>