Ajax阻止发送表单

时间:2019-01-09 01:33:55

标签: php ajax

我的Ajax脚本阻止发送我的表单。 我希望我的Ajax脚本发送表单,而无需刷新页面。 如果我使用我的表单和PHP而没有Ajax脚本,它会将表单发送到我的电子邮件就可以了。但是,当我从刷新中将AJAX添加到PREVENT时,Ajax脚本会运行,并返回它已经发送但没有发送,这是我的问题。

为什么我的AJAX脚本阻止了表单的发送?

HTML:

<form id="KontaktForm" action="e_Sender.php" method="post">
Fulde navn * <input type="text" class="form-control" id="FuldeNavm" type="text" name="fuldt_navn"><br>
Email * <input type="email" class="form-control" id="Email" name="email"><br>
Mobil * <input type="number" class="form-control" id="Mobil" name="mobil"><br>
Antal * <input class="form-control" id="Antal" type="number" name="antal"><br>
Besked *<br><textarea class="form-control" id="Besked" rows="5" name="message" cols="30"></textarea><br>
<input class="btn btn-info" id="Submit" type="submit" name="submit" value="Submit">
</form>

AJAX:

$(function () {
   $("#KontaktForm").on('submit', function (e) {
      e.preventDefault();
         $.ajax({
                 type: 'post',
                 url: 'e_Sender.php',
             data: $('form').serialize(),
             success: function () {
             alert('form was submitted');
         }
      });
   });
});

PHP:

<?php 
if(isset($_POST['submit'])){
    $to = "vejby3824@gmail.com"; // this is your Email address
    $from = $_POST['email']; // this is the sender's Email address
    $fuldt_navn = $_POST['fuldt_navn'];
    $mobil = $_POST['mobil'];
    $antal = $_POST['antal'];
    $subject = $fuldt_navn . " Efterspørger et tilbud!";
    $message = $fuldt_navn . "\n" . "Mobil Nummer: " . $mobil . "\n\n" . "Kommer med: " . $antal . "\n\n" . "De har skrevet følgende besked: " . "\n" . $_POST['message'];


    mail($to,$subject,$message);
    $url = 'Index.html';
    header('Location: ' . $url);
    exit;
    }
?>

以下是网络回归的图片enter image description here

1 个答案:

答案 0 :(得分:1)

使用.serialize()方法发送表单数据时,将永远不会设置$_POST['submit']。预计JQuery behavior

  

注意:只有“ successful controls”被序列化为字符串。由于没有使用按钮提交表单,因此没有序列化提交按钮的值

看看您的网络数据-没有submit字段。

最简单的解决方法是在PHP端更改if条件:

<?php 
if (isset($_POST['email'])) {
    // ...
}