PHPをポストするJavascript XMLHTTPREQUESTが動作しない

Question

私のコードに問題がありますが、私は間違ったことをしています。私はここで多くの助けを借りて言いましたが、まだ解決策はありません。以下は私のコードですが、ajaxスクリプトは実行されません。

HTMLフォーム

<form method="POST" onSubmit="return false;" action="<?php echo $editFormAction; ?>" class="form-horizontal form_centre" role="form" name="reg"> 
    <label class="control-label col-sm-2" for="usr">Username:</label> 
    <input type="text" class="form-control focusedInput" id="user" onBlur="checkusername()" name="user" placeholder="Enter Username"><span id="user_status"></span> 
    <label class="control-label col-sm-2" for="fname">First Name:</label> 
    <input type="text" class="form-control focusedInput" id="fname" name="fname" placeholder="Enter First Name" required> 

    <label class="control-label col-sm-2" for="lname">Last Name:</label> 
    <input type="text" class="form-control focusedInput" id="lname" name="lname" placeholder="Enter Last Name" required> 

    <label class="control-label col-sm-2" for="email">Email:</label> 
    <input type="email" class="form-control focusedInput" id="email" name="email" onBlur="checkemail()" placeholder="Enter email" required> 
    <span id="email_status"></span> 

    <input type="email" class="form-control focusedInput" id="vemail" placeholder="Verify Email" required> 

    <label class="control-label col-sm-2" for="pwd">Password:</label> 
     <input type="password" class="form-control focusedInput" id="pwd" name="pwd" placeholder="Enter password" required> 

    <label class="control-label col-sm-2" for="rpwd">Verify Password: </label> 
    <input type="password" class="form-control focusedInput" id="rpwd" placeholder="Enter password" required> 
    <label class="control-label col-sm-2 " for="gendar" >Gender: </label> 

    <div class="center_radio"> 
    <div class="radio"> 

    <div class="radio-inline"> 
    <label><input type="radio" name="optradio" value="M">Male</label> 
    </div> 

    <div class="radio-inline"> 
    <label><input type="radio" name="optradio" value="F">Female</label> 
    </div> 
    </div> 

PHPスクリプト：

<?php 
    if(isset($_POST['u'])){ 
    include_once('../Connections/conn.php'); 

    $fn=preg_replace('#[^a-z]#', '', $_POST['f']); 
    $ln=preg_replace('#[^a-z]#', '', $_POST['l']); 
    $email=mysqli_real_escape_string($conn, $_POST['e']); 
    $user=preg_replace('#[^a-z0-9]#i', '', $_POST['u']); 
    $pwd=$_POST['p1']; 
    $rpwd=$_POST['p2']; 


    // DUPLICATE DATA CHECKS FOR USERNAME AND EMAIL 
    $sql = "SELECT id FROM registration WHERE username='$u' LIMIT 1"; 
    $query = mysqli_query($conn, $sql); 
    $u_check = mysqli_num_rows($query); 

    //-------------------------------------------- 

    $sql = "SELECT id FROM registration WHERE email='$e' LIMIT 1"; 
    $query = mysqli_query($conn, $sql); 
    $e_check = mysqli_num_rows($query); 

    //CHECK FOR FORM ERRORS 

    if($user == "" || $email == "" || $pwd == "" || $fn == "" || $ln == ""){ 
     echo "The form submission has missing values."; 
     exit(); 
    } else if ($u_check > 0){ 
     echo "The username you entered is alreay taken"; 
     exit(); 
     } else if ($e_check > 0){ 
     echo "That email address is already in use in the system"; 
     exit(); 
     } 
    else if($_POST['p1'] != $_POST['p2']) 
    { 
    echo "Password does not match"; 
    } 


    else{ 

     $cryptpass = crypt($pwd); 
     include_once ("main_site/randGen.php"); 
     $p_hash = randGen(20)."$cryptpass".randGen(20); 

     $insertSQL = "INSERT INTO registration (fname, lname, email, username, gendar, pass) VALUES ('$fn', '$ln', '$email', '$user', '$gen', '$p1')"; 

     mysqli_select_db($conn,$database_conn); 
     $Result1 = mysqli_query($conn,$insertSQL) or die(mysqli_error($conn)); 
     echo "<div class=".'panel panel-success text-center'." > <h3>Your Registration was successful</h3></div>"; 
    exit(); 
     } 
     } 

     ?> 

insert_recprd.phpそして、ここでは

function ajax_post(){ 
// Create our XMLHttpRequest object 
var hr = new XMLHttpRequest(); 
// Create some variables we need to send to our PHP file 
var url = "insert_recprd.php"; 
var u = document.getElementById("user").value; 
var e = document.getElementById("email").value; 
var p = document.getElementById("pwd").value; 
var p2 = document.getElementById("rpwd").value; 
var f = document.getElementById("fname").value; 
var l = document.getElementById("lname").value; 
var o = document.getElementById("optradio").value; 
var param = "u="+u+"&e="+e+"&p1="+p1+"&f="+f+"&l="+l; 
hr.open("POST", url); 
// Set content type header information for sending url encoded variables in the request 
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
// Access the onreadystatechange event for the XMLHttpRequest object 
hr.onreadystatechange = function() { 
    if(hr.readyState == 4 && hr.status == 200) { 
     var return_data = hr.responseText; 
     document.getElementById("btn_status").innerHTML = return_data; 
    } 
} 
// Send the data to PHP now... and wait for response to update the status div 
hr.send(param); // Actually execute the request 
document.getElementById("btn_status").innerHTML = "processing..."; 
} 

ajax_post.php Ajax呼び出し要求であります

問題： 送信ボタンをクリックしても何も起こりません。私はその問題が何であるか分からない。私は会社を私のデータベースに提出したいだけでした。

ありがとうございました。

Answer 1

こんにちは私は私の問題を解決することができました。私はSandeep Nayakによって私に提案されたように要素を検査するためにF12を押しました、そして、私はjavascriptエラーをチェックするためにコンソールを見ました。私はこの要素：var o = document.getElementById("optradio").value;がラジオボタン要素IDではなく、要素nameであることに気づいた。私がしたのはIDを与えることでした。だから私はあることを私のAjaxコードを修正：

 function ajax_post(){ 
// Create our XMLHttpRequest object 
var hr = new XMLHttpRequest(); 
// Create some variables we need to send to our PHP file 
var url = "insert_recprd.php"; 
var u = document.getElementById("user").value; 
var e = document.getElementById("email").value; 
var p1 = document.getElementById("pwd").value; 
var p2 = document.getElementById("rpwd").value; 
var f = document.getElementById("fname").value; 
var l = document.getElementById("lname").value; 
var o = ""; 

if (document.getElementById('male').checked) { 
o = document.getElementById('male').value; 
}else{ 
    o = document.getElementById('female').value; 
} 
//var rbs = document.getElementsByName(optradio); 

var param = "u="+u+"&e="+e+"&p="+p1+"&f="+f+"&l="+l+"&o="+o; 

if(p1 != p2){ 
    stats.innerHTML = "Your password fields do not match"; 
    return; 
} 
hr.open("POST", url); 
// Set content type header information for sending url encoded variables in the request 
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
// Access the onreadystatechange event for the XMLHttpRequest object 
hr.onreadystatechange = function() { 

    if(hr.readyState == 4 && hr.status == 200) { 
     var return_data = hr.responseText; 
     document.getElementById("btn_status").innerHTML = return_data; 
    } 
} 
// Send the data to PHP now... and wait for response to update the status div 
hr.send(param); // Actually execute the request 
document.getElementById("btn_status").innerHTML = "processing..."; 
document.getElementById("stats").innerHTML = "Your registration was successful"; 
return; 

}

そして、すべてがスムーズに実行されます。あなたの大きな助けに感謝します。