How to call a PHP script using JAvaScript

C

C.Joseph Drayton

I have a problem that I am hoping someone can help me with.

First let me describe the problem. I have an HTML form that in one
field has an onBlur call to a JavaScript function. When you exit the
field, it calls the JavaScript routine, which in turn calls a PHP
script. The PHP script runs returns the value needed. And returns to
the JavaScript. The JavaScript function is then supposed to set
alerts depending on the values returned from the PHP script. It
doesn't. If you then move the cursor into the field and exit again,
it again runs the JavaScript which calls the PHP script then
proceeds to show the alerts exactly like it is supposed to.

I did some experimenting, and if you use a button to run the
JavaScript, the exact same thing happens. Click the button and the
PHP script sends back the value, but no alert. You click the button
a second time, and the alert shows.

I am using the JavaScript monitor in FireFox v1.5 so I can see that
the PHP script is being called and returning the correct value the
first time. So what I am trying to figure out is why the routine has
to be called twice before I get my alert.

Below is the HTML, JavaScript & PHP that I am using.

Thanks,
C.Joseph


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test New Member Creation</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
..style1 {
font-size: 36px;
font-weight: bold;
}
body {
background-color: #FEFED6;
}
..style2 {font-size: x-large}
-->
</style>
</head>

<body>

<p align="center" class="style1">Start Membership</p>

<script language="javascript" type="text/javascript">

var http_request = false ;
var ctyfnd

function chkcity()
{
tmp1 = document.crnew.stt.value ;
tmp2 = document.crnew.cty.value ;
prm="?stt="+tmp1+"&cty="+tmp2;
makeRequest('chk2data.php',prm) ;
thrspns = result.indexOf("fou~~und");
if (thrspns<0) {
ctyfnd="no" ;
} else {
ctyfnd="yes";
}
reqcity() ;
}

function reqcity()
{
if (ctyfnd == "no")
{
alert("We can not find a City named "+tmp2) ;
document.crnew.cty.focus() ; }
}


function makeRequest(url, parameters)
{
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType)
{
http_request.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Cannot create XMLHTTP instance');
return false;
}
http_request.onreadystatechange = alertContents;
http_request.open('GET', url + parameters, true);
http_request.send(null);
}


function alertContents() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
//alert(http_request.responseText);
result = http_request.responseText;
} else {
alert('There was a problem with the request.');
}
}
}
</script>

<form method="" name="crnew" action="">
<table width="400" border="1" align="center">
<tr>
<td>State</td>
<td> <select name="stt" size="1">
<option value="0">- - Please Select - -</option>
<option value="1">Alabama</option>
<option value="2">Alaska</option>
<option value="3">Arizona</option>
<option value="4">Arkansas</option>
<option value="5">California</option>
<option value="6">Colorado</option>
<option value="7">Connecticut</option>
<option value="8">Delaware</option>
<option value="9">Florida</option>
<option value="10">Georgia</option>
<option value="11">Hawaii</option>
<option value="12">Idaho</option>
<option value="13">Illinois</option>
<option value="14">Indiana</option>
<option value="15">Iowa</option>
<option value="16">Kansas</option>
<option value="17">Kentucky</option>
<option value="18">Louisiana</option>
<option value="19">Maine</option>
<option value="20">Maryland</option>
<option value="21">Massachusetts</option>
<option value="22">Michigan</option>
<option value="23">Minnesota</option>
<option value="24">Mississippi</option>
<option value="25">Missouri</option>
<option value="26">Montana</option>
<option value="27">Nebraska</option>
<option value="28">Nevada</option>
<option value="29">New Hampshire</option>
<option value="30">New Jersey</option>
<option value="31">New Mexico</option>
<option value="32">New York</option>
<option value="33">North Carolina</option>
<option value="34">North Dakota</option>
<option value="35">Ohio</option>
<option value="36">Oklahoma</option>
<option value="37">Oregon</option>
<option value="38">Pennsylvania</option>
<option value="39">Rhode Island</option>
<option value="40">South Carolina</option>
<option value="41">South Dakota</option>
<option value="42">Tennessee</option>
<option value="43">Texas</option>
<option value="44">Utah</option>
<option value="45">Vermont</option>
<option value="46">Virginia</option>
<option value="47">Washington</option>
<option value="48">West Virginia</option>
<option value="49">Wisconsin</option>
<option value="50">Wyoming</option>
<option value="51">District of Columbia</option>
</select></td>
</tr>
<tr>
<td>City</td>
<td><input type="text" name="cty" onBlur="chkcity();"/></td>
</tr>
<tr>
<td>Zip Code </td>
<td><input type="text" name="zpcd"/></td>
</tr>
</table>
<input type="button" name="button" value="Pay for Membership"
onclick="VerifyEntries()"/>
</p>
</form>
</body>
<?php
$host = "my.server.net";
$login = "loginname";
$pwd = "password";
$port = "";
$db = "database";
$fln = "table" ;
$prma = $_REQUEST["stt"] ;
$prmb = $_REQUEST["cty"] ;
$host=$host.":".(integer)$port;
$conn=mysql_connect($host,$login,$pwd) or die();
$sql = "SELECT * FROM $fln WHERE stt='$prma' AND cty='$prmb'";
mysql_select_db($db,$conn) ;
$result = mysql_query($sql);
$num_rows = mysql_num_rows($result);
if ($num_rows==1) { echo "fou~~und" ; }
else{ echo "dec~~ine" ; }
?>
Ciao . . . C.Joseph

That which a man buys too cheaply . . .
He esteems too lightly
 
M

Martyr2

There is a few things I would test here. The first one being what your
PHP script is giving back to you. Output the results of your PHP calls
somewhere, make sure that PHP is giving you the values you expect. If
the values are coming back correctly, then you can eliminate the
problem being in the PHP script.

However, if they are not coming out correctly, then check the inputs of
the PHP script and make sure the correct values are being sent to the
PHP script to begin with. The idea here is to eliminate the PHP script
as the problem so you can focus on the Javascript.

Second, being that it is not working the first time and then works the
second tells me that something was set AFTER the first call to the
javascript was made and that the second call is using that set value.
The only value you are setting is the ctyfnd variable, which also
happens to be attached to the alert you want to show.

Make sure that the ctyfnd variable is being set correctly, it controls
when your alert message shows. The setting of this variable depends on
your result from the PHP script which is why I said make sure that the
PHP script is returning the correct values you expect.

One last thing, do remember that AJAX calls do not stop the flow of the
original script and they are dependent on a server response. Meaning,
you could also have timing issues where "result" may not contain what
you expect when you do your indexOf operation at it.

I think if you try these few ideas, you can quickly isolate the problem
down. Let me know how it turns out. :)
 
C

C.Joseph Drayton

Hi Martyr2,

The PHP script is definitely returning the correct value.

In my sidebar in FireFox v1.5 displayed, I can see the correct value
from the PHP script come in on the first click.

I am going to try your timing idea to see if that is it.

Thanks for the suggestion.

Ciao . . . C.Joseph

That which a man buys too cheaply . . .
He esteems too lightly
 
C

C.Joseph Drayton

Hi Martyr2,

You were right it is a timing issue. I put in a timer set to 5
seconds and the JavaScript function works perfectly. I will need to
figure out exactly what to set the timer to for optimum performance,
but your idea saved the day.

Thanks much!!

Ciao . . . C.Joseph

That which a man buys too cheaply . . .
He esteems too lightly
 
C

C.Joseph Drayton

Hi Martyr2,

It is a timing problem, but it appears that my timing loop actually
doesn't work. It seems that what was causing the pause was the alert
that I was displaying. So how do I actually do a pause?

Ciao . . . C.Joseph

That which a man buys too cheaply . . .
He esteems too lightly
 
R

Randy Webb

C.Joseph Drayton said the following on 3/18/2006 1:26 PM:
Hi Martyr2,

You were right it is a timing issue. I put in a timer set to 5
seconds and the JavaScript function works perfectly. I will need to
figure out exactly what to set the timer to for optimum performance,
but your idea saved the day.
Click to expand...

You will never be able to figure out "exactly what to set the timer" to
because there are too many things that you can't know about at the time
you set the timer. Do you give me a short timer because I am on a Cable
connection or do you give me a long timer because I have dialup?

The solution is to have two functions. One that retrieves the data, the
second deals with the data.

Then, in your PHP script you add a call to the second function at the
end of the data. Then that function *only* gets called after the data is
loaded and you have no need to try to guess how long to wait to process
the data.
 
C

C.Joseph Drayton

Hi Randy,

I put the following code in to verify that the result has returned,
and I get a too many recursions error.

function WaitForData()
{
if (result==null || result=="") { WaitForData(); }
}

Ciao . . . C.Joseph

That which a man buys too cheaply . . .
He esteems too lightly
 
R

Randy Webb

C.Joseph Drayton said the following on 3/19/2006 9:12 AM:

I wish you would learn how to post properly here. Read the FAQ and
please stop top-posting.

Answer:It destroys the order of the conversation
Question: Why?
Answer: Top-Posting.
Question: Whats the most annoying thing on Usenet?
Hi Randy,

I put the following code in to verify that the result has returned,
and I get a too many recursions error.
Click to expand...

And I said nothing about a WaitForData function. I said to add a call at
the end of your data file to call a second function. That method works,
is proven to work cross-browser and will remain a valid/reliable way to
ensure there is no timing issue.
function WaitForData()
{
if (result==null || result=="") { WaitForData(); }
}
Click to expand...

I bet if your data stream was empty that would work real well.

Now, please read again the solution I gave you.

function getData(){
//this function retrieves the data.
//make the data JS form. Either JSON or
//some other form of Javascript code
//Then, you dynamically load it as a script
//element. Search the archives for that one.
}

function processData(){
//this function processes the data that
//was loaded by getData(). This function
//gets called by the data loaded by getData
//and will never get called before the data
//gets loaded but will *always* get called
//as soon as the data is loaded.
}

sample data file:

//lots of JS data/code here
processData();

processData() would be the very last line of the data retrieved, and
dynamically inserted, by the getData() function.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
action_page.php form 2
Survey details won't go through using php, ajax, Mysql 0
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
How to add dropdown selected data to table using jquery 2
How do I fix this issue in sqaurespace code block? 1
Very Basic CC Validation Javascript 0

Members online

Total: 70 (members: 1, guests: 69)
Robots: 144

Forum statistics

Threads
473,981
Messages
2,570,187
Members
46,730
Latest member
AudryNolan

Latest Threads

Top