“提交”事件处理程序只触发一次，第一次后不会工作

Question

我有一个简单的 HTML 表单，它是使用 Gravity Forms 构建的（我对此有零控制权，所以改变它是不可能的）

表单很简单，一个 email 的文本字段和一个按钮。 在提交时，我有一个 if-else 语句。 如果输入为空，则什么也不做。 否则，如果它包含文本，请打开一个带有 PDF 的新 window 并且表单应该正常提交。

但是，在提交没有文本的表单后，重力 forms 方面向用户抛出错误“请输入电子邮件”，在该错误之后，我的事件处理程序不再工作。

如果我尝试在提交时通过控制台登录，它第一次可以工作，但如果我再次按下提交，这次修复 email 错误，我的 function 无法运行。

谁能告诉我出了什么问题？

代码：

 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

我发现了问题 - 这是提交按钮中的这段代码：

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]); }'

这是带有演示的更新代码：

 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>

此外，这就是它以前不起作用的原因：Gravity Forms 必须在window下初始化一个名为gf_submitting_2的全局变量一开始为false 。 onclick和onkeypress做同样的事情 - 提交。 但是， onkeypress检查是否按下了 enter 键。 现在对于这些侦听器中的代码 - 它检查变量是否为真，如果是，它通过返回false来防止重新提交。 但是，如果它是false ，就像一开始一样，则不会评估 if 语句，并且之后的代码将全局变量设置为true ，这也意味着第一次提交不会被阻止。

请注意，回车键本身已经是form提交的一部分，因为您不需要事件侦听器。

此外，如果您无法更改提交按钮内的代码，只需在每次提交表单时将window["gf_submitting_2"]设置为false ：

 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>