JQuery Ajax Post не переносит переменные - PullRequest
Новая
       2

JQuery Ajax Post не переносит переменные

0 голосов
/ 03 сентября 2018

Я пытаюсь использовать Jquery Ajax для отправки простой формы, но после нажатия кнопки «Отправить» страница перезагружается, значения формы отображаются в строке url, а переменные post никогда не попадают на страницу php. Похоже, это рассматривается как GET или что-то.

Форма выглядит следующим образом: 

<form id = "textform">
Sent To: <input type="tel" name="number" id="name" placeholder="+1 999 999 9999" required>
<br>
<br>
Message:<textarea name="message" form="textform" placeholder="Enter text message here..." required></textarea>
<br>
<br>
<input type="submit" value="Submit">
</form>

Код Ajax выглядит следующим образом: 

<script>

    $("textform").on("submit",function(e){
        e.preventDefault();

         let number = $(this).find("[name='number']").val();
         let message = $(this).find("[name='message']").val();

        $.post('/aws/sendtext.php', { number: number, message : message}),

            function(returnedData){
                document.getElementById("result").innerHTML = returnedData;

            }).fail(function(){

        document.getElementById("result").innerHTML = "Failed";
    });

    });

</script>

Не уверен, почему данные не приходят из формы и все еще обрабатываются как GET.

ОБНОВЛЕНИЕ - Добавлен порядок тегов HTML ниже: 

<?php
?>
<html>
<head>
<title>
</title>
</head>
<body>
<div>
<form>
</form>
</div>
<div>
</div>
<script>
</script>
</body>
</html>

1 Ответ

0 голосов
/ 03 сентября 2018

Вы не захватываете форму в своем jQuery, потому что вы используете $("textform") вместо $("#textform"). Это заставляет форму отправляться по умолчанию с помощью метода GET (поскольку вы не объявили ее в теге <form>).

Итак, это будет выглядеть примерно так: 

$("#textform").on("submit",function(e){
    e.preventDefault();

     let number = $(this).find("[name='number']").val();
     let message = $(this).find("[name='message']").val();

     $.post('/aws/sendtext.php', { number: number, message : message})
        .done(function(returnedData){
            document.getElementById("result").innerHTML = returnedData;
        }).fail(function(){
            document.getElementById("result").innerHTML = "Failed";
        });

});

и он должен работать правильно

JSFiddle: http://jsfiddle.net/79t2bem1/8/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...