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

CC BY-SA 3.0
2017-11-17T02:35:27.307Z
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.
Rick Kukiela
CC BY-SA 3.0
2017-11-17T16:42:05.053Z
Thanks, all. I'm a bit ashamed that I didn't pick up on this and deeply appreciate your assistance!
portnoy-the-elder
CC BY-SA 3.0
2017-11-16T21:53:43.563Z
2017-11-16T21:53:43.563Z
Robin Schambach
<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>

<plugin-contactform>
Trouble with submitting Contact Form plugin contact via AJAX
# 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 %}
        
            {% for error in errors %}
                {{ error }}
            {% endfor %}
        
    {% endif %}
{% endmacro %}

{% from _self import errorList %}



    
    {{ getCsrfInput() }}
    
    

      
        
          
            Your Email
                
                {{ message is defined and message ? errorList(message.getErrors('fromEmail')) }}
          
          
            Message
                {% if message is defined %}{{ message.message }}{% endif %}
                {{ message is defined and message ? errorList(message.getErrors('message')) }}

                
          
          THANKS
        
      
    



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


And This is your js event handler
$('#my-form').submit(function(ev) {

So $(this) is actually a  container element and $(this).serialize() is null so you'll send no data. You should add a id to your form


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!  

---

