How to read the return from a xmlhttprequest()

Question

0.00/5 (No votes)

See more:

I an trying to read the value and the name of a select box. The name I use within JavaScript to determine the ID of another select box. The value I send using XMLHttpRequest() to a PHP file to search a MySQL table to determine the number I need to load to the second select box.
I am using NetBeans 8.2 IDE and have proved that the PHP file is working correctly.
Using Chrome Developer Tools I have tracked the JavaScript file and I get an error on the line

document.getElementById(HCID).innerHTML = this.responseText;

The error given is

The specified value "NaN" is not a valid number. The value must match to the following regular expression: -?(\d+|\d+\.\d+|\.\d+)([eE][-+]?\d+)?

My script code is

<script type="text/javascript">
    function find_hc(player,name){
        switch (name) {
        case "Player1":
            var HCID = 'P1HC';
            break;
        case "Player2":
            var HCID = 'P2HC';
            break;
        case "Player3":
            var HCID = 'P3HC';
            break;
        case "Player4":
            var HCID = 'P4HC';
            break;
        case "Player5":
            var HCID = 'P5HC';
            break;
        case "Player6":
            var HCID = 'P6HC';
            break;
        case "Player7":
            var HCID = 'P7HC';
            break;
        case "Player8":
            var HCID = 'P8HC';
            break;
        case "Player9":
            var HCID = 'P9HC';
            break;
        case "Player10":
            var HCID = 'P10HC';
            break;
        case "Player11":
            var HCID = 'P11HC';
            break;
        case "Player12":
            var HCID = 'P12HC';
            break;
        default:
            break;
      }
        var xhttp;
        if (window.XMLHttpRequest) {
            // code for modern browsers
            xhttp = new XMLHttpRequest();
            } else {
            // code for old IE browsers
            xhttp = new ActiveXObject("Microsoft.XMLHTTP");
            } 
            var the_data = 'player='+ encodeURIComponent(player)
            xhttp.open("POST", "find_handicap.php" , true);
            xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhttp.send(the_data);
            xhttp.onreadystatechange = function() {
//            alert('Check Xhttp.readyState ===4');
            if (xhttp.readyState === 4) {
//                alert('Check Xhttp.status ===200');
                if (xhttp.status === 200) {
                    // OK
                    alert('Response from PHP received');
                     alert(this.responseText);
                    var hc = parseInt(this.responseText);
                    document.getElementById(HCID).value = hc;
                    // loads handicap to player handicap id
                } else {
                    // not OK
                    alert('failure!');
                }
            }
        };
    }
                   
</script>

My PHP file is as follows;

<?php require_once '../../configure.php';
$Player  = $_POST["player"];
$Opponent = $_SESSION["Opponents"];
$Venue = $_SESSION["Venue"];
// Check if we have parameter that  being passed to the script through the URL

   if (isset($_POST["player"])) {
      $db_handle = mysqli_connect(DB_SERVER, DB_USER, DB_PASS );
      $db_found = mysqli_select_db($db_handle, DB_NAME);
      if ($db_found) {
      $SQL = "SELECT `handicap` FROM `".DB_AVAIL."` WHERE `player_name`= '$Player' AND `opponents` = '$Opponent' AND `venue` = '$Venue'";
      $result = mysqli_query($db_handle, $SQL);
      while ( $db_field = mysqli_fetch_assoc($result) ) {
              $Handicap = $db_field[handicap];}
      }
      echo json_encode($Handicap);
   }
   ?>

What I have tried:

In my script I have include two alerts

alert('Response from PHP received');
     alert(this.responseText);

The first was to show that I had received a response from the PHP file. This was successful.

The second alert I expected to see a number between 0 and 28, in the case below I expected to see 16 instead I got a lot of code before the number. As follows;

\u003Cbr /\u003E\n\u003Cfont size='1'\u003E\u003Ctable class='xdebug-error xe-notice' dir='ltr' border='1' cellspacing='0' cellpadding='1'\u003E\n\u003Ctr\u003E\u003Cth align='left' bgcolor='#f57900' colspan=\"5\"\u003E\u003Cspan style='background-color: #cc0000; color: #fce94f; font-size: x-large;'\u003E( ! )\u003C/span\u003E Notice: Use of undefined constant handicap - assumed 'handicap' in C:\\wamp64\\www\\MatchManagementAvail\\find_handicap.php on line \u003Ci\u003E15\u003C/i\u003E\u003C/th\u003E\u003C/tr\u003E\n\u003Ctr\u003E\u003Cth align='left' bgcolor='#e9b96e' colspan='5'\u003ECall Stack\u003C/th\u003E\u003C/tr\u003E\n\u003Ctr\u003E\u003Cth align='center' bgcolor='#eeeeec'\u003E#\u003C/th\u003E\u003Cth align='left' bgcolor='#eeeeec'\u003ETime\u003C/th\u003E\u003Cth align='left' bgcolor='#eeeeec'\u003EMemory\u003C/th\u003E\u003Cth align='left' bgcolor='#eeeeec'\u003EFunction\u003C/th\u003E\u003Cth align='left' bgcolor='#eeeeec'\u003ELocation\u003C/th\u003E\u003C/tr\u003E\n\u003Ctr\u003E\u003Ctd bgcolor='#eeeeec' align='center'\u003E1\u003C/td\u003E\u003Ctd bgcolor='#eeeeec' align='center'\u003E0.1059\u003C/td\u003E\u003Ctd bgcolor='#eeeeec' align='right'\u003E246856\u003C/td\u003E\u003Ctd bgcolor='#eeeeec'\u003E{main}(  )\u003C/td\u003E\u003Ctd title='C:\\wamp64\\www\\MatchManagementAvail\\find_handicap.php' bgcolor='#eeeeec'\u003E...\\find_handicap.php\u003Cb\u003E:\u003C/b\u003E0\u003C/td\u003E\u003C/tr\u003E\n\u003C/table\u003E\u003C/font\u003E\n\"16

Hence the reason I got

"NaN"

when I converted the text response to an integer. The Form Input for ID = HCID is type = "Number"
Can anyone suggest what I am doing wrong. I have used similar code for another part of the project and it works okay. Baffled!!!

Posted 20-Jan-19 5:26am

Dave the Golfer

Updated 20-Jan-19 9:23am

v4

Add a Solution

Comments

Richard MacCutchan 20-Jan-19 12:01pm

The error message suggests a problem with the line:
document.getElementById(HCID).innerHTML = this.responseText;
Which probably means that getElementById(HCID) is not returning a reference. What is the value of HCID?

Dave the Golfer 20-Jan-19 13:11pm

HCID is defined in the SWITCH loop. In this case it is P1HC.
I have inserted "P1HC" in place of HCID and I get a different error suggesting the data being returned is incorrect.
I have modified the code to
var hc = parseInt(this.responseText);
document.getElementById("P1HC").value = hc;
I now get an error stating ;
away12.php:81 The specified value "NaN" is not a valid number. The value must match to the following regular expression: -?(\d+|\d+\.\d+|\.\d+)([eE][-+]?\d+)?
The form element with ID P1HC is of type="number".
Suggest I have two problems.

Added alert(HCID); to code. Result is the alert states Undefined. So yes the HCID is not being set in the Switch loop.
Corrected SWITCH loop forgot to put CASE values in between "". Now have the Second problem to resolve.
Thanks for your help on problem one.
PROBLEM TWO:
Changed code in PHP file from $handicap = $db_field[handicap]; to $handicap = $db_field["handicap"];
Value being correctly transferred.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Dave the Golfer · Accepted Answer · 2019-01-20T09:23:00

Solution 1

Corrected Code.
Script Code change;

Corrected SWITCH loop forgot to put CASE values in between "".

PHP code change.

Changed code in PHP file from $handicap = $db_field[handicap]; to $handicap = $db_field["handicap"];

Posted 20-Jan-19 9:23am

Dave the Golfer

Comments

Richard MacCutchan 21-Jan-19 3:16am

Is the problem now solved?