Getting “405 Not Allowed” after doing an Ajax post request for same domain

Question

I would expect this to happen for CORS but I'm literally attempting something in the same domain and I'm at a loss.

I simple html form:

<form action="" method="post" class="wpcf7-form contact-form">
            <div class="contact-input-fields">
              <p>
                <span class="wpcf7-form-control-wrap">
                  <label for="name">Name*</label>
                  <input type="text" id="name" name="name" value="" class="wpcf7-form-control" required="">
                </span>
              </p>
              <p>
                <span class="wpcf7-form-control-wrap">
                  <label for="email">Email*</label>
                  <input type="email" id="email" name="email" value="" class="wpcf7-form-control" required="">
                </span>
              </p>
              <p>
                <span class="wpcf7-form-control-wrap">
                  <label for="subject">Subject*</label>
                  <input type="text" id="subject" name="subject" value="" class="wpcf7-form-control" required="">
                </span>
              </p>
            </div><!-- /.contact-input-fields -->

            <p>
              <span class="wpcf7-form-control-wrap">
                <label for="message">Message*</label>
                <textarea id="message" name="message" class="wpcf7-form-control" required=""></textarea>
              </span>
            </p>

            <p class="choose-table-form"> 
              <input type="submit" id="submit" value="Enviar" class="wpcf7-form-control wpcf7-submit" style="max-width:100%;"> 
            </p>
          </form><!-- /.contact-form -->

This is my javascript:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script type="text/javascript">
    $(function() {
        $(".success").hide();
        $("#submit").click(function() {
            var data = {
                name: $("#name").val(),
                email: $("#email").val(),
                subject: $("#subject").val(),
                message: $("#message").val()
            };

            $.ajax({
                url: "forms/contactForm.php",
                type: "POST",
                data: data,
                success: function(data){
                    $(".success").fadeIn(1000);
                }
            });
        });
    });
  </script>

and my PHP:

<?php
if($_POST){
    $name = $_POST['name'];
    $email = $_POST['email'];
    $subject = $_POST['subject'];
    $message = $_POST['message'];
    $msg = "Name: ".$name."\nEmail: ".$email."\Subject: ".$subject."\nMessage: ".$message;

//send email
    mail("email@domain.com", "Message" .$email, $msg);
}

I don't see anything wrong but everytime I press "submit" and trigger the ajax call I get the "405 Not Allowed".

I've looked around at other answers here but they're mostly CORS related.

Answer 1

I don't see any div with success class on it, so you need to add that to your HTML, I used bootstrap so it uses alert-success

<div class="alert-success">Done!</div>

And in your jQuery code, use preventDefault(); and the full url to the php file

$(".alert-success").hide();
$("#submit").click(function(e) {
        e.preventDefault();
        var data = {
            name: $("#name").val(),
            email: $("#email").val(),
            subject: $("#subject").val(),
            message: $("#message").val()
        };

        $.ajax({
            url: "http://localhost/jquery/forms/contactForm.php",
            type: "POST",
            data: data,
            success: function(data){
                $(".alert-success").fadeIn(1000);
            }
        });
    });

Also, make sure you are testing this within a server, whether localhost using wamp or xampp or on a live server.