ajax post but can't prevent refresh

Question

I have a problem with my page refreshing after ajax posts, I've tried like 6 differing variations and at one point I was getting the proper result but couldn't stop the page from refreshing and after searching the net and around on this site now none of it is working and it's still refreshing...

current code is:

$('#submit_btn').click(function() {
/*event.preventDefault();*/
var curPassword = $("input#curPassword").val();
var newPassword = $("input#newPassword").val();
var new2Password = $("input#new2Password").val();
/*var params = 'curPassword='+ curPassword + '&newPassword=' + newPassword + '&new2Password=' + new2Password; */
var params = {
    curPassword: curPassword,
    newPassword: newPassword,
    new2Password:new2Password
};
$.ajax({
        type: "POST",
        url: "testAjax.php",
        data: params,
        success: function(msg){
            alert(msg);
        }
    });
    return false;
});

the form is:

<form method="post" action="" name="confirmChange" class="confirmChange">
<label for="curPassword">Current Password:</label>
<input type="password" name="curPassword" id="curPassword" value="" />
<label for="newPassword">New Password:</label>
<input type="password" name="newPassword" id="newPassword" value="" />
<label for="new2Password">Confirm New Password:</label>
<input type="password" name="new2Password" id="new2Password" value="" />
<br />
<input type="button" name="confirmChange" class="confirmChange" id="submit_btn" value="Change" />

Appreciate any help in getting this to work =/

Update: Took out the other non-directly-related code as it kinda cluttered the question. Also updated code to refelect latest revision. I changed the ajax url to a simple textAjax.php with a simple echo hello world nothing else, where I'm still getting nothing.

Update 2 Tried changing javascript code to:

$('#submit_btn').click(function() {
        alert('Button Clicked');
});

And I'm getting nothing... If that is the form below how is it possible the click function isn't working at all?

Answer 1

You don't need to use the type="submit" for your input. Just use type="button" and call the ajax function on the button's click event.

<input type="button" name="confirmChange" class="confirmChange" id="submit_btn" value="Change">

$('#submit_btn').click(function() {
  (ajax code here)
});

preventDefault() would also work, but, in my opinion, why prevent an event from naturally occurring when you can just avoid using the submit button altogether?

Update: I just realised that using the submit would allow users to hit enter to trigger your actions, so perhaps there's also some merit in that. In any case, here's a similar question that contains elaborations into preventDefault().

Update 2: You need to fix your parameters in the ajax function. Use an array instead of trying to build a query string:

var params = {
curPassword: curPassword,
newPassword: newPassword,
new2Password:new2Password
};

Answer 2

Encapsulate your AJAX call within the following code block

$('form.confirmChange').submit(function(event) {
      event.preventDefault();
      #Rest of your code goes in here
});

preventDefault() will prevent the default action of an event from triggering.