HTML表单不会执行正确的操作,干扰

时间:2016-07-13 07:39:08

标签: javascript php mysql ajax database

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

这是我的基本html:

set :public_folder, Proc.new { File.join(root, "static") }

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

 <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>

以下是我发送电子邮件的ajax / javascript:

<?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)
?>

这是我的form-process.php:

$("#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);
}

不知何故,这两个文件似乎相互干扰。可能是因为它们都对同一个元素 - 表单元素执行操作。我一直在努力让这个运行,但无法弄清楚如何这样做。如果我让id =“contactForm”在那里它会执行但是action =“insert.php”不会。

感谢所有帮助。

1 个答案:

答案 0 :(得分:2)

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

无论如何,如果你想坚持下去,它会因为提交处理程序中的这一行而“干扰”:

event.preventDefault();

这会阻止提交按钮的“默认”行为,即根据<form>标记中的设置使用完整回发提交表单。

如果您仍希望同时执行这两项操作,则需要等待ajax调用成功完成,然后才能安全地进行主回发。为此,您可以添加另一行以手动触发主提交。在ajax post到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
}