Php And Javascript Integration

[abinidi]

I told you a week or so ago that I was looking for a php script that would help me gather data for my wife's Master's thesis.

 

I looked at a number of sites, and couldn't find a survey that met my needs so I decided it would be easier to just do it all from scratch.

 

(Easier? maybe not. I've never written a php script before, and I've never actually written my own connections to a mySQL database before, so maybe it wasn't easier, but hey, I'm leaning a lot as I go...)

 

I have a master plan, and I've written all the HTML pages (there has been *no* attempt at making them look nice. Just get basic functionality there. Once the functionality is there, I can make them look nice if I have time).

 

When I wrote the HTML pages, I included javaScript validation of my form elements. So I have an onClick event that executes a javaScript function that validates the form.

 

Now what I want to do is this: if the form is valid, I want to write the information to the database.

 

So, I'm looking for help on integrating PHP and javaScript.

 

Here are some specific starter questions.

 

1. Since my "submit" button is really just a button that executes a javaScript function, how can I get the javaScript function to call the php script? Specifically, how do I get the data from the form into the mySQL database if I've used javaScript form validation?

 

2. Can I pass a javaScript variable to a PHP variable? How?

 

I'm sure I'll have a ton more questions. But these ones will get me past my current brain slump.

 

Thanks

[TCH-Bruce]

First question: I come to your form with javascript turned off in my browser. How's that going to work?

[abinidi]

The survey will only be adiminstered in a unversity computer lab to specific users during their class time.

 

So, I know the hardware and software settings for these machines, and they allow javascript. Therefore all users will have javaScript enabled.

 

I realize I could do the form validation with PHP, but I don't know enough about it yet to get it ready by Thursday. (I'm being minimalist here, and doing just enought to get the survey to load and store data.)

[TCH-Bruce]

Anyway, to answer your question you would pass the javascript variable as a hidden value when calling the form.

 

><input type="hidden" name="name-of-variable" value="value-of-variable" />

 

In your PHP you access the value using $name-of-variable

 

HTH

[abinidi]

Specifically, there is one instance where a user is listening to an audio passage, and they are supposed to click a button every time they hear a specific word in the passage.

 

The button I created uses this code:

 

><input type="button" name="count" value="Count" onClick="performCount()">

 

the performCount() function is:

>var total=0 //variable used to count number of times users hear a specific form in the passage
function performCount() { //v0.1 Counts number of times users click the Count button
  total++; //add one to the total variable
  alert(total)   //used for debugging; creates popup alert showing variable's value
  }

But, when I submit the form, I need to be able to get the value of the total variable, so I can use PHP to store it in the mySQL database.

 

I'm not sure what code I need to do that. Sorry. I'm not trying to be dense here, but this _is_ a learning process...

[abinidi]

Ok, so I realized the answer to my question.

 

Basically, I created a blank hidden input type (name pcounter)with no value. Then I used javaScript to insert a value into the hidden input container that was placed inside the form. Then I could use PHP to find it.

 

So, here is the code for the hidden input type:

><input type="hidden" name="pcounter" value="0">

And here is the code for the java script:

>var total=0 //variable used to count number of times users hear a specific form in the passage

function performCount() { //v0.1 Counts number of times users click the Count button
  total++; //add one to the total variable
  //alert(total)   //used for debugging; creates popup alert showing variable value
  document.listen.pcounter.value=total; //set hidden filed to variable so it can be passed to PHP
  }

 

I was glad to get it to work.

 

However, now I've realized that I need to do some document linking with PHP. Here is my new problem.

In javascript there is a document.location function that allows me to link to another page. I need to find a similar function in PHP.

 

So, here is the javascript I was using:

>function goNextPage() { //v0.1

 var treatment;
 treatment=document.inputForm.treatmentID.value; //get treatment from form (used PHP to get it there from the URL)
if(treatment==1){
 document.location='bm.php?t=<? echo($t) ?>&r=<? echo($r) ?>'}
 else if(treatment==2){
 document.location='fx.php?t=<? echo($t) ?>&r=<? echo($r) ?>'}
 else{
  alert('There has been an error with the treatment varable')}
}

 

So as part of the function, the user was directed to the specific page. How can I do this with PHP?

 

I've started with this (and I'm pulling the $t variable from the URL):

 

>if( $t == 1)
{

}
elseif( $ == 2)
{

}
else {
echo "There has been an error with the treatment varable"
}

 

But what I need are the commands to send users to a specific page if the conditions are met.

 

Any suggestions?

[abinidi]

Too bad nobody had any suggestions for me.

 

I'll post the solution I came up with here, in case it helps somebody else later.

 

I'm sure this isn't the best solution, but hey, it worked for me, and that was all I really wanted. I'm not looking for a robust web application here, just enough to get the data collected for the thesis.

 

We're only talking about 150 visitors who will ever use the site, and they will only use it once. So its not a huge deal.

 

Anyway, here is the code I used to make it work:

 

><?
if( $t == 1 )
{
?>
<html><head><title>German Survey</title>
	  <META HTTP-EQUIV="Refresh"
	  CONTENT="2; URL=ak.php?t=<? echo($t) ?>&r=<? echo($r) ?>">
<link rel="stylesheet" href="style.css" type="text/css">
</head>

<body><p>	<? include("displaytreatment.php") ?></p><p>
<? printf("You wrote: $response <br>\n");	?><p>You will be redirected to ak.php</p></body></html>
<?
 }
else if( $t == 2 )
{
?>
<html><head><title>German Survey</title>
	  <META HTTP-EQUIV="Refresh"
	  CONTENT="2; URL=bm.php?t=<? echo($t) ?>&r=<? echo($r) ?>">
<link rel="stylesheet" href="style.css" type="text/css">
</head>

<body><p>	<? include("displaytreatment.php") ?></p><p>
<? printf("You wrote: $response <br>\n");	?><p>You will be redirected to bm.php</p></body></html>
<?
 }
else {
echo "There has been an error with the treatment varable"
}

 

So, that is my un-elegant solution. Maybe it will help somebody someday. If I ever find a more elegant way to do it, I'll let you know.

[TCH-Bruce]

Way to go Paul

 

Sorry my knowledge is limited when it comes to PHP. Haven't seen Raul or David online to tackle this one. Both of them are good with PHP.

[TweezerMan]

I'd probably try sending a Location header with PHP:

><?php
$base_url = "http://" . $_SERVER['HTTP_HOST']
. rtrim(dirname($_SERVER['PHP_SELF']), '/\\') . "/";
$query_string = "?t=" . $t . "&r=" . $r;

if ($t == 1) {
header("Location: ${base_url}ak.php${query_string}");
} elseif ($t == 2) {
header("Location: ${base_url}bm.php${query_string}");
} else {
echo "There has been an error with the treatment varable";
}
?>