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

Question

我在 google 标签管理器上有一个事件应该在成功提交表单时触发。该表单是来自 Cognito Forms 的嵌入式代码。该页面托管在方形空间中。使用 Google 跟踪代码管理器预览，我可以看到提交后所有条件都满足，但以下功能除外，成功提交时应该是 "true"，但由于某种原因，即使我提交表单也是错误的成功地。

可能出了什么问题？ This is 联系我们表格和功能下方。非常感谢。

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

我检查了您的表单，看起来有 2 个原因导致您对已填写的表单返回 false。

正如詹姆斯在评论中指出的那样，您需要做 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&nbsp;look forward to being in touch with you soon.</p></span></div>
    </div>
  </div>
</form>

一些注意事项：

使用更具选择性的选择器将是一种更具体的方法。

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

Check if all form fields filled - not working

javascript

google-tag-manager