AJAX POST incorrectly works like GET

Question

I am trying to post contact page data to my view, but it stopped working when I included if else statements.

Here is my script:

<script>
 function Submit()
{
    var name = document.getElementById('contact-name').value;
    var email = document.getElementById ('contact-email').value;
    var subject = document.getElementById ('contact-subject').value;
    var message = document.getElementById ('contact-message').value;
    var data =  {"name":name,"email":email,"subject":subject,"message":message,csrfmiddlewaretoken:'{{ csrf_token }}'};
    if (name && email && message)
  {
    $.ajax({ // create an AJAX call...
        data: data, // get the form data
        type: "POST", // GET or POST
        url: "", // the file to call
        dataType: "json",
        success: function(response) { // on success..
                alert(response['message']);

        }
    });

    }else
    {
    return true;
    } 
}
</script>

And here is my form:

        <form class="contact-form">
        {% csrf_token %}
            <p class="input-block">
                <label for="contact-name"><strong>Name</strong> (required)</label>
                <input type="text" name="name" value="" id="contact-name" required>
            </p>

            <p class="input-block">
                <label for="contact-email"><strong>Email</strong> (required)</label>
                <input type="email" name="email" value="" id="contact-email" required>
            </p>

            <p class="input-block">
                <label for="contact-subject"><strong>Subject</strong></label>
                <input type="text" name="subject" value="" id="contact-subject">
            </p>

            <p class="textarea-block">
                <label for="contact-message"><strong>Your Message</strong> (required)</label>
                <textarea name="message" id="contact-message" cols="88" rows="6" required></textarea>
            </p>

            <div class="hidden">
                <label for="contact-spam-check">Do not fill out this field:</label>
                <input name="spam-check" type="text" value="" id="contact-spam-check" />
            </div>

            <input type="submit" value="Submit" onclick="javascript:Submit();">

            <div class="clear"></div>

        </form>

Without the if else it was working fine but now all pages are reloading with all form data as query parameters. How can I correct this?

Answer 1

First you need to prevent the default action if you are trying to do AJAX. Since, I see you are already using jQuery. I recommend adding the following to the top of your <script> :

$("#contact-form").submit(function(e){
   e.preventDefault();
   Submit();
});

Obviously, you won't need this anymore..

onclick="javascript:Submit();"

Now run this code in any sort of javascript debugger (Chrome and Safari both have good ones) and you should be good!

Answer 2

You need to return a false from your Submit() function. Also, call the function from the form tag using onsubmit handle.

<form class="contact-form" onsubmit="Submit();">

and in Submit() function:

        success: function(response) { // on success..
            alert(response['message']);
        }
    });
    return false;
} else {
    return true;
}

Answer 3

Try this please..i hope it works...

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".contact-form").submit(function(e){
            e.preventDefault();
            Submit();
});
});

</script>
<script>
 function Submit()
{
    var name = document.getElementById('contact-name').value;
    var email = document.getElementById ('contact-email').value;
    var subject = document.getElementById ('contact-subject').value;
    var message = document.getElementById ('contact-message').value;
    var data =  {"name":name,"email":email,"subject":subject,"message":message,csrfmiddlewaretoken:'{{ csrf_token }}'};
    if (name && email && message)
  {
    $.ajax({ // create an AJAX call...

        data: data, // get the form data
        type: "POST", // GET or POST
        url: "", // the file to call
        dataType: "json",
        success: function(response) { // on success..
            alert(response['message']);

        }
    });
    return false;
}
}

Answer 4

1. Do not use javascript: in an onxxx event handler. javascript: is a protocol specifier that goes on a URL, but the onclick handler expects raw javascript, not a URL.

2. You need to return false from the onclick to prevent the default action of submitting the form. I assume you do want to prevent the default and use AJAX instead?