すべてのフォームフィールドが入力されていないか確認してください。

Question

フォームが正常に送信されたときに起動するイベントがGoogleタグマネージャにあります。このフォームは、Cognito Formsの組み込みコードです。ページは、四角形でホストされています。 Googleタグマネージャのプレビューを使用すると、以下の関数を除いてすべての条件が満たされていることがわかります。ただし、成功すると「true」になりますが、何らかの理由でフォームが正常に送信されても​​falseです。

何が問題になる可能性がありますか？ 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

フォームを検査しました。記入フォームにfalseを返す理由は2つあります。コメントでジェームズで述べたように

は

1. 、あなたはおそらく気づかなかった形で隠された<input />タグはありquestions.value == ''ないquestions == ''

2. を行う必要があります。その入力の値は、値を持たないため、常に空の文字列です。 3

コーディング（私たちは今1ではなく0から始まるされているので）あなたのループの長さはrequiredFields.length -1あるべき代わりのハード：すぐにこの問題を解決するには、1 側注であなたのループを開始することができます

：ここでは実施例

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>

いくつかの注意です

より選択的なセレクタを使用する方がより具体的なアプローチになります。