Jquery селектор не нацелен на правильный элемент <form>в шаблоне Shopify - PullRequest
Новая
       26

Jquery селектор не нацелен на правильный элемент <form>в шаблоне Shopify

0 голосов
/ 14 июля 2020

Я так запуталась! Я пытаюсь настроить таргетинг на форму на своей странице и использовать функцию jQuerys serializeArray (), чтобы получить все значения формы. 

<div class="page-width">
      <header class="section-header text-center">
        <h1 class="section-header__title h2">{{ page.title }}</h1>
      </header>
           <script>
              $(document).ready(function () {
                  $( "#form" ).submit(function( event ) {
                    var fields = $( "form" ).serializeArray();
                    console.log(fields)
                    event.preventDefault();
                   });
              });
            
        </script>
  <div class="grid">
    <div class="grid__item medium-up--four-fifths medium-up--push-one-tenth">
      <div class="rte">
        {{ page.content }}
        <form action="#" method="#" id="form">
         <fieldset>
            <legend>Have you ever felt any of the below symptoms after consuming coffee or tea or other caffeinated beverage (cola, hot chocolate...) Select the boxes that apply.</legend>

            <input type="checkbox" id="heartburn" >
            <label for="heartburn">Heartburn</label><br/>

            <input type="checkbox" id="jitters" >
            <label for="jitters">Jitters</label><br/>

            <input type="checkbox" id="anxiety" >
            <label for="anxiety">Anxiety</label><br/>
           
            <input type="checkbox" id="upset-stomach" >
            <label for="upset-stomach">Upset Stomach</label><br/>
           
            <input type="checkbox" id="bathroom" >
            <label for="bathroom">Urgent need to go the bathroom</label><br/>
            
            <input type="checkbox" id="heart" >
            <label for="heart">Racing Heart</label>
         </fieldset>  
          
          
        <input type="submit" value="Submit">
      </form>
        
   
      </div>
    </div>
  </div>
</div>

Сейчас она регистрируется как загадочная форма (я предполагаю, что в ней что-то для шаблона Shopifys)

введите описание изображения здесь

Если я изменю селектор на 

            var fields = $( this ).serializeArray();

Он регистрируется как пустой массив.

Вопросы

  1. Что это случайная форма, на которую настроен таргетинг?
  2. Как настроить таргетинг на форму на этой странице?

Ответы [ 2 ]

1 голос
/ 14 июля 2020

атрибут "имя" отсутствует в полях формы. Если вы хотите получить все значения полей, вы должны указать «имя» и «значение» атрибут не является обязательным.

Пожалуйста, проверьте рабочий пример ниже. 

<html>
    <head>
        <title>Submit Form</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  
    </head>
    <body>
        <div class="page-width">
            <header class="section-header text-center">
              <h1 class="section-header__title h2">{{ page.title }}</h1>
            </header>
                 <script>
                    $(document).ready(function () {
                        $( "#form" ).submit(function( event ) {
                          var fields = $( "form" ).serializeArray();
                          console.log(fields);
                          event.preventDefault();
                         });
                    });
                  
              </script>
        <div class="grid">
          <div class="grid__item medium-up--four-fifths medium-up--push-one-tenth">
            <div class="rte">
              {{ page.content }}
              <form action="#" method="#" id="form">
               <fieldset>
                  <legend>Have you ever felt any of the below symptoms after consuming coffee or tea or other caffeinated beverage (cola, hot chocolate...) Select the boxes that apply.</legend>
      
                  <input type="checkbox" name="heartburn" value="heartburn" id="heartburn" >
                  <label for="heartburn">Heartburn</label><br/>
      
                  <input type="checkbox" name="jitters" value="jitters" id="jitters" >
                  <label for="jitters">Jitters</label><br/>
      
                  <input type="checkbox" name="anxiety"  value="anxiety"  id="anxiety" >
                  <label for="anxiety">Anxiety</label><br/>
                 
                  <input type="checkbox" name="upset-stomach" value="upset-stomach" id="upset-stomach" >
                  <label for="upset-stomach">Upset Stomach</label><br/>
                 
                  <input type="checkbox" name="bathroom" value="bathroom"  id="bathroom" >
                  <label for="bathroom">Urgent need to go the bathroom</label><br/>
                  
                  <input type="checkbox" name="heart" value="heart" id="heart" >
                  <label for="heart">Racing Heart</label>
               </fieldset>  
                
                
              <input type="submit" value="Submit">
            </form>
              
         
            </div>
          </div>
        </div>
      </div>
    </body>
</html>
1 голос
/ 14 июля 2020

Ну, вы сейчас сериализуете ВСЕ формы с этой строкой $( "form" ).serializeArray(); на странице.

Измените ее на $(this).serializeArray(), чтобы сериализовать только отправленную форму, а не все формы. (в области отправки)

И добавьте атрибуты имени к своим входам, если хотите сериализовать его.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...