Generating multiple output on one page

[Sandman]

Hello,
I'm building a website in PHP and Javascript. The registration
portion is divided into 2 sections:
1. In one, I get info about the visitor. This is sent via POST to a php
script which is section 2.
2. In the second section, I get some specific information about their
pets and make suggestions. I'm having problems with section 2, and I
hope y'all can help.

The core of the PHP script in Section 2 consists of the following:

<?php
for ($n=1; $n <= $num; $n++) {

print "Please enter age of pet #$n:" ;
print "<INPUT type='text' name='petage'&nbsp &nbsp &nbsp" ;
$div = $n . "ajaxDiv" . ";";
$_ENV['div'] = $div;
print "DIV IS: $div<br><br>";
print "<INPUT TYPE='button' onClick='ajaxFunction()' NAME='$age'
VALUE='Done!'>" ;
print "<INPUT TYPE='reset' NAME='Clear' VALUE='Reset form'>
<br><br>" ;
print "<div id='$div'></div><br><br>" ;

}

ajaxfunction() looks like:
if(ajaxRequest.readyState == 4){
var div = "<?php echo $_ENV['div']; ?>";
if (div = "") {
div = "1ajaxDiv";
}
var ajaxDisplay = document.getElementById('div');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
// Get pet stores based on zipcode
var zipcode = "<?php echo $zip; ?>"
var querystring = "?zipcode=" + zipcode;

ajaxRequest.open("GET", "getstores.php" + querystring, true);
ajaxRequest.send(null);
The idea is that the user fills in the age of their pet, I look in my
DB and spew out the names and addresses of vets and pet stores in the
area. Thanks to ajaxfunction(), I can do this through:
print "<INPUT TYPE='button' onClick='ajaxFunction()' NAME='$age'
VALUE='Done!'>" ;

The function calls another PHP script and outputs the data in the same
HTML file.

So here is my issue. This code works fine when there is only one pet.
If there are more than one, then clicking on the second button results
in no output at all.

Any suggestions?

I was thinking of enclosing it in a form like so:
<form method="post" action="/cgi-bin/samescript.php">
loop to output buttons
</form>

Meaning call the same script after clicking the first button, second
button and so on.

But I would then need to change:
print "<INPUT TYPE='button' onClick='ajaxFunction()' NAME='$age'
VALUE='Done!'>" ;

so when the user clicked on it, it would call ajaxFunction() AND the
PHP script.

Is this possible?

Thanks for listening and have a GREAT holiday season!!

[Geoffrey]

Hi Sandman --

Where does the variable $num come from? Is is the result of a count
function of some kind? It would help to know how this variable gets
set before we troubleshoot any further.

I might also suggest sending the div tag id when you call your
javascript function rather than setting an environment variable to hold
it. In this application, you can cut down on unnecessary (and possibly
confusing) code by doing so. Your function could be written like this:

function ajaxFunction(output)
{
...(other code)...
if (ajaxRequest.readyState === 4)
{
document.getElementById(output).innerHTML =
ajaxRequest.responseText;
}
}

Where "output" holds the div id of the tag that will contain the output
from your Ajax request. This is by no means the only way to do it, but
it just seems simpler and easier to me.
Geoffrey
Sandman wrote:

Hello,
I'm building a website in PHP and Javascript. The registration
portion is divided into 2 sections:
1. In one, I get info about the visitor. This is sent via POST to a php
script which is section 2.
2. In the second section, I get some specific information about their
pets and make suggestions. I'm having problems with section 2, and I
hope y'all can help.

The core of the PHP script in Section 2 consists of the following:

<?php
for ($n=1; $n <= $num; $n++) {

print "Please enter age of pet #$n:" ;
print "<INPUT type='text' name='petage'&nbsp &nbsp &nbsp" ;
$div = $n . "ajaxDiv" . ";";
$_ENV['div'] = $div;
print "DIV IS: $div<br><br>";
print "<INPUT TYPE='button' onClick='ajaxFunction()' NAME='$age'
VALUE='Done!'>" ;
print "<INPUT TYPE='reset' NAME='Clear' VALUE='Reset form'>
<br><br>" ;
print "<div id='$div'></div><br><br>" ;

}

ajaxfunction() looks like:
if(ajaxRequest.readyState == 4){
var div = "<?php echo $_ENV['div']; ?>";
if (div = "") {
div = "1ajaxDiv";
}
var ajaxDisplay = document.getElementById('div');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
// Get pet stores based on zipcode
var zipcode = "<?php echo $zip; ?>"
var querystring = "?zipcode=" + zipcode;

ajaxRequest.open("GET", "getstores.php" + querystring, true);
ajaxRequest.send(null);
The idea is that the user fills in the age of their pet, I look in my
DB and spew out the names and addresses of vets and pet stores in the
area. Thanks to ajaxfunction(), I can do this through:
print "<INPUT TYPE='button' onClick='ajaxFunction()' NAME='$age'
VALUE='Done!'>" ;

The function calls another PHP script and outputs the data in the same
HTML file.

So here is my issue. This code works fine when there is only one pet.
If there are more than one, then clicking on the second button results
in no output at all.

Any suggestions?

I was thinking of enclosing it in a form like so:
<form method="post" action="/cgi-bin/samescript.php">
loop to output buttons
</form>

Meaning call the same script after clicking the first button, second
button and so on.

But I would then need to change:
print "<INPUT TYPE='button' onClick='ajaxFunction()' NAME='$age'
VALUE='Done!'>" ;

so when the user clicked on it, it would call ajaxFunction() AND the
PHP script.

Is this possible?

Thanks for listening and have a GREAT holiday season!!

[Geoffrey]

Hi Sandman --

Where does the variable $num come from? Is is the result of a count
function of some kind? It would help to know how this variable gets
set before we troubleshoot any further.

I might also suggest sending the div tag id when you call your
javascript function rather than setting an environment variable to hold
it. In this application, you can cut down on unnecessary (and possibly
confusing) code by doing so. Your function could be written like this:

function ajaxFunction(output)
{
...(other code)...
if (ajaxRequest.readyState === 4)
{
document.getElementById(output).innerHTML =
ajaxRequest.responseText;
}
}

Where "output" holds the div id of the tag that will contain the output
from your Ajax request. This is by no means the only way to do it, but
it just seems simpler and easier to me.
Geoffrey
Sandman wrote:

Hello,
I'm building a website in PHP and Javascript. The registration
portion is divided into 2 sections:
1. In one, I get info about the visitor. This is sent via POST to a php
script which is section 2.
2. In the second section, I get some specific information about their
pets and make suggestions. I'm having problems with section 2, and I
hope y'all can help.

The core of the PHP script in Section 2 consists of the following:

<?php
for ($n=1; $n <= $num; $n++) {

print "Please enter age of pet #$n:" ;
print "<INPUT type='text' name='petage'&nbsp &nbsp &nbsp" ;
$div = $n . "ajaxDiv" . ";";
$_ENV['div'] = $div;
print "DIV IS: $div<br><br>";
print "<INPUT TYPE='button' onClick='ajaxFunction()' NAME='$age'
VALUE='Done!'>" ;
print "<INPUT TYPE='reset' NAME='Clear' VALUE='Reset form'>
<br><br>" ;
print "<div id='$div'></div><br><br>" ;

}

ajaxfunction() looks like:
if(ajaxRequest.readyState == 4){
var div = "<?php echo $_ENV['div']; ?>";
if (div = "") {
div = "1ajaxDiv";
}
var ajaxDisplay = document.getElementById('div');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
// Get pet stores based on zipcode
var zipcode = "<?php echo $zip; ?>"
var querystring = "?zipcode=" + zipcode;

ajaxRequest.open("GET", "getstores.php" + querystring, true);
ajaxRequest.send(null);
The idea is that the user fills in the age of their pet, I look in my
DB and spew out the names and addresses of vets and pet stores in the
area. Thanks to ajaxfunction(), I can do this through:
print "<INPUT TYPE='button' onClick='ajaxFunction()' NAME='$age'
VALUE='Done!'>" ;

The function calls another PHP script and outputs the data in the same
HTML file.

So here is my issue. This code works fine when there is only one pet.
If there are more than one, then clicking on the second button results
in no output at all.

Any suggestions?

I was thinking of enclosing it in a form like so:
<form method="post" action="/cgi-bin/samescript.php">
loop to output buttons
</form>

Meaning call the same script after clicking the first button, second
button and so on.

But I would then need to change:
print "<INPUT TYPE='button' onClick='ajaxFunction()' NAME='$age'
VALUE='Done!'>" ;

so when the user clicked on it, it would call ajaxFunction() AND the
PHP script.

Is this possible?

Thanks for listening and have a GREAT holiday season!!

[Sandman]

Hi Geoffrey,
$num is the number of times I would need to display the text boxes.
As it turned out I made 2 newbie errors:
1. A JavaScript variable must begin with a letter or an underscore. In
my initial code, I had:
$div = $n . "ajaxDiv" . ";";
which should have been
$div = "ajaxDiv" . $n;

2. You were right about sending it off as a parameter instead of
screwing around with ENV variables. However, the function's argument
should be quoted before sending it off as a parameter. So the above
variable should really be:
$div4js = "\"" . $div . "\"";

Thanks for your suggestion though, which got me thinking along those
lines.

Sandman

Geoffrey wrote:

Hi Sandman --

Where does the variable $num come from? Is is the result of a count
function of some kind? It would help to know how this variable gets
set before we troubleshoot any further.

I might also suggest sending the div tag id when you call your
javascript function rather than setting an environment variable to hold
it. In this application, you can cut down on unnecessary (and possibly
confusing) code by doing so. Your function could be written like this:

function ajaxFunction(output)
{
...(other code)...
if (ajaxRequest.readyState === 4)
{
document.getElementById(output).innerHTML =
ajaxRequest.responseText;
}
}

Where "output" holds the div id of the tag that will contain the output
from your Ajax request. This is by no means the only way to do it, but
it just seems simpler and easier to me.
Geoffrey
Sandman wrote:

Hello,
I'm building a website in PHP and Javascript. The registration
portion is divided into 2 sections:
1. In one, I get info about the visitor. This is sent via POST to a php
script which is section 2.
2. In the second section, I get some specific information about their
pets and make suggestions. I'm having problems with section 2, and I
hope y'all can help.

The core of the PHP script in Section 2 consists of the following:

<?php
for ($n=1; $n <= $num; $n++) {

print "Please enter age of pet #$n:" ;
print "<INPUT type='text' name='petage'&nbsp &nbsp &nbsp" ;
$div = $n . "ajaxDiv" . ";";
$_ENV['div'] = $div;
print "DIV IS: $div<br><br>";
print "<INPUT TYPE='button' onClick='ajaxFunction()' NAME='$age'
VALUE='Done!'>" ;
print "<INPUT TYPE='reset' NAME='Clear' VALUE='Reset form'>
<br><br>" ;
print "<div id='$div'></div><br><br>" ;

}

ajaxfunction() looks like:
if(ajaxRequest.readyState == 4){
var div = "<?php echo $_ENV['div']; ?>";
if (div = "") {
div = "1ajaxDiv";
}
var ajaxDisplay = document.getElementById('div');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
// Get pet stores based on zipcode
var zipcode = "<?php echo $zip; ?>"
var querystring = "?zipcode=" + zipcode;

ajaxRequest.open("GET", "getstores.php" + querystring, true);
ajaxRequest.send(null);
The idea is that the user fills in the age of their pet, I look in my
DB and spew out the names and addresses of vets and pet stores in the
area. Thanks to ajaxfunction(), I can do this through:
print "<INPUT TYPE='button' onClick='ajaxFunction()' NAME='$age'
VALUE='Done!'>" ;

The function calls another PHP script and outputs the data in the same
HTML file.

So here is my issue. This code works fine when there is only one pet.
If there are more than one, then clicking on the second button results
in no output at all.

Any suggestions?

I was thinking of enclosing it in a form like so:
<form method="post" action="/cgi-bin/samescript.php">
loop to output buttons
</form>

Meaning call the same script after clicking the first button, second
button and so on.

But I would then need to change:
print "<INPUT TYPE='button' onClick='ajaxFunction()' NAME='$age'
VALUE='Done!'>" ;

so when the user clicked on it, it would call ajaxFunction() AND the
PHP script.

Is this possible?

Thanks for listening and have a GREAT holiday season!!