ajax request does not stop page from refreshing

Question

what is wrong with this ajax request? the page is still reloading without giving any popups. if i remove everything after the "event.preventDefault();" it will stop page reload so i figure it must something with how i'm using the ajax method. This is for a php-self validating form

<script type="text/javascript">
             //attach submit event handler to the form
       $('#rsgform1').submit(function(event) {

           //prevent the form from submitting by default
           event.preventDefault();

         //Clear result div
       $("#rsgresult").html('');

         //get values from from
          var values = $(this).serialize();

           // do an ajax request   
         $.ajax({
             url: "contact.php",  
            type: "post",
            data: values,
            success: function(){
              alert("success");
              $("#rsgresult").html('Submitted successfully');
            },
            error:function(){
               alert("failure");
             $("#rsgresult").html('There is error while submit');
            }

        });
         </script>

Answer 1

your script has a missing pair of closing brackets }) at the end

$('#rsgform1').submit(function (event) {

    //prevent the form from submitting by default
    event.preventDefault();

    //Clear result div
    $("#rsgresult").html('');

    //get values from from
    var values = $(this).serialize();

    // do an ajax request   
    $.ajax({
        url: "contact.php",
        type: "post",
        data: values,
        success: function () {
            alert("success");
            $("#rsgresult").html('Submitted successfully');
        },
        error: function () {
            alert("failure");
            $("#rsgresult").html('There is error while submit');
        }

    });
});// <-- missing this closing pair

Answer 2

You forgot to close the ajax call...

<script type="text/javascript">
             //attach submit event handler to the form
       $('#rsgform1').submit(function(event) {

           //prevent the form from submitting by default
           event.preventDefault();

         //Clear result div
       $("#rsgresult").html('');

         //get values from from
          var values = $(this).serialize();

           // do an ajax request   
         $.ajax({
             url: "contact.php",  
            type: "post",
            data: values,
            success: function(){
              alert("success");
              $("#rsgresult").html('Submitted successfully');
            },
            error:function(){
               alert("failure");
             $("#rsgresult").html('There is error while submit');
            }
         });

       });
     </script>

Answer 3

Try return false at the end of the callback function.

And don't forget to balance your braces as others have mentioned.

Answer 4

You have an error in your JS. When an error occurs, the page refreshes.

<script type="text/javascript">
   $('#rsgform1').submit(function(event) {
       event.preventDefault();

       $("#rsgresult").html('');
       var values = $(this).serialize();

       $.ajax({
         url: "contact.php",  
         type: "post",
         data: values,
         success: function() {
           alert("success");
           $("#rsgresult").html('Submitted successfully');
         },
         error:function() {
           alert("failure");
           $("#rsgresult").html('There is error while submit');
         }
       }); // Missing
   });
</script>