HTML表單不會執行正確的操作，干擾

Question

我寫了以下網站，它使用了一個非常簡單的表單，並將該數據發送到mysql數據庫。我的問題是JavaScript/AJAX形式ID =「聯繫形式」腳本似乎與形式的行動來干擾=「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> 

這裏是我的插件。 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); 
} 

這裏是我的外形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後成功功能，形成-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 
}