Answers.Body: <p>As per the comments, the issue turned out to be that jQuery wasn't included on the page, so <code>$</code> wasn't defined.</p>
  <p>In general, make sure to check the devtools console for error messages and use the debugger to find out why specific pieces of code aren't working as intended.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-11-25T11:03:05.910Z
Answers.LastActivityDate: 2021-11-25T11:03:05.910Z
Answers.UserDisplayName: MoritzLost
Body: <p>I'm having a follow button on the front end it allows you to save an entry to a specific section (type: channel)
  and it's all working great, but i need to achieve this with <strong>AJAX</strong></p>
  <p><strong>This is my Form</strong></p>
  <pre><code>{% if currentUser %}
  &lt;form id=&quot;followForm&quot; method=&quot;post&quot; accept-charset=&quot;UTF-8&quot;&gt;
          {{ csrfInput() }}
          {{ actionInput('entries/save-entry') }}
          {{ hiddenInput('sectionId', sectionID) }}
          {{ hiddenInput('enabled', '1') }}
          {{ hiddenInput('title', followTitle ) }}
          {{ hiddenInput('fields[followerName]', currentUser.username ) }}
          {{ hiddenInput('fields[relatedUserId]', currentUser.id ) }}
          {% if followItem is defined %}
             {{ hiddenInput('fields[relatedEntryId]', followItem.id ) }} 
             {{ hiddenInput('fields[relatedSectionTitle]', followItem.section ) }}
          {% else %}
             {{ hiddenInput('fields[relatedEntryId]', entry.id ) }}
             {{ hiddenInput('fields[relatedSectionTitle]', entry.section ) }}
          {% endif %}
          &lt;button id=&quot;followBtn&quot; type=&quot;submit&quot;&gt;Follow&lt;/button&gt;
      &lt;/form&gt;
  {% endif %}
  </code></pre>
  <p><strong>What i've tried:</strong></p>
  <pre><code>    $('#followForm').submit(function(ev) { 
          ev.preventDefault();
  
       $.ajax({
              type: 'POST',
              url: 'entries/save-entry',
              dataType: 'json',
              data: $(this).serialize(),
              success: function (response) {  
                      console.log(response);  
                  }
          });
      });
  </code></pre>
  <p>so it seems there is something wrong with my JS, since it's continue to submit the form as default form and reloading the entire page instead of using Ajax.</p>
  <p>any ideas would be great, Thanks</p>
  
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2021-11-25T09:03:30.820Z
Comments.Text: The JS code looks ok – have you checked the devtools, are there any errors? Is the JS code loaded deferred or executed after the `DOMContentLoaded` event? It's possible the `#followForm` element doesn't exist yet when the code is executed. Try opening the debugger in the devtools and putting a breakpoint in the line with `$('#followForm')` to see if and what the selector finds.
Comments.UserDisplayName: MoritzLost
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2021-11-25T09:19:59.937Z
Comments.Text: Thank you @MoritzLost, 
  i forgot to include the jQuery file first,  but run into another one, 
  how to refresh only the card i pressed ( there is a for loop iterate on 12 event card )
   i tried this :
  
  `$('#card{{followId}}').load(' #card{{followId}} > *');`
  
  where `{% set followId = loop.index %}`
  
  but it still refresh the entire page.
  
  should i post another question or is it okay here ?
Comments.UserDisplayName: Ra3d K
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2021-11-25T11:04:58.190Z
Comments.Text: Since it's a completely new issue, probably better to post it as a new question. I've added an answer to this one for completeness' sake. Since your new question is specifically about JavaScript/jQuery, maybe post it on Stack Overflow instead.
Comments.UserDisplayName: MoritzLost
Tags: <ajax><frontend-form><saveentry>
Title: How to save an entry using AJAX on a frontend Form [ for registered users]
ThreadText: # How to save an entry using AJAX on a frontend Form [ for registered users]
  
  (Asked by: username_0 on 2021-11-25)
  
  I'm having a follow button on the front end it allows you to save an entry to a specific section (type: channel)
  and it's all working great, but i need to achieve this with **AJAX**
  
  **This is my Form**
  
  ```
  {% if currentUser %}
  <form id="followForm" method="post" accept-charset="UTF-8">
          {{ csrfInput() }}
          {{ actionInput('entries/save-entry') }}
          {{ hiddenInput('sectionId', sectionID) }}
          {{ hiddenInput('enabled', '1') }}
          {{ hiddenInput('title', followTitle ) }}
          {{ hiddenInput('fields[followerName]', currentUser.username ) }}
          {{ hiddenInput('fields[relatedUserId]', currentUser.id ) }}
          {% if followItem is defined %}
             {{ hiddenInput('fields[relatedEntryId]', followItem.id ) }} 
             {{ hiddenInput('fields[relatedSectionTitle]', followItem.section ) }}
          {% else %}
             {{ hiddenInput('fields[relatedEntryId]', entry.id ) }}
             {{ hiddenInput('fields[relatedSectionTitle]', entry.section ) }}
          {% endif %}
          <button id="followBtn" type="submit">Follow</button>
      </form>
  {% endif %}
  
  ```
  
  **What i've tried:**
  
  ```
      $('#followForm').submit(function(ev) { 
          ev.preventDefault();
  
       $.ajax({
              type: 'POST',
              url: 'entries/save-entry',
              dataType: 'json',
              data: $(this).serialize(),
              success: function (response) {  
                      console.log(response);  
                  }
          });
      });
  
  ```
  
  so it seems there is something wrong with my JS, since it's continue to submit the form as default form and reloading the entire page instead of using Ajax.
  
  any ideas would be great, Thanks
  
  **Tags:** ajax, frontend-form, saveentry
  
  > **Comments:**
  > **username_1**: The JS code looks ok – have you checked the devtools, are there any errors? Is the JS code loaded deferred or executed after the `DOMContentLoaded` event? It's possible the `#followForm` element doesn't exist yet when the code is executed. Try opening the debugger in the devtools and putting a breakpoint in the line with `$('#followForm')` to see if and what the selector finds.  
  > **username_0**: Thank you @username_1,  i forgot to include the jQuery file first,  but run into another one,  how to refresh only the card i pressed ( there is a for loop iterate on 12 event card )  i tried this :  `$('#card{{followId}}').load(' #card{{followId}} > *');`  where `{% set followId = loop.index %}`  but it still refresh the entire page.  should i post another question or is it okay here ?  
  > **username_1**: Since it's a completely new issue, probably better to post it as a new question. I've added an answer to this one for completeness' sake. Since your new question is specifically about JavaScript/jQuery, maybe post it on Stack Overflow instead.  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2021-11-25. Score: 2 | Accepted answer
  
  As per the comments, the issue turned out to be that jQuery wasn't included on the page, so `$` wasn't defined.
  
  In general, make sure to check the devtools console for error messages and use the debugger to find out why specific pieces of code aren't working as intended.
  
  
  ---
  
  