How to prevent form refresh but submit form data on same page?

Question

My form kept submitting and then refreshing so I looked at How to prevent page from reloading after form submit - JQuery to figure out how to stop it. The difference in the answer, however, with my solution was that I was submitting the form to itself.

Here's my code:

HTML

<form autocomplete="off" method="post" name="rp">
    <input placeholder="Code" type="text" name="code" required>
    <button type="submit">Submit</button>
</form>

PHP

<?php 

$response = "";

if(isset($_POST['code'])){

    echo "<script> alert('test'); </script>";

    $password = $_POST["code"]; 

    $result = $connection->query("SELECT * FROM Users WHERE passwords = '$password' LIMIT 1");

    if($result->num_rows != 0) {  

        // unpack object
        $data = mysqli_fetch_array($result);

        // retrieves user ID  (set into a cookie for x amount of time?)
        $id = $data["ID"];                

        mysqli_close($connection);    

        echo "<script> alert('test 2'); </script>";
        $response = "test 2";
        header("Location: assessment.php");

    } else {

        $response = "test 3";
        echo "<script> alert('test 3'); </script>";
        mysqli_close($connection);   

    }

}

?>

JS

$("form").submit(function (e) {

    // prevent page refresh
    e.preventDefault();

    var formData = $(this).serialize();

    // Make AJAX request
    $.post("login.php", formData);

});

I want the form to submit the data but not refresh. What am I doing wrong?

EDIT: The problem has been narrowed down to the php. Since the request is through javascript, what should the name in the if-statement argument be. It can't be 'rp'.

So I found out something extremely curious. When I changed the if statement to if(isset($_POST['code']){} as some urged me to in the comments and I entered in the correct password, it follows the correct loop and produces this error:

VM1368 jquery.min.js:2 GET http://localhost:8080/assessment 404 (Not Found)

However, it does not produce the alert code I place before the header(). When I put in an incorrect password, it also doesn't do anything (even though I have an else statement). I've updated the php section to include most of the code. The $response variable and the echo/alerts are for debugging.

Final Edit: Ironically, the reason none of my debugging wasn't working was because the page wasn't refreshing so alerts and variable updates wouldn't happen. (My quest to stop page refresh created all these problems). The solution to my original question was provided by MH2K9 and Toni Michel Caubet in the comment section. Thank you to them and others who tried to help.

Suggestion: use `return false;` after `$.post("login.php", formData);` — devpro, Aug 02 '19 at 16:27
There's a chance that some of your other JS is throwing an error and therefore making other JS non-functional. — Funk Doc, Aug 02 '19 at 16:32
@MH2K9 No error. Just did some debugging and narrowed it down to the php statement. The if-statement is the problem. Is it because the post isn't from the form itself? — Billie, Aug 02 '19 at 16:35
Form submit the input type element's value but not from name. You need to check `if(isset($_POST['code'])){ }`. — MH2K9, Aug 02 '19 at 16:38
I'm not sure, but i think name on form is not sent to the server. could you check `if(isset($_POST['code'])){` ? — Toni Michel Caubet, Aug 02 '19 at 16:38
Still nothing. It is definitely a problem with the argument though. — Billie, Aug 02 '19 at 16:43

score 0 · Answer 1 · answered Aug 02 '19 at 16:43

Try this :

HTML :

<form autocomplete="off" method="post" name="rp" onsubmit="return false;">
    <input placeholder="Code" type="text" name="code" required>

    <br>
    <button type="submit">Submit</button>
    <button id="back_button" type="button"><img src="pics/back_arrow.png">Back</button>
</form>

JS:

$("form").submit(function (e) {
    // prevent page refresh
    e.preventDefault();
    var formData = $(this).serialize();
    // Make AJAX request
    $.post("login.php", formData , function(data) {
        alert(data);
        $("form").reset();      
    });
});

A little explanation might be helpful. What is the problem and how does your code solve it? — showdev, Aug 02 '19 at 18:34

score 0 · Answer 2 · answered Aug 02 '19 at 16:46

0

You can alternatively call a function using the onsubmit attribute in HTML.

<form onsubmit='return preventSubmit(e)'>
    // form content
</form>

<script>
    function preventSubmit(e) {
        e.preventDefault()
        return false
    }
</script>

answered Aug 02 '19 at 16:46

Nathan Fries

1,464
5
15

How to prevent form refresh but submit form data on same page?

2 Answers2