How to stop page reload

Question

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.

Incidentally, it looks like your code might generate duplicate element IDs. Note that [IDs](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) "must be unique in the whole document". — showdev, Aug 13 '19 at 16:13
Possible duplicate of [How to prevent page from reloading after form submit](https://stackoverflow.com/questions/45634088/how-to-prevent-page-from-reloading-after-form-submit-jquery). Also see [Prevent page from refreshing after an ajax call](https://stackoverflow.com/questions/40362821/prevent-page-from-refreshing-after-an-ajax-call) and [Stop form refreshing page on submit](https://stackoverflow.com/questions/19454310/stop-form-refreshing-page-on-submit). — showdev, Aug 13 '19 at 16:16

score 3 · Answer 1 · edited Aug 13 '19 at 16:57

3

You can use:

event.preventDefault()

after

$('#like').keypress(function(event) {

to stop reloading the page.

edited Aug 13 '19 at 16:57

Jay Blanchard

34,243
16
77
119

answered Aug 13 '19 at 16:12

Suraj Singh

142
4

The page still reloads :/ – user53267891023 Aug 13 '19 at 16:59
You can use class instead of id because id is unique for all the elements of DOM. and replace the line " – Suraj Singh Aug 14 '19 at 07:05

score 1 · Answer 2 · answered Aug 13 '19 at 16:13

1

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.

answered Aug 13 '19 at 16:13

Fullstack Developer

339
4
14

Why do we insist on using inline JavaScript? – Jay Blanchard Aug 13 '19 at 16:58

Ahsan Abrar · Answer 3 · 2019-08-13T17:34:35.900

1

try this

event.preventDefault();

after this

$('#like').keypress(function(event) {

edited Aug 13 '19 at 17:34

answered Aug 13 '19 at 16:17

Ahsan Abrar

139
3
13

2

Do or do not. There is no "try". A ***good answer*** will always have an explanation of what was done and why it was done in such a manner, not only for the OP but for future visitors to SO. – Jay Blanchard Aug 13 '19 at 16:56
The page still reloads. – user53267891023 Aug 13 '19 at 16:59
change button type submit to button – Ahsan Abrar Aug 13 '19 at 17:28

score 0 · Answer 4 · answered Aug 13 '19 at 16:20

0

You cannot change form's default behaviour so just add onsubmit="return false":

<form onsubmit="return false"></form>

return false will prevent form submit

answered Aug 13 '19 at 16:20

Ritesh Khandekar

3,885
3
15
30

Why do we insist on using inline JavaScript? – Jay Blanchard Aug 13 '19 at 16:58
@Jay Blanchard If in case `jQuery.js ` is not loaded & just form is loaded then inline JavaScript will prevent form from submitting. – Ritesh Khandekar Aug 13 '19 at 17:32
You do not need inline JavaScript even when you're using VanillaJS. – Jay Blanchard Aug 13 '19 at 17:35
But there is no difference between VanillaJS & JS, am I right? – Ritesh Khandekar Aug 13 '19 at 17:39
LOL. Yes - VanillaJS *is just* JS. And you do not need to use it inline. – Jay Blanchard Aug 13 '19 at 17:40
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/197887/discussion-between-rk003-and-jay-blanchard). – Ritesh Khandekar Aug 13 '19 at 17:48
2

For maintainability using inline JavaScript should not be done. You should seek to separate code from markup. Use a handler to capture the click, then use `preventDefault()` – Jay Blanchard Aug 13 '19 at 17:54

How to stop page reload

4 Answers4