JQuery сообщение для отправки HTML данных формы в php файл не работает - PullRequest
Новая
       32

JQuery сообщение для отправки HTML данных формы в php файл не работает

0 голосов
/ 22 марта 2020

Я новичок в Jquery, но я много сделал с html / php в прошлом. Что мне нужно сделать, это отправить данные из модального всплывающего окна, вставить их в базу данных mysql на локальном хосте, а затем открыть следующее всплывающее окно с помощью javascript. Поскольку перенаправление на страницу php не позволяет загрузить js, я рассмотрел использование jquery для отправки данных в мой phpfile, который затем вставит данные и вернет код в jquery, который затем загрузит следующее всплывающее окно, если сообщение было успешным. Я пробовал разные учебники, но я просто не могу заставить код работать. Ниже мой индексный файл. php, который содержит всплывающую форму и jquery код ... 

    <div id="survey1" class="w3-modal">
    <div class="w3-modal-content w3-animate-top w3-card-4">
        <div class="w3-container w3-padding-16">
            <div class="section-heading text-center">
                <div class="col-md-12 col-xs-12">
                    <h1>BASIC <span>DETAILS</span></h1>
                    <p class="subheading">The basics of your business and your website.</p>
                </div>
            </div>
            <form role="form" class="login-form" method="post" action="http://localhost/basic.php" id="basicForm">
                <div class="input-group form-group">
                    <span class="input-group-addon" id="basic-addon1"><i class="fas fa-envelope"></i></span>
                    <input type="text" class="form-control" placeholder="Full Name" aria-describedby="basic-addon1" name="name" id="name">
                </div>
                <div class="input-group form-group">
                    <span class="input-group-addon" id="basic-addon1"><i class="fas fa-envelope"></i></span>
                    <input type="text" class="form-control" placeholder="Email" aria-describedby="basic-addon1" name="email" id="email">
                </div>
                <div class="input-group form-group">
                    <span class="input-group-addon" id="basic-addon1"><i class="fas fa-envelope"></i></span>
                    <input type="text" class="form-control" placeholder="Business Name" aria-describedby="basic-addon1" name="bname" id="bname">
                </div>
                <div class="input-group form-group">
                    <span class="input-group-addon" id="basic-addon1"><i class="fas fa-envelope"></i></span>
                    <input type="text" class="form-control" placeholder="Business Type" aria-describedby="basic-addon1" name="btype" id="bemail">
                </div>
                <div id="response"></div>
                <button class="btn" type="submit" id="submit1" name="submit1" style="width:40%; float: right;"></button>
            </form>
            <script>
                $(document).ready(function(){
                    $('#basicForm').on('submit', function(e){
                        e.preventDefault();
                        $('#submit1').prop('disabled', true);
                        var name = $('#name').val();
                        var email = $('#email').val();
                        var bname = $('#bname').val();
                        var btype = $('#bemail').val();
                        if(name == '' || email == '' || bname == '' || btype == '')
                        {
                            $('#submit1').prop('disabled', false);
                        }
                        else
                        {
                            $.post(
                                'http://localhost/TDS/basic.php', 
                                $('#basicForm').serialize(),
                                function(data)
                                {
                                    $('form').triggered("reset");
                                    $('#submit1').prop('disabled', false);
                                }
                            );
                        }
                    });
                });
            </script>
        </div>
    </div>
</div>

А это мой php файл вставки ... 

<?php 
require('connection.php')

if(isset($_POST["name"]))
{
    $name = mysqli_real_escape_string($con, $_POST["name"]);
    $email = mysqli_real_escape_string($con, $_POST["email"]);
    $bname = mysqli_real_escape_string($con, $_POST["bname"]);
    $btype = mysqli_real_escape_string($con, $_POST["btype"]);

    $insert_query = "INSERT INTO Details ('Name', 'Email', 'Business Name', 'Businesss 
Type') VALUES ('".$name."', '".$email."', '".$bname."', '".$btype."')";
     if(mysqli_query($con, $insert_query))
    {
        echo json_enchode(success => 1);
    }
    else
    {
        echo json_enchode(success => 0);
    }
}
?>

Любая помощь будет высоко ценится!

1 Ответ

1 голос
/ 22 марта 2020

Сам код в порядке, но вам нужно загрузить jQuery.

Поместите это где-нибудь в начале вашего HTML: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

(советы по как включить jQuery см. здесь: https://www.w3schools.com/jquery/jquery_get_started.asp)

Кроме этого, код работал для меня: - Форма была отправлена ​​правильно; - Конечная точка PHP получила правильные данные POST;

Сохранение в БД я не проверял, но выглядит нормально. В любом случае, часть PHP выходит за рамки вопроса.

Кроме того, небольшая проблема заключается в самом коде: нет такого метода, как "$ ('form'). срабатывает ('reset'); ", используйте" $ ('form'). trigger ('reset'); " вместо этого.

...