js需要的警報框才能正常工作

Question

我有一個表單填寫，當你點擊提交按鈕時，調用一個js腳本，通過它調用一個php腳本來獲取結果並將它們顯示在用戶的表單中一個警告框。

奇怪的是，如果我在我的js中有alert（「msg」）「命令（你可以在下面看到它）evertyhing工程很好，但如果我刪除它似乎沒有任何工作....任何想法爲什麼發生這種情況？ 日Thnx

<form action="#" method="post"> 
<label for="userFirstName">Name </label> 
<input name="userFirstName" id="userFirstName" type="text" placeholder="First Name"  autofocus /><br> 
<label for="userLastName">Surname </label> 
<input name="userLastName" id="userLastName" type="text" placeholder="Surname" /><br> 
<label for="phonenumber">Phone Number</label> 
    <input name="phonenumber" id="phonenumber" type="text" placeholder="Your Telephone Number(10 digits))" /><br> 
<label for="email">Email Address</label> 
<input name="email" id="email" type="text" placeholder="Your Email Address" /><br> 
<button class="clearbutton" type="submit" value="Submit" onclick="checkInput(userFirstName.value,userLastName.value,phonenumber.value,email.value)">Add Partner</button> 

JS腳本

//the first is the file and the second the value 
function checkInput(name,surname,tel,email) { 
//alert(name+" "+surname+" "+tel+" "+email);  
xmlhttpURL=GetXmlHttpObjectURL(); 
if (xmlhttpURL==null) { 
    alert ("Your browser does not support AJAX!"); 
    return; 
} 

var url = "AddPartnersDb.php"; 
url = url + "?n=" + name + "&l=" + surname + "&t=" + tel + "&m=" + email;       
    // Adds a parameter (q) to the URL with the content of the drop-down box 
url = url + "&sid=" + Math.random();      
    // Adds a random number to prevent the server from using a cached file 
xmlhttpURL.onload = stateChanged; // Each time the readyState property changes, the stateChanged() function will be executed 
xmlhttpURL.open("GET",url,true);    // Opens the XMLHTTP object with the given URL 
xmlhttpURL.send(null); 
alert("msg"); //<---------------------When i have this everything sees ok... 
    } 

function stateChanged() { 
    if (xmlhttpURL.readyState==4) { 
     var res = xmlhttpURL.responseText;  
     //if(res.length>0) 
      alert(res); 
    } 
} 

function GetXmlHttpObjectURL() { 
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari 
     return new XMLHttpRequest(); 
    } 
    else { // code for IE6, IE5 
     return new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    return null; 
} 

php腳本：

<?php 

//database connection 
$dbc = mysqli_connect('localhost','root','root','WTHw3') or die('Error connecting to MySQL server.'); 

//the values sent from the ajax script 
$name = mysqli_real_escape_string($dbc,trim($_GET["n"])); 
$surname = mysqli_real_escape_string($dbc,trim($_GET["l"])); 
$email=mysqli_real_escape_string($dbc,trim($_GET["m"]));; 
$tel=mysqli_real_escape_string($dbc,trim($_GET["t"])); 

//a var to store the result(if any) and show the error to the admin 
$result=""; 
if (!eregi ('[a-z||0-9]@[a-z||0-9].[a-z]', $email)) { //checks to make sure the email address is in a valid format 
    $result .= "Not Valid e-mail!\n"; 
} 

if(strlen($tel) != 10){ 
    $result .= "Telephone must be a numeric with 10 nums length!"; 
}elseif(!is_numeric($tel)) {   
    $result .= "Telephone must be a numeric with 10 nums length!!!"; 
    } 

//check for a validation error 
if($result==""){ 
    //query to be executed 
    //$query = "INSERT INTO Partners(partnerName,partnerSurname,partnerTel,partnerEmail) values ('$name','$surname','$tel','$email')"; 
    //query execution 
    //$dbResult = mysqli_query($dbc,$query) or die('Error querying database.'); 
    echo "wtf"; 

}else { 
    echo $result; 
} 
//close connection 
mysqli_close($dbc); 

?> 

Answer 1

你的問題是，你的按鈕不應該是類型 「提交」，因爲要調用當用戶點擊時通過AJAX提供web服務：當alert（）被調用時，它提供了完成Ajax調用的時間，然後提交表單。

嘗試將您的提交按鈕的類型更改爲button，並添加return false和checkInput()的末尾。

Answer 2

如果你想按鈕類型爲提交，您可以編寫代碼就像

<form action="#" method="post" onsubmit="return checkInput(userFirstName.value,userLastName.value,phonenumber.value,email.value)"> 
<label for="userFirstName">Name </label> 
<input name="userFirstName" id="userFirstName" type="text" placeholder="First Name"  autofocus /><br> 
<label for="userLastName">Surname </label> 
<input name="userLastName" id="userLastName" type="text" placeholder="Surname" /><br> 
<label for="phonenumber">Phone Number</label> 
    <input name="phonenumber" id="phonenumber" type="text" placeholder="Your Telephone Number(10 digits))" /><br> 
<label for="email">Email Address</label> 
<input name="email" id="email" type="text" placeholder="Your Email Address" /><br> 
<button class="clearbutton" type="submit" value="Submit">Add Partner</button> 

然後，如果你想提交表單添加

return true; 

或

return false; 

如果驗證checkInput函數失敗。最好是用類型提交而不是按鈕，因爲當用戶按下回車鍵時，如果按鈕類型被提交，表單將被提交。

Answer 3

分支從@Roimer的答案和一些評論，我建議使用jQuery，因爲雖然也大大簡化了上面的代碼，給你很棒的資源：event.preventDefault();它可以讓你阻止提交表單，同時給你的能力如果javascript未啓用或未完全按點擊時間加載，則返回到默認提交按鈕。

還有other great reasons也投資於此功能。