“提交”事件處理程序只觸發一次，第一次后不會工作

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>