My ajax script will not return data to the page that was not suppose to refresh

[rdkurth]

The three scripts below are working except when it returns "Successfully Inserted" it creates a new page. It is suppose to return "Successfully Inserted" between the <span> tags in the index.php page

 

 

index.php
 
<form id="myForm" action="userInfo.php" method="post">
Name: <input type="text" name="name" /><br />
Age : <input type="text" name="age" /><br />
<button id="sub">Save</button>
</form>
 
<span id="result"></span>
 
my_script.js
 
$("#sub").click( function() {
 $.post( $("#myForm").attr("action"),
         $("#myForm :input").serializeArray(),
         function(info){ $("#result").html(info);
   });
 clearInput();
});
 
$("#myForm").submit( function() {
  return false;    
});
 
function clearInput() {
    $("#myForm :input").each( function() {
       $(this).val('');
    });
}
 
 
userinfo.php
 
    include_once('db.php');
 
        $name = $_POST['name'];
        $age = $_POST['age'];
 
        if(mysql_query("INSERT INTO user VALUES('$name', '$age')"))
          echo "Successfully Inserted";
        else
          echo "Insertion Failed";

[gristoi]

if your using ajax to submit the form then you need to prevent the forms native submission, otherwise the page will reload:

$("#sub").click( function() {
 $.post( $("#myForm").attr("action"),

should be 

$("#sub").click( function(e) {
//stop the click event from bubbling
 e.preventDefault();
 $.post( $("#myForm").attr("action"),.....);
..............
return false; // at end 
}

[rdkurth]

 

if your using ajax to submit the form then you need to prevent the forms native submission, otherwise the page will reload:

$("#sub").click( function() {
 $.post( $("#myForm").attr("action"),

should be 

$("#sub").click( function(e) {
//stop the click event from bubbling
 e.preventDefault();
 $.post( $("#myForm").attr("action"),.....);
..............
return false; // at end 
}

I changed it  but it is still make page reload any other ideas

 

$("#sub").click( function(e) {

    //stop the click event from bubbling

     e.preventDefault();

 $.post( $("#myForm").attr("action"),

         $("#myForm :input").serializeArray(),

         function(info){ $("#result").html(info);

         return false; // at end  

   });

 clearInput();

});

 

$("#myForm").submit( function() {

  return false;    

});

 

function clearInput() {

    $("#myForm :input").each( function() {

       $(this).val('');

    });

}

[AJinNYC]

Just a shot in the dark but you are pulling in the jQuery library, right? I'm assuming so, but I don't see it in the code posted, so thought I'd check. 

[rdkurth]

plunged it into full on production form and it worked don't no why it would not work with this little test form

 

Thanks for the help