CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Utkan
Utkan

Reputation: 129

Form Submit with using Jquery Ajax PHP

I know there is a lot of similar questions but I am working on this exact same problem for two days and I just gave up.

So after the form is submitted, I want to prevent the current page (updates.php) to redirect to another page (test.php). I am trying to do this with Jquery Ajax, but in this point, I am open to any solution.

updates.php:

<form action="test.php" method="post">                          
    <div class="row form-group">
        <div class="col-md-12">
            <label class="sr-only" for="name">Name</label>
            <input type="text" id="name" name="name" class="form-control" style="background:white;opacity:.5;border:none;" placeholder="Name:" required>
        </div>
    </div>

    <input type = "hidden" id="id" name = "id" value = "4" />

    <div class="row form-group">
        <div class="col-md-12">
            <label class="sr-only" for="subject">Comment</label>
            <input type="text" name="subject" id="subject" class="form-control" style="background:white;opacity:.5;border:none;" placeholder="Write a comment..." required>
        </div>
    </div>
    <div class="form-group">                                
        <input type="submit" value="Post Comment" class="btn btn-primary">                                                                          
    </div>
</form>

test.php:

<?php

$id = $_POST['id'];
$username = $_POST['name'];
$comment = $_POST['subject'];

if(!empty($username) || !empty($comment))
{

    $conn = mysqli_connect('localhost','Admin','admin123','website');

    if(!$conn)
    {
        echo "Connection Error: " . mysqli_connect_error();
    }
    else
    {
        $INSERT = "INSERT INTO comments (id, name, comment) VALUES (?,?,?)";

        $stmt = $conn -> prepare($INSERT);
        $stmt -> bind_param("iss", $id, $username, $comment);
        $stmt -> execute();
    }

}
else { echo "All fields are required"; die();}

?>

Whatever I did I couldn't stop test.php to open.

Upvotes: 0

Views: 81

Answers (1)

Aaron Plocharczyk
Aaron Plocharczyk

Reputation: 2832

Try this as your updates.php file instead:

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script>
            function submitWithAjax(){
                var name = document.getElementById("name").value;
                var id = document.getElementById("id").value;
                var subject = document.getElementById("subject").value;

                $.post( "test.php", {name: name, id: id, subject: subject})
                .done(function(data) {
                    alert( "Data Loaded: " + data );
                });
            }
        </script>
    </head>
    <body>
        <form>                          
            <div class="row form-group">
                <div class="col-md-12">
                    <label class="sr-only" for="name">Name</label>
                    <input type="text" id="name" name="name" class="form-control" style="background:white;opacity:.5;border:none;" placeholder="Name:" required>
                </div>
            </div>

            <input type = "hidden" id="id" name = "id" value = "4" />

            <div class="row form-group">
                <div class="col-md-12">
                    <label class="sr-only" for="subject">Comment</label>
                    <input type="text" name="subject" id="subject" class="form-control" style="background:white;opacity:.5;border:none;" placeholder="Write a comment..." required>
                </div>
            </div>
            <div class="form-group">                                
                <input type="submit" value="Post Comment" class="btn btn-primary" onclick="event.preventDefault();submitWithAjax();">                                                                          
            </div>
        </form>
    </body>
</html>

Upvotes: 1

Related Questions