Shopify Question posted in
The Shopify help center can be found here.

Jquery selector not targeting proper <form> element on Shopify template

I am so confused! I am attempting to target a form on my page and use the jQuerys serializeArray() function to grab all the values of the form.

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

Right now it logs as a mysterious form ( I assume this has something to do with Shopifys template)

enter image description here

If I change the selector to

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

It logs as an empty array.

Questions

  1. What is this random form I am targeting?
  2. How can I target the form on this page?
Tags:

2

Answers


  1. 0

    Well you are serializing ALL forms at the moment with this line $( "form" ).serializeArray(); on the page.

    Change it to $(this).serializeArray() in order to serialize only the submitted form and not all forms. (in the submit scope)

    And add name attributes to your inputs if you like to serialize it.

    Login or Signup to reply.
  2. 0

    "name" attribute is missing in the form fields. If you want to get all the field values you should provide "name" and "value" attribute is optional.

    Please check below working example.

    <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search