0

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

奇怪的是，如果我的 js 中有命令“alert("msg")”（你可以在下面看到），evertyhing 效果很好，但如果我删除它似乎没有任何效果....知道为什么会这样? 谢谢

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

?>
4

3 回答 3

0

您的问题是您的按钮不应键入“提交”，因为您在用户单击时通过 AJAX 调用 Web 服务：当调用 alert() 时，它会在提交表单之前为完成 ajax 调用提供时间。

尝试将提交按钮的类型更改为button，并添加 areturn false和checkInput().

于 2012-12-02T14:58:32.183 回答
0

如果您希望按钮类型为提交，您可以编写如下代码

<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 键时，如果按钮类型为提交，则将提交表单。

于 2012-12-04T07:51:37.043 回答
0

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

投资此功能还有其他重要原因。

于 2012-12-04T08:05:33.197 回答