</div>
</div>
<div class="grid--cell mb0 mt4">
<a href="/questions/45634088/how-to-prevent-page-from-reloading-after-form-submit-jquery" dir="ltr">How to prevent page from reloading after form submit - JQuery</a>
<span class="question-originals-answer-count">
(1 answer)
</span>
</div>
<div class="grid--cell mb0 mt8">Closed <span title="2019-08-13 16:58:29Z" class="relativetime">9 months ago</span>.</div>
</div>
</aside>
I'm trying to use ajax jquery to stop my page from reloading whenever the button is pressed, but the page is still reloading after I implemented it.
This is just a test system for "liking" a post.
//foreach loop that echos out row
foreach($dbData as $post){
<p id="likecount" class = "likecount"> </p>
<p>
<form method="post" id="liketest" class="redirect" >
<button type="submit" id="like" name="like" value= "'.$post["id"].'">
<i class="fa fa-heart"></i>
</button>
</form>
</p>
}
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#like').focus();
$('#like').keypress(function(event) {
var key = (event.keyCode ? event.keyCode : event.which);
if (key == 13) {
var info = $('#like').val();
$.ajax({
method: "POST",
url: "index.php",
data: {like: info},
success: function(status) {
$('#likecount').append(status);
$('#like').val('');
}
});
};
});
});
</script>
<?php
if (isset($_POST['like'])) {
echo '<h1>'.$_POST['like'];
}
?>
I expect it to not reload the page but the actual output is the page still reloading once the button is clicked.
</div>
You can use:
event.preventDefault()
after
$('#like').keypress(function(event) {
to stop reloading the page.
Please change your code like this.
<form method="post" id="liketest" class="redirect" onSubmit="return false;">
Then, you must have to send form data with ajax. It's the best way to send a post request without page reload.
try this
event.preventDefault();
after this
$('#like').keypress(function(event) {
You cannot change form's default behaviour so just add onsubmit="return false":
<form onsubmit="return false"></form>
return false will prevent form submit