[英]Check if all form fields filled - not working
我在Google跟蹤代碼管理器上有一個事件,該事件應在成功提交表單后觸發。 該表單是Cognito Forms的嵌入式代碼。 該頁面托管在Squarespace中。 使用Google跟蹤代碼管理器預覽,我可以看到,一旦提交,所有條件都將得到滿足,但以下功能除外,成功提交后應為“ true”,但是由於某些原因,即使我成功提交了表單,它也是錯誤的。
可能出什么問題了? 這是聯系我們表格,位於功能下方。 非常感謝。
function areAllFieldsFilled(){
var requiredFields = document.getElementsByClassName('cognito')[0].getElementsByTagName('form')[0].getElementsByTagName('input');
var questions = document.getElementsByClassName('cognito')[0].getElementsByTagName('form')[0].getElementsByTagName('textarea')[0];
var check = 0;
if (questions == '') {
check++;
} else{
for (var i = 0; i < 3; i++) {
if (requiredFields[i].value == '') {
check++;
break;
}
}
}
if (check == 0) {
return true;
} else {
return false;
}
}
我檢查了您的表單,看來有兩個原因導致您為填寫的表單返回false。
正如James在評論中指出的那樣,您需要執行questions.value == ''
而不是questions == ''
您可能沒有注意到的形式中有一個隱藏的<input />
標記。 該輸入的值始終為空字符串,因為它沒有值。 為了快速解決此問題,您可以從1開始循環。 側面說明 :循環的長度應為requiredFields.length -1
(因為我們現在從1開始而不是0開始),而不是硬編碼3
這是一個有效的例子
document.addEventListener("DOMContentLoaded", function(event) { document.getElementById("c-submit-button").addEventListener("click", areAllFieldsFilled); }); function areAllFieldsFilled(event) { event.preventDefault(); // For testing, REMOVE THIS var requiredFields = document.getElementsByTagName('form')[0].getElementsByTagName('input'); var questions = document.getElementsByTagName('form')[0].getElementsByTagName('textarea')[0]; var check = 0; if (questions.value == '') { console.log("questions was empty"); check++; } else { for (var i = 1; i < requiredFields.length - 1; i++) { if (requiredFields[i].value == '') { check++; break; } } } console.log(`check count is ${check}`); if (check == 0) { console.log("Returning True"); return true; } else { console.log("Returning False"); return false; } // or replace the above 7 lines with return check == 0 }
<form lpformnum="1"> <div class="c-forms-form" tabindex="0"> <div class="c-editor" style="display:none;"> <input type="text" class="c-forms-form-style" style=" background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%;"> </div> <div class="c-forms-form-body"> <div class="c-forms-template" sys:attach="dataview" dataview:data="{binding entry, source={{ Cognito.Forms.model }} }"> <div class="c-forms-form-main c-span-24 c-sml-span-12"> <div class="c-section c-col-1 c-sml-col-1 c-span-24 c-sml-span-12" data-field="Section"> <div class=""> <div class="c-section c-col-1 c-sml-col-1 c-span-24 c-sml-span-12" data-field="Section"> <div class=""> <div class="c-name c-field c-col-1 c-sml-col-1 c-span-24 c-sml-span-12 c-required" data-field="Name"> <div class="c-label"> <label>Name</label> </div> <div> <div class="c-offscreen"> <label for="c-0-12">First</label> </div> <div class="c-editor c-span-1" style="width: 50%; float: left;"> <input type="text" id="c-0-12" placeholder="First"> </div> <div class="c-offscreen"> <label for="c-1-12">Last</label> </div> <div class="c-editor c-span-1" style="width: 50%; float: left;"> <input type="text" id="c-1-12" placeholder="Last"> </div> </div> <div class="c-validation">First and Last are required.</div> </div> <div class="c-email c-field c-col-1 c-sml-col-1 c-span-24 c-sml-span-12 c-required" data-field="PreferredEmailAddress"> <div class="c-label"> <label for="c-3-11">Preferred Email Address</label> </div> <div class="c-editor"> <input type="text" id="c-3-11"> </div> <div class="c-validation">Preferred Email Address is required.</div> </div> <div class="c-phone c-phone-international c-field c-col-1 c-sml-col-1 c-span-12 c-sml-span-12 c-required" data-field="Phone"> <div class="c-label"> <label for="c-4-10">Phone</label> </div> <div class="c-editor"> <input type="text" id="c-4-10"> </div> <div class="c-validation">Phone is required.</div> </div> <div class="c-yesno-radiobuttons c-field c-col-13 c-sml-col-1 c-span-12 c-sml-span-12" data-field="WouldYouLikeForUsToCallYou"> <legend class="c-label">Would you like for us to call you?</legend> <div class="c-editor c-columns-0"> <label class="c-yesno-radio" for="c-5-8"> <input type="radio" name="group7" id="c-5-8" checked="checked"><span>Yes</span></label> <label class="c-yesno-radio" for="c-5-9"> <input type="radio" name="group7" id="c-5-9"><span>No</span></label> </div> <div class="c-validation"></div> </div> <div class="c-text-multiplelines c-field c-col-1 c-sml-col-1 c-span-12 c-sml-span-12 c-required" data-field="Questions"> <div class="c-label"> <label for="c-6-6">Questions:</label> </div> <div class="c-editor"> <textarea id="c-6-6" type="text" height=""></textarea> </div> <div class="c-validation">Questions: is required.</div> </div> </div> <div class="c-validation"></div> </div> </div> <div class="c-validation"></div> </div> </div> </div> <div id="c-recaptcha-div"></div> <div class="c-forms-error"> <div class="c-validation"></div> </div> <div class="c-button-section"> <div class="c-action"> <button class="c-button" id="c-submit-button">Submit</button> </div> </div> </div> <div class="c-forms-confirmation"> <div class="c-forms-confirmation-message c-html" sys:attach="dataview" dataview:data="{binding entry, source={{ Cognito.Forms.model }} }"><span><p><strong>Thank you for reaching out!</strong></p> <p>We look forward to being in touch with you soon.</p></span></div> </div> </div> </form>
一些注意事項:
使用更具選擇性的選擇器將是更具體的方法。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.