PHP response fades away - php

Question

I am trying to get response trough ajax,my code (index.html) :
<button id="register">Register</button>
<p id="result">xxx</p>
<script>
$("#register").click(function(){
$.ajax({
url:'registration.php',
type: 'POST',
success:function(response){
$("#result").html(response)
}
})
})
</script>
and php (registration.php):
<?php
echo "yyy"
?>
I am working with xampp, I get response but it fades from page instantly. And again xxx is present inside p tag, does anyone know what is the reason why this happens.
Thanks

Answer 1

It appears that when you click the button to get your response, it also refreshes the page in your browser. You can try the following to prevent this:
<script>
$("#register").click(function(evt) {
evt.preventDefault()
$.ajax({
url:'registration.php',
type: 'POST',
success: function (response) {
$("#result").html(response)
}
})
})
</script>
This prevents your browser from doing what it normally does when you click a button.Any button inside <form>tags will automatically send a GET request within the current window, causing the page to refresh. The other alternative to preventDefault() is to use the attribute type="button" on your button and this will stop the button from being a type="submit" button.
You can read more detailed information about the function I've used here:
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
https://api.jquery.com/event.preventdefault/

Answer 2

Just prevent page before submitting.
<input type='submit' id='register'>
<div id='result'></div>
$("#register").click(function(e){
e.preventDefault();
$.ajax({
url:'registration.php',
type: 'GET',
success:function(response){
document.getElementById("result").innerHTML = response;
}
})
});