首页 > 解决方案 > Ajax 阻止发送表单

问题描述

我的 Ajax 脚本阻止发送我的表单。我希望我的 Ajax 脚本发送我的表单,而无需刷新我的页面。如果我在没有 Ajax 脚本的情况下使用我的表单和 PHP,它将表单发送到我的电子邮件就好了。但是当我添加 AJAX 以防止它刷新时,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>

阿贾克斯:

$(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;
    }
?>

这是网络回归的图片在此处输入图像描述

标签: phpajax

解决方案


使用.serialize()方法发送表单数据时,$_POST['submit']永远不会设置。这是预期的JQuery 行为

注意:只有“成功的控件”被序列化为字符串。由于未使用按钮提交表单,因此未序列化提交按钮值

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

修复它的最简单方法是在 PHP 端更改if条件:

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

推荐阅读