Отправка формы с использованием JQuery Ajax PHP

Я знаю, что есть много похожих вопросов, но я работаю над той же самой проблемой в течение двух дней и просто сдался.

Поэтому после отправки формы я хочу предотвратить перенаправление текущей страницы (updates.php) на другую страницу (test.php). Я пытаюсь сделать это с помощью JQuery Ajax, но на данный момент я открыт для любого решения.

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();}

?>

Что бы я ни делал, я не мог остановить открытие test.php.

Источник
  • 0
    на вашей вставке удалите id , скорее всего, это первичный ключ
  • 0
    Раз уж вы говорили об ajax, вы спрашиваете о коде JS или PHP? В любом случае, пожалуйста, опубликуйте весь соответствующий код (например, ваш запрос ajax), включая правильное описание вашей реальной проблемы.
  • 0
    Yoc может использовать для этого функцию preventDefault.
Codelisting
за 1 против
Лучший ответ

Попробуйте вместо этого использовать этот файл updates.php:

<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>
Codelisting
Популярные категории
На заметку программисту