javascript - Page getting refreshed even after calling ajax -

javascript - Page getting refreshed even after calling ajax -

<section class="owner-sec sec1"> <section class="owner-txt"> <div class="first-name"> <?php echo $first_name ?></div> <div class="last-name"> <?php echo $last_name ?></div> </section> <section class="bttn-save-owner bttn-save-owner1" style="display:none" > <button id="savebtn1" onclick ="savevalue($(this),this.id)" class="save-bttn">save changes </button> </section> </section>

////////////////////////////////////////

javascript code

function savevalue(target,id){ var userid = <?php echo $user_id ?>; var bttnid = id.split('savebtn'); if(bttnid[1]==1){ var bttnid=1; var firstname = $('.first-name').text(); var lastname = $('.last-name').text(); $.ajax({ url: "<?php echo $this->webroot;?>update.php", datatype: "json", async: false, type: "post", data: { 'firstname': firstname, 'lastname': lastname, 'userid': userid, 'bttnid':bttnid }, success: function (data) { } }); }

you should avoid onclick="..." because it's harder maintain , can lead mistake. instead add together listener on click event , stop default action (submit form)

document.getelementbyid("savebtn1").addeventlistener("click", function(event){ event.preventdefault(); // other stuff });

or if using jquery (and seems are)

$('#savebtn1').click(function(e){ e.preventdefault(); // other stuff });

javascript ajax html5