Question

我有一个你填写的表单，当你点击提交按钮时，会调用一个js脚本，然后轮流调用一个php脚本来获取结果并以警告框的形式在用户中显示它们。

奇怪的是，如果我的命令“alert（”msg“）”在我的js中（你可以在下面看到）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函数中的验证失败。最好是提交类型而不是按钮，因为当用户按Enter键时，如果提交按钮类型，将提交表单。

Answer 3

从@Roimer分支回答和几条评论，我建议使用jQuery，因为虽然也大大简化了上面的代码，但为您提供了很棒的资源：event.preventDefault();，它允许您在提供时阻止提交表单如果未启用javascript或未在点击时间内完全加载，则可以回退到默认提交按钮。

还有other great reasons投资此功能。

js中需要警报框才能正常工作

3 个答案: