AJAX Form is submitting to itself?

Question

I don\'t know what is going on here tonight, but I can\'t seem to get AJAX working. When the form is submitted, it refreshes the page with the values in the URL. I\'m using a va

Answer 1

you need to cancel the default behaviour of submit button

$(".button").click(function(e) {
            e.preventDefault();
            //rest of your code here
            var dataString = "fname=" + $("#firstName").val();
            alert(dataString);
            $.ajax({

Answer 2

You need to cancel the default behaviour of the submit button(submit the form not ajax).
It can be done with preverntDefault() on the event object or with return false;

   $(".button").click(function(e) {
        var dataString = "fname=" + $("#firstName").val();
        alert(dataString);
        $.ajax({
            type: "POST",
            url: "http://www.jacobsmits.com/demos/scripts/contact_form.php",
            data: dataString,
            success: function(result) {
                if(result == "Success"){
                    alert("Success");
                }else{
                    alert("Fail");
                }
            }
        });
        return false; /// <=== that was missing.
        e.preventDefault(); /// Or this.
    });

There is a submit event, so better listen to this event instead of the click button:

   $("#contact_form").submit(function(e) {
        var dataString = "fname=" + $("#firstName").val();
        alert(dataString);
        $.ajax({
            type: "POST",
            url: "http://www.jacobsmits.com/demos/scripts/contact_form.php",
            data: dataString,
            success: function(result) {
                if(result == "Success"){
                    alert("Success");
                }else{
                    alert("Fail");
                }
            }
        });
        return false; /// <=== that was missing.
        e.preventDefault();  /// Or this.
    });