Почему я получаю 'querySelector' со значением NULL? Что я делаю не так в этом коде? - PullRequest
Новая
       95

Почему я получаю 'querySelector' со значением NULL? Что я делаю не так в этом коде?

2 голосов
/ 17 октября 2019

Я реализовал код на cms для магнолий, задача состоит в том, чтобы получить значения формы в другой скрытой форме (из Marketo). Код прекрасно работает в версии сообщества Магнолия, но не в производственной среде. Пожалуйста, помогите с кодом. Что здесь не так?

HTML-код веб-формы Magnolia: 

<form id="commandDEmarketo_test" class="webtrekkHelper_configs eineSeite" data-webtrekk-forminstall="true" data-mwf-target="/formulare/servlet/form;webforms=A0FE63A9C0A3C637292A391D2D5F6662?_uid=DEmarketo_test&amp;lang=de_DE&amp;_view=webform" data-webtrekk-temp-append-base-contentid="." data-mwf-id="DEmarketo_test" action="/formulare/servlet/form;webforms=A0FE63A9C0A3C637292A391D2D5F6662" method="post" enctype="multipart/form-data" accept-charset="utf-8" onsubmit="return false;" data-mktorelay-formid="1038">
    <input type="hidden" name="audience" value="UIP">
    <input type="hidden" name="revisionNr" value="24593">
    <input type="hidden" name="formRevisionNr" value="23509">
    <input type="hidden" name="wt_form" value="1">
    <input type="hidden" name="_mwfToken:DEmarketo_test" value="D4486376922829AE0BA1C3BA5F935941">
    <div id="form-top"></div>

    <ul id="crumbs">

        <li class="selected  ">

            <a href="#" style="height: 0px; padding-right: 0px;">
                <div>
                    <span> </span>
                </div>
            </a>

        </li>

        <li class="last-child">
            <a href="#" style="height: 0px; padding-right: 0px;">
                <div>
                    <span>

                                Success

                    </span>
                </div>
            </a>
        </li>
    </ul>

    <div class="innerForm">

        <ul class="">

            <div class="">

                <li data-mwf-container="mwf0301fe8ca93a" class="mwf-field 
        mwf-bold 
        mwf-italic 
         h-odd">

                    <script>
                        var d = document.getElementById("commandDEmarketo_test");
                        d.setAttribute("data-mktorelay-formid", "1038");
                    </script>

                </li>

            </div>

            <div class=" none">

                <li data-mwf-container="mwf23e481e7bdc0" class="mwf-field  h-even">
                    <label class="mwf-label" for="mwf23e481e7bdc0">

                        Vorname

                    </label>

                    <div class="mwf-input">

                        <input id="mwf23e481e7bdc0" name="vorname" class="mwf-text " data-mwf-id="mwf23e481e7bdc0" type="text" value="">

                        <p class="mwf-error"></p>
                    </div>
                </li>
            </div>

            <div class=" none">

                <li data-mwf-container="mwf08d9bc1fbf81" class="mwf-field  h-odd">
                    <label class="mwf-label" for="mwf08d9bc1fbf81">

                        Nachname

                    </label>

                    <div class="mwf-input">

                        <input id="mwf08d9bc1fbf81" name="nachname" class="mwf-text " data-mwf-id="mwf08d9bc1fbf81" type="text" value="">

                        <p class="mwf-error"></p>
                    </div>
                </li>
            </div>

            <div class="">

                <input id="versteckt" name="versteckt" data-mwf-id="mwf4531354a7b12" type="hidden" value="">
            </div>

            <div class="">

                <li data-mwf-container="mwf568b7206cb24" class="mwf-field ">
                    <label class="mwf-label">

                        Radio

                    </label>

                    <div class="mwf-input">

                        <fieldset data-mwf-fieldset="mwf568b7206cb24">

                            <span class="mwf-option"> <input id="mwf568b7206cb24_A" name="radio" class="mwf-radio" data-mwf-id="mwf568b7206cb24" type="radio" value="A">
                            <label for="mwf568b7206cb24_A">Option a</label>

                                <div class="clearfix"></div>

                        </span>

                            <span class="mwf-option"> <input id="mwf568b7206cb24_B" name="radio" class="mwf-radio" data-mwf-id="mwf568b7206cb24" type="radio" value="B">
                            <label for="mwf568b7206cb24_B">Option 2</label>

                                <div class="clearfix"></div>

                        </span>

                        </fieldset>

                        <p class="mwf-error"></p>
                    </div>
                </li>
            </div>

            <div class="">

                <li data-mwf-container="mwf0364ecee4a3f" class="mwf-field  h-even">
                    <label class="mwf-label" for="mwf0364ecee4a3f">

                        Dropdown

                    </label>

                    <div class="mwf-input">

                        <select id="mwf0364ecee4a3f" name="dropdown" class="mwf-select mwf-multiple " data-mwf-id="mwf0364ecee4a3f">

                            <option id="mwf1eb0a105558d_DEmarketo_test" value="1">erster Wert</option>

                            <option id="mwf8dce584a8bef_DEmarketo_test" value="2">zweiter Wert </option>

                        </select>

                        <p class="mwf-error"></p>
                    </div>
                </li>
            </div>

        </ul>

        <ul>

            <li data-mwf-container="_finish_mwfdf9ed4d75291" class="mwf-button mwf-next">
                <input type="button" value="Submit" data-mwf-submit="{&quot;type&quot;:&quot;finish&quot;}" class="webtrekkHelper_observe" data-webtrekk-formsubmit="" data-webtrekk-linkid-area="Content" data-webtrekk-linkid-element="Button" data-webtrekk-linkid-name="Submit" data-webtrekk-linkid-target-append-base-contentid=".Success">
            </li>

        </ul>

        <ul>
            <li class="mwf-pager">
                <p>
                    <span>1</span>/<span>2</span>
                </p>
            </li>
        </ul>
    </div>
</form>

Запускаемый мной скрипт: 

<script>

  MktoForms2.loadForm("https://app-lonXX.marketo.com", "162-XXX-XXX", 10XX);
  var customForm = document.querySelector("#commandDEsk2_form"),

  customFormButton = customForm.querySelector("input[type='button']");

  if (customFormButton!= null) {

  customFormButton.addEventListener("click",function(customFormSubmitEvent){ 
  customFormSubmitEvent.preventDefault();   
  customFormButton.disabled = true;

  MktoForms2.whenReady(function(mktoForm) {    

      mktoForm.addHiddenFields({    
           "FirstName": customForm.querySelector("#mwf23e481e7bdc0").value,
           "LastName": customForm.querySelector("#mwf08d9bc1fbf81").value
         });

      mktoForm.submit();  
      });
     });
     }
   </script>

Ошибка:

Uncaught TypeError: Невозможно прочитать свойство 'querySelector' с нулевым значением

...