将Javascript XMLHTTPREQUEST发布到PHP无法正常工作

Question

I am having issues with my code, I really do not know hat I have done wrong. I have referred to so many help here but still no solution. below is my code, the ajax script never runs.

The HTML form

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

The php script: insert_recprd.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();
      }
       }

      ?>

And here is the Ajax call request ajax_post.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...";
}

The problem: When the submit button is clicked, nothing happens. I do not know what the issue is. I only wanted the firm to be submitted to my database.

Thank you for your help.

Answer 1

Hey Guys I have been able to solve my problem. I pressed F12 to inspect element as was suggested to me by Sandeep Nayak, and I viewed the console to check for javascript error. I noticed that this element: var o = document.getElementById("optradio").value; was not the radio button element ID but was the element name . What I did was to give it an ID. So i corrected my ajax code to be:

     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;

}

And then everything runs smoothly. Thank you guys for your great help.