检查所有表单字段是否已填写-不起作用

Question

I have an event on google tag manager that should fire when a form is submitted successfully. The form is an embedded code from Cognito Forms. The page is hosted in squarespace. Using Google Tag Manager preview I can see all conditions are met once submissions with the exception of the function below, which should be "true" on successful submission, but for some reason it is false even if I submit form successfully.

What could be going wrong? This is the contact us form and below the function. Thanks a lot.

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;
  }
}

Answer 1

I inspected your form and it looks like there are 2 reasons why you are returning false for a filled in form.

1. As noted by James in the comments, you need to do questions.value == '' and not questions == ''

2. There is a hidden <input /> tag in the form you probably didn't notice. The value of that input is always empty string because it doesn't have a value. To quickly fix this, you can start your loop at 1. Side Note : the length of your loop should be requiredFields.length -1 (since we are now starting at 1 instead of 0) instead of hard coding 3

Here is a working example

 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&nbsp;look forward to being in touch with you soon.</p></span></div> </div> </div> </form> 

Some notes:

Using a more selective selector would be a more concrete approach.