javascript - HTML 表单不会执行正确的操作，干扰

Question

我编写了以下网站，它使用非常简单的表单并将该数据发送到 mysql 数据库中。我的问题是 javascript/ajax 表单 id="contactForm"脚本似乎干扰了表单 action="insert.php"

这是我的基本 html:

 <form action="insert.php" method="post" id="contactForm" role="form"  data-toggle="validator" class="shake">
        <div class="row">
            <div class="form-group down col-sm-6">
                <label for="name" class="h4">Voor en achternaam.</label>
                <input name="naam" type="text" class="form-control" id="name" placeholder="Voornaam Achternaam" required data-error="Vergeet deze niet!">
                <div class="help-block with-errors"></div>
            </div>
     </div>
 <button value="Submit" style="background-color: #75963c;" type="submit" id="form-submit" class="btn btn-success btn-lg pull-right ">Submit</button>
        <div id="msgSubmit" class="h3 text-center hidden"></div>
        <div class="clearfix"></div>
    </form>

这里是我的 insert.php 将数据放入 mysql 数据库:

<?php
$con = mysql_connect("mydatabaseip","mydbuser","mydbpassword");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("mydbname", $con);

$sql="INSERT INTO nametable (naam) VALUES('$_POST[naam]')";

if (!mysql_query($sql,$con))
  {
  die('Error: ' . mysql_error());
  }


echo "1 record added";

mysql_close($con)
?>

这是我用于发送电子邮件的 ajax/javascript:

$("#contactForm").validator().on("submit", function (event) {
    if (event.isDefaultPrevented()) {
        // handle the invalid form...
        formError();
        submitMSG(false, "Did you fill out everything correctly?");
    } else {
        // everything looks good!
        event.preventDefault();
        submitForm();
    }
});
function submitForm(){
    // Initiate Variables With Form Content
    var name = $("#name").val();

    $.ajax({
        type: "POST",
        url: "php/form-process.php",
        data: "name=" + name,
        success : function(text){
            if (text == "success"){
                formSuccess();
            } else {
                formError();
                submitMSG(false,text);
            }}});
}
function formSuccess(){
    $("#contactForm")[0].reset();
    submitMSG(true, "Message received!")
} 
function formError(){
    $("#contactForm").removeClass().addClass('shake animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
        $(this).removeClass();
    });
}
function submitMSG(valid, msg){
    if(valid){
        var msgClasses = "h3 text-center tada animated text-success";
    } else {
        var msgClasses = "h3 text-center text-danger";
    }
    $("#msgSubmit").removeClass().addClass(msgClasses).text(msg);
}

这是我的 form-process.php:

<?php

$errorMSG = "";

// NAME
if (empty($_POST["name"])) {
    $errorMSG = "Name is required ";
} else {
    $name = $_POST["name"];
}



$EmailTo = "myemail@outlook.com";
$Subject = "form info.";

// prepare email body text
$Body = "";
$Body .= "Name: ";
$Body .= $name;
$Body .= "\n";


// send email
$success = mail($EmailTo, $Subject, $Body, "From:".$name);

// redirect to success page
if ($success && $errorMSG == ""){
   echo "success";
}else{
    if($errorMSG == ""){
        echo "Something went wrong :(";
    } else {
        echo $errorMSG;
    }

}
?>

这两个文件似乎相互干扰。可能是因为它们都对同一个元素执行操作 - 表单元素。我一直在努力让它运行起来，但不知道该怎么做。如果我让 id="contactForm"在那里，它将执行但 action="insert.php"不会。

感谢所有帮助。

Answer 1

发生这种情况是因为您试图对两个单独的提交使用相同的表单。如果你问我，这有点奇怪的设计......为什么不直接回发所有数据，然后直接从 insert.php 回发脚本调用 form-process.php 中的任何内容？这样，您将只有一个帖子发送到服务器，而不是两个。

无论如何，如果您想坚持使用它，它会“干扰”，因为您的提交处理程序中有这一行:

event.preventDefault();

这可以防止提交按钮的“默认”行为，即根据 <form> 中的设置使用完整回发提交表单。标签。

如果您仍然希望这两个操作都有效，则需要等待 ajax 调用成功完成，然后才能安全地进行主回发。为此，您可以添加另一行以手动触发主提交。在将 ajax 发布到 form-process.php 的成功函数中，更改

if (text == "success"){
  formSuccess();
}

到

if (text == "success"){
  submitMSG(true, "Message received!");

  $("#contactForm").submit(); //this will submit the form to insert.php as per the form tag using a full page postback
}