Jquery 选择器未针对 Shopify 模板上的正确 <form> 元素答案

【问题标题】：Jquery selector not targeting proper <form> element on Shopify templateJquery 选择器未针对 Shopify 模板上的正确 <form> 元素
【发布时间】：2020-07-14 05:28:54
【问题描述】：

我很困惑！我试图在我的页面上定位一个表单并使用 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();

它记录为一个空数组。

问题

我所针对的这种随机形式是什么？
如何定位此页面上的表单？

【问题讨论】：

标签： javascript jquery forms shopify

【解决方案1】：

嗯，您现在正在使用页面上的这一行 $( "form" ).serializeArray(); 序列化所有表单。

将其更改为$(this).serializeArray()，以便仅序列化提交的表单而不是所有表单。（在提交范围内）

如果你想序列化它，可以在你的输入中添加名称属性。

【讨论】：

添加名称有助于谢谢！ $(this).serializeArray() 仍然返回一个空数组
$(this).serializeArray() 如果没有名称参数，则返回一个空数组。序列化数组函数返回来自name 和value 的组合结果，因为您没有名称，它返回一个空数组。

【解决方案2】：

"name" 属性在表单字段中缺失。如果你想获取所有的字段值，你应该提供 "name" 并且 "value" 属性是可选的。

请检查下面的工作示例。

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

【讨论】：