Ajax message but cannot prevent update

I have a problem updating the page after ajax posts, I tried as 6 different options, and once I got the correct result, but I couldn’t stop the page refreshing and after searching the network and around this site now none of them work, and it’s all still refreshing ...

current code:

$('#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:

<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 getting this to work = /

Update: I pulled out another code that was not directly related, as it somehow cluttered the question. Also updated code to undo the latest version. I changed the ajax url to plain textAjax.php with plain echo hello world nothing else where I still don't get anything.

Update 2 Tried changing javascript code to:

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

... , , click ?

+5
6

, , :

$('#submit_btn').live('click', (function() {

, , , php, , , .:)

0

type = "submit" . type = "button" ajax .

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

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

preventDefault() , , , , ?

: , submit Enter, , , , . , preventDefault().

2: ajax. , :

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

AJAX

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

preventDefault() .

+1

<script>
function refreshpage(){
 (ajax code here)
  return false;
}
</script>

<form onsubmit="return refreshpage();">
<input type = "submit" value="submit_btn">
</form>
0

I had the same problem. Like you, I wrapped the tags <input>inside a pair of tags <form>. Despite the absence <submit>, I found that when I clicked on my button to call Ajax, it refreshed the page - and actually submitted the form to the page.

I ended up deleting tags <form>and this behavior stopped, but Ajax still works as expected. I hope this helps someone else who is experiencing this.

0
source

Use a loop to start an ajax call only once.

var i;
for(i=0;i<1;i++){
//ajax code here
} 

So then he won’t call again and again ..

0
source

All Articles