0

入力するフォームがあり、送信ボタンをクリックするとjsスクリプトが呼び出され、phpスクリプトを呼び出して結果を取得し、アラートボックスの形式でユーザーに表示します。

奇妙なことは、js にコマンド "alert("msg")" がある場合 (以下で確認できます)、すべてがうまく機能しますが、それを削除すると何も機能しないようです....なぜこれが起こっているのか考えてみてください。 ? 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);

?>
4

3 に答える 3

0

@Roimerの回答といくつかのコメントから分岐して、jQueryを使用することをお勧めします。event.preventDefault();これは、上記のコードを大幅に簡素化すると同時に、フォームの送信を防ぎながら、フォームにフォールバックする機能を提供するためです。 javascriptが有効になっていないか、クリック時間までに完全に読み込まれていない場合のデフォルトの送信ボタン。

この機能に投資する理由は他にもあります。

于 2012-12-04T08:05:33.197 に答える
0

あなたの問題は、ユーザーがクリックしたときにAJAXを介してWebサービスを呼び出しているため、ボタンのタイプを「送信」にしないことです.alert（）が呼び出されると、フォームを送信する前にajax呼び出しが完了する時間が与えられます。

送信ボタンのタイプを に変更し、 aと の末尾をbutton追加してみてください。return falsecheckInput()

于 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 に答える