Answers.Body: <p>This is your html</p>
  
  <pre><code>&lt;div id="my-form" class="form"&gt;
  </code></pre>
  
  <p>And This is your js event handler</p>
  
  <pre><code>$('#my-form').submit(function(ev) {
  </code></pre>
  
  <p>So <code>$(this)</code> is actually a <code>&lt;div&gt;</code> container element and <code>$(this).serialize()</code> is null so you'll send no data. You should add a id to your form</p>
  
  <pre><code>&lt;form method="post" action="" id="myForm" accept-charset="UTF-8"&gt;
  </code></pre>
  
  <p>and send the form data instead of a div data.</p>
  
  <pre><code>var data = $("#myForm").serialize();
  </code></pre>
  
  <p>I reproduced it, and it worked - even though I would prefer sending an actual object instead of a serialized form, but that's only subjective </p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-11-17T02:35:27.307Z
Answers.Text: Also remove the `id="my-form"` from the div! By the way, the reason you were getting a full html page response was because craft didn't know where to route the request due to the form data missing, so it displayed an error page (the html you received). A good next step would have been to check the request headers to see what was being posted to where.
Answers.UserDisplayName: Rick Kukiela
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-11-17T16:42:05.053Z
Answers.Text: Thanks, all. I'm a bit ashamed that I didn't pick up on this and deeply appreciate your assistance!
Answers.UserDisplayName: portnoy-the-elder
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-11-16T21:53:43.563Z
Answers.LastActivityDate: 2017-11-16T21:53:43.563Z
Answers.UserDisplayName: Robin Schambach
Body: <p>I’m having trouble getting Contact Form to work when posting through AJAX. </p>
  
  <p>Form:</p>
  
  <pre><code>{% macro errorList(errors) %}
      {% if errors %}
          &lt;ul class="errors"&gt;
              {% for error in errors %}
                  &lt;li&gt;{{ error }}&lt;/li&gt;
              {% endfor %}
          &lt;/ul&gt;
      {% endif %}
  {% endmacro %}
  
  {% from _self import errorList %}
  
  &lt;div id="my-form" class="form"&gt;
  
      &lt;form method="post" action="" accept-charset="UTF-8"&gt;
      {{ getCsrfInput() }}
      &lt;input type="hidden" name="action" value="contactForm/sendMessage"&gt;
      &lt;input type="hidden" name="redirect" value="contact/thanks"&gt;
  
        &lt;div class="grid-container"&gt;
          &lt;div class="grid-x grid-padding-x"&gt;
            &lt;div class="medium-6 cell"&gt;
              &lt;h3&gt;&lt;label for="fromEmail"&gt;Your Email&lt;/label&gt;&lt;/h3&gt;
                  &lt;input id="fromEmail" type="email" name="fromEmail" value="{% if message is defined %}{{ message.fromEmail }}{% endif %}"&gt;
                  {{ message is defined and message ? errorList(message.getErrors('fromEmail')) }}
            &lt;/div&gt;
            &lt;div class="medium-12 cell"&gt;
              &lt;h3&gt;&lt;label for="message"&gt;Message&lt;/label&gt;&lt;/h3&gt;
                  &lt;textarea rows="10" cols="40" id="message" name="message"&gt;{% if message is defined %}{{ message.message }}{% endif %}&lt;/textarea&gt;
                  {{ message is defined and message ? errorList(message.getErrors('message')) }}
  
                  &lt;input type="submit" value="Send"&gt;
            &lt;/div&gt;
            &lt;div id="thanks" style="opacity:0"&gt;THANKS&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/form&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$('#my-form').submit(function(ev) {
      // Prevent the form from actually submitting
      ev.preventDefault();
  
      // Get the post data
      var data = $(this).serialize();
  
      // Send it to the server
      $.post('/', data, function(response) {
          if (response.success) {
              $('#thanks').fadeIn();
          } else {
              // response.error will be an object containing any validation errors that occurred, indexed by field name
              // e.g. response.error.fromName =&gt; ['From Name is required']
              alert('An error occurred. Please try again.');
          }
      });
  });
  </code></pre>
  
  <p>In this case the response is not a success so the alert is triggered.</p>
  
  <p>Out of interest I console logged the response in the else block and it’s all the HTML on the page. And then I thought, why don’t I console log the data variable right after it’s declared and - same thing - it’s all the HTML on the page.</p>
  
  <p>Anybody got any tips?</p>
  
Tags: <plugin-contactform>
Title: Trouble with submitting Contact Form plugin contact via AJAX
ThreadText: # Trouble with submitting Contact Form plugin contact via AJAX
  
  (Asked by: username_0 on 2017-11-16)
  
  I’m having trouble getting Contact Form to work when posting through AJAX.
  
  Form:
  
  ```
  {% macro errorList(errors) %}
      {% if errors %}
          <ul class="errors">
              {% for error in errors %}
                  <li>{{ error }}</li>
              {% endfor %}
          </ul>
      {% endif %}
  {% endmacro %}
  
  {% from _self import errorList %}
  
  <div id="my-form" class="form">
  
      <form method="post" action="" accept-charset="UTF-8">
      {{ getCsrfInput() }}
      <input type="hidden" name="action" value="contactForm/sendMessage">
      <input type="hidden" name="redirect" value="contact/thanks">
  
        <div class="grid-container">
          <div class="grid-x grid-padding-x">
            <div class="medium-6 cell">
              <h3><label for="fromEmail">Your Email</label></h3>
                  <input id="fromEmail" type="email" name="fromEmail" value="{% if message is defined %}{{ message.fromEmail }}{% endif %}">
                  {{ message is defined and message ? errorList(message.getErrors('fromEmail')) }}
            </div>
            <div class="medium-12 cell">
              <h3><label for="message">Message</label></h3>
                  <textarea rows="10" cols="40" id="message" name="message">{% if message is defined %}{{ message.message }}{% endif %}</textarea>
                  {{ message is defined and message ? errorList(message.getErrors('message')) }}
  
                  <input type="submit" value="Send">
            </div>
            <div id="thanks" style="opacity:0">THANKS</div>
          </div>
        </div>
      </form>
  
  </div>
  
  ```
  
  jQuery:
  
  ```
  $('#my-form').submit(function(ev) {
      // Prevent the form from actually submitting
      ev.preventDefault();
  
      // Get the post data
      var data = $(this).serialize();
  
      // Send it to the server
      $.post('/', data, function(response) {
          if (response.success) {
              $('#thanks').fadeIn();
          } else {
              // response.error will be an object containing any validation errors that occurred, indexed by field name
              // e.g. response.error.fromName => ['From Name is required']
              alert('An error occurred. Please try again.');
          }
      });
  });
  
  ```
  
  In this case the response is not a success so the alert is triggered.
  
  Out of interest I console logged the response in the else block and it’s all the HTML on the page. And then I thought, why don’t I console log the data variable right after it’s declared and - same thing - it’s all the HTML on the page.
  
  Anybody got any tips?
  
  **Tags:** plugin-contactform
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2017-11-16. Score: 1 | Accepted answer
  
  This is your html
  
  ```
  <div id="my-form" class="form">
  
  ```
  
  And This is your js event handler
  
  ```
  $('#my-form').submit(function(ev) {
  
  ```
  
  So `$(this)` is actually a `<div>` container element and `$(this).serialize()` is null so you'll send no data. You should add a id to your form
  
  ```
  <form method="post" action="" id="myForm" accept-charset="UTF-8">
  
  ```
  
  and send the form data instead of a div data.
  
  ```
  var data = $("#myForm").serialize();
  
  ```
  
  I reproduced it, and it worked - even though I would prefer sending an actual object instead of a serialized form, but that's only subjective
  
  > **Comments:**
  > **username_2**: Also remove the `id="my-form"` from the div! By the way, the reason you were getting a full html page response was because craft didn't know where to route the request due to the form data missing, so it displayed an error page (the html you received). A good next step would have been to check the request headers to see what was being posted to where.  
  > **username_0**: Thanks, all. I'm a bit ashamed that I didn't pick up on this and deeply appreciate your assistance!  
  
  ---
  
  