我写了以下网站,它使用一个非常简单的表单并将该数据发送到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”不会。
感谢所有帮助。
答案 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
}