Answers.Body: <p>Contact Form 2 (for Craft 3), still returns a JSON encoded <code>success: true</code> response on successful submission, but Craft 3 by default will only respond with JSON if <code>$request-&gt;getAcceptsJson()</code> returns <code>true</code> on a request.</p>
  
  <p><a href="https://github.com/craftcms/contact-form/blob/v2/src/controllers/SendController.php#L64-L66" rel="nofollow noreferrer">https://github.com/craftcms/contact-form/blob/v2/src/controllers/SendController.php#L64-L66</a></p>
  
  <p>Ultimately that ends up hitting the Yii 2 method <a href="https://www.yiiframework.com/doc/api/2.0/yii-web-request#getAcceptableContentTypes()-detail" rel="nofollow noreferrer">getAcceptableContentTypes</a> which checks the <code>$_SERVER['HTTP_ACCEPT']</code> server variable for the key <code>application/json</code>.</p>
  
  <p>So most likely your server is not configured to return <code>application/json</code> as a valid <code>HTTP_ACCEPT</code> content-type.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-05-08T00:17:12.410Z
Answers.LastActivityDate: 2020-01-10T04:29:14.917Z
Answers.LastEditDate: 2020-01-10T04:29:14.917Z
Answers.UserDisplayName: Brad Bell
Body: <p>This is my first Craft website, and after trying out Craft 2 I decided it would be a good idea to have move my site to Craft 3 for longevity.</p>
  
  <p>I used to the free Contact Form plugin and managed to make AJAX work perfectly with Craft 2.</p>
  
  <p>However the same code does not work with Craft 3.</p>
  
  <p>I have a simple contact form at the bottom of <a href="https://haydentomas.co.uk" rel="nofollow noreferrer">https://haydentomas.co.uk</a> where the AJAX works perfectly. </p>
  
  <p>I used exactly the same code on a Craft 3 install at <a href="https://letsdocode.com" rel="nofollow noreferrer">https://letsdocode.com</a>. The error messages come up correctly if you don't fill in the form properly, and I do get an email if it does get filled in. But I cannot make the form success message appear when it has been completed successfully.</p>
  
  <p>On the JS I have an success:</p>
  
  <pre><code>function(response) {
      if (response.success) {
  </code></pre>
  
  <p>Statement that holds some HTML that appears on an id and also another statement that hides the form completely.</p>
  
  <p>This does not work and I am wondering if there is a change in Craft 3 that means I have to change the code slightly?</p>
  
  <p>My else statement works perfectly.</p>
  
  <p>My JS is below</p>
  
  <pre><code>   &lt;script&gt;
      $('form').submit(function(ev) {
        // Prevent the form from actually submitting
        ev.preventDefault();
        var formData = new FormData($(this)[0]);
        // Send it to the server
        $.ajax('/', {    
          url:  '/',
          data: formData,
          type: 'POST',
          async: false,
          cache: false,
          contentType: false,
          processData: false,
          success: function(response) {
          if (response.success) {
            document.getElementById("notice").innerHTML = '&lt;h2&gt;Success!&lt;/h2&gt;&lt;div class="row"&gt;&lt;div class="6u"&gt;&lt;img class="monkey" src="https://haydentomas.co.uk//images/monkey.svg"/&gt; &lt;/div&gt;&lt;div class="6u"&gt;&lt;p&gt;Thank you for your message&lt;/p&gt;&lt;p&gt;I will get back to you as soon as possible, usually within 24 hours&lt;/p&gt;&lt;p&gt;Talk soon! Hayden&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;';
            // $('form')[0].reset();
            document.getElementById("form").style.display = "none";
          } 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']
              document.getElementsByName('fromName')[0].placeholder='Name is required';
              document.getElementsByName('fromEmail')[0].placeholder='Email is required';
              document.getElementsByName('message')[0].placeholder='Message is required';
              }
            }
            });
        });
  &lt;/script&gt;
  </code></pre>
  
  <p>My form is </p>
  
  <pre><code>&lt;div id="form"&gt;
      &lt;form method="post" action="" accept-charset="UTF-8"&gt;
          &lt;input type="hidden" name="CRAFT_CSRF_TOKEN" value="p_O1wR-QVP9G9WpcPZ90Fl4K82X8kOvZ33FAXa7fej9HSTOMW4zC_GWWsVDAVlvkr_TjeheMVdsk15JD5C8D-CSrFP0Ehb9kCoyHF42u_37Myy_akFOwXWJprfT4KWOqpzUhWd6r0ib9QLr7G2cDBUtxDH9JgIF3alyLyHuZhZXAO_eR79zoCVniIzlieZZi0FOsLQhYQxSpOVuzLDdFAg7P2U7zQBUXSJ1dnNXapMuyTUjLcuu3sJNFLzwozOcOGqo1K9kGRSTxXU2_bF4FctCHwoxe-gXSCLBcBRDzN1s9S7c9yNWZ6etHMC_7qxNXf31luALE9sgZ9dcy92c6gJaS2xggume9EOKnd4dLNMkRmiTEZeaIXTLvsXG5yplOqvNJ6aVhhW5XXpmRzh1ayJNXFGm7zuRHxDfOjFYmaVRmP0lJEK3tNCc_yowjrcDn8A_B4Z2JnGAx2hdvViDeVuQvnVEsajowmAp__gJ_FlRrm7gPlCRyYTzJLtSTls2fnDkCoB7b-9v6FURVfpmjRSyZfGqWVgRDpBV0xVo9dRc="&gt;
          &lt;input type="hidden" name="action" value="contact-form/send"&gt;
          &lt;input type="hidden" name="redirect" value="b72e5e9e85a0ff7d840441aa540d6d32c6d554d22c025c8fc4dc8e0804c9475fcontact/thanks"&gt;
  
          &lt;h3&gt;&lt;label for="from-name"&gt;Your Name&lt;/label&gt;&lt;/h3&gt;
          &lt;input id="from-name" type="text" name="fromName" value=""&gt;
  
          &lt;h3&gt;&lt;label for="from-email"&gt;Your Email&lt;/label&gt;&lt;/h3&gt;
          &lt;input id="from-email" type="email" name="fromEmail" value=""&gt;
  
          &lt;h3&gt;&lt;label for="subject"&gt;Subject&lt;/label&gt;&lt;/h3&gt;
          &lt;input id="subject" type="text" name="subject" value=""&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;&lt;/textarea&gt;
  
          &lt;input type="submit" value="Send"&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks in advance!</p>
  
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2018-05-05T21:40:56.313Z
Comments.Text: We need your html in order to help you. Your Javascript seems to be "correct". I know one could inspect  it on your website but people on smartphones might help you too when you post it
Comments.UserDisplayName: Robin Schambach
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2018-05-05T21:52:03.303Z
Comments.Text: Ok, thanks. I have added the form to the post. I am pretty sure the form should work, as it does on craft2, so must be a different success message, or I have missed something!
Comments.UserDisplayName: Hayden Tomas
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2018-05-05T21:54:32.420Z
Comments.Text: As far as I can see you don't close your `</form>` and there is no `div` with id `notice` the response message from the controller still contains an attribute `success`. You can do `console.log(response)` to see what you get
Comments.UserDisplayName: Robin Schambach
Tags: <craft3><ajax><plugin-contactform>
Title: Contact Form AJAX not working in Craft 3
ThreadText: # Contact Form AJAX not working in Craft 3
  
  (Asked by: username_0 on 2018-05-05)
  
  This is my first Craft website, and after trying out Craft 2 I decided it would be a good idea to have move my site to Craft 3 for longevity.
  
  I used to the free Contact Form plugin and managed to make AJAX work perfectly with Craft 2.
  
  However the same code does not work with Craft 3.
  
  I have a simple contact form at the bottom of <https://username_0.co.uk> where the AJAX works perfectly.
  
  I used exactly the same code on a Craft 3 install at <https://letsdocode.com>. The error messages come up correctly if you don't fill in the form properly, and I do get an email if it does get filled in. But I cannot make the form success message appear when it has been completed successfully.
  
  On the JS I have an success:
  
  ```
  function(response) {
      if (response.success) {
  
  ```
  
  Statement that holds some HTML that appears on an id and also another statement that hides the form completely.
  
  This does not work and I am wondering if there is a change in Craft 3 that means I have to change the code slightly?
  
  My else statement works perfectly.
  
  My JS is below
  
  ```
     <script>
      $('form').submit(function(ev) {
        // Prevent the form from actually submitting
        ev.preventDefault();
        var formData = new FormData($(this)[0]);
        // Send it to the server
        $.ajax('/', {    
          url:  '/',
          data: formData,
          type: 'POST',
          async: false,
          cache: false,
          contentType: false,
          processData: false,
          success: function(response) {
          if (response.success) {
            document.getElementById("notice").innerHTML = '<h2>Success!</h2><div class="row"><div class="6u"><img class="monkey" src="https://username_0.co.uk//images/monkey.svg"/> </div><div class="6u"><p>Thank you for your message</p><p>I will get back to you as soon as possible, usually within 24 hours</p><p>Talk soon! username_0</p></div></div>';
            // $('form')[0].reset();
            document.getElementById("form").style.display = "none";
          } 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']
              document.getElementsByName('fromName')[0].placeholder='Name is required';
              document.getElementsByName('fromEmail')[0].placeholder='Email is required';
              document.getElementsByName('message')[0].placeholder='Message is required';
              }
            }
            });
        });
  </script>
  
  ```
  
  My form is
  
  ```
  <div id="form">
      <form method="post" action="" accept-charset="UTF-8">
          <input type="hidden" name="CRAFT_CSRF_TOKEN" value="p_O1wR-QVP9G9WpcPZ90Fl4K82X8kOvZ33FAXa7fej9HSTOMW4zC_GWWsVDAVlvkr_TjeheMVdsk15JD5C8D-CSrFP0Ehb9kCoyHF42u_37Myy_akFOwXWJprfT4KWOqpzUhWd6r0ib9QLr7G2cDBUtxDH9JgIF3alyLyHuZhZXAO_eR79zoCVniIzlieZZi0FOsLQhYQxSpOVuzLDdFAg7P2U7zQBUXSJ1dnNXapMuyTUjLcuu3sJNFLzwozOcOGqo1K9kGRSTxXU2_bF4FctCHwoxe-gXSCLBcBRDzN1s9S7c9yNWZ6etHMC_7qxNXf31luALE9sgZ9dcy92c6gJaS2xggume9EOKnd4dLNMkRmiTEZeaIXTLvsXG5yplOqvNJ6aVhhW5XXpmRzh1ayJNXFGm7zuRHxDfOjFYmaVRmP0lJEK3tNCc_yowjrcDn8A_B4Z2JnGAx2hdvViDeVuQvnVEsajowmAp__gJ_FlRrm7gPlCRyYTzJLtSTls2fnDkCoB7b-9v6FURVfpmjRSyZfGqWVgRDpBV0xVo9dRc=">
          <input type="hidden" name="action" value="contact-form/send">
          <input type="hidden" name="redirect" value="b72e5e9e85a0ff7d840441aa540d6d32c6d554d22c025c8fc4dc8e0804c9475fcontact/thanks">
  
          <h3><label for="from-name">Your Name</label></h3>
          <input id="from-name" type="text" name="fromName" value="">
  
          <h3><label for="from-email">Your Email</label></h3>
          <input id="from-email" type="email" name="fromEmail" value="">
  
          <h3><label for="subject">Subject</label></h3>
          <input id="subject" type="text" name="subject" value="">
  
          <h3><label for="message">Message</label></h3>
          <textarea rows="10" cols="40" id="message" name="message"></textarea>
  
          <input type="submit" value="Send">
      </form>
  </div>
  
  ```
  
  Thanks in advance!
  
  **Tags:** craft3, ajax, plugin-contactform
  
  > **Comments:**
  > **username_1**: We need your html in order to help you. Your Javascript seems to be "correct". I know one could inspect  it on your website but people on smartphones might help you too when you post it  
  > **username_0**: Ok, thanks. I have added the form to the post. I am pretty sure the form should work, as it does on craft2, so must be a different success message, or I have missed something!  
  > **username_1**: As far as I can see you don't close your `</form>` and there is no `div` with id `notice` the response message from the controller still contains an attribute `success`. You can do `console.log(response)` to see what you get  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_2 on 2018-05-08. Score: 1
  
  Contact Form 2 (for Craft 3), still returns a JSON encoded `success: true` response on successful submission, but Craft 3 by default will only respond with JSON if `$request->getAcceptsJson()` returns `true` on a request.
  
  <https://github.com/craftcms/contact-form/blob/v2/src/controllers/SendController.php#L64-L66>
  
  Ultimately that ends up hitting the Yii 2 method [getAcceptableContentTypes](https://www.yiiframework.com/doc/api/2.0/yii-web-request#getAcceptableContentTypes()-detail) which checks the `$_SERVER['HTTP_ACCEPT']` server variable for the key `application/json`.
  
  So most likely your server is not configured to return `application/json` as a valid `HTTP_ACCEPT` content-type.
  
  
  ---
  
  