View Full Version : Javascript & PHP Form/Decision Tree

10-31-2012, 07:56 PM
I'm creating a decision tree/ "personality test" like webform. Basically the customer answers questions and depending on their answers (points) they get redirected to a different page and we get an email.

So far I got everything working except the part where it calculates the total and passes to the php. If I manually enter a number for total it will work perfectly, but obviously I don't want to enter in a number manually I want it to calculate the number and then send that.

So. This is what I have in my code (it has been clipped for readability )

<script LANGUAGE="JavaScript">
<!--Hide JavaScript from Java-Impaired Browsers
function test_it(entry) {
if (entry.id!=null && entry.id.length!=0) {
entry.id=""+ eval(entry.id);
function computeForm(form) {
var total=0

for (var count=0; count<5; count++)
if (form.a[count].checked){
var total=total+parseInt(form.a[count].id);

for (var count=0; count<2; count++)
if (form.b[count].checked){
var total=total+parseInt(form.b[count].id);


var form = document.forms['myForm'];
form.elements['total'].value = total;
alert(form.value); //nothing is popping up...but I can see the query string says total has nothing


<form name="myForm" onSubmit= "test_it();">
<!--<form name="myForm" METHOD="POST" action="contactQuestionnaire.php" onSubmit= "test_it(); return false;"> -->
<table border="0">
<td width="300">Name:</td>
<label for="name"></label>
<input name="name" type="text" id="name" tabindex="1" size="40" />
<td width="300">Address:</td>
<td><label for="address"></label>
<input name="address" type="text" id="address" tabindex="2" size="100" /></td>
<td width="300">Email:</td>
<label for="email"></label>
<input name="email" type="text" id="email" tabindex="3" size="40" />
<td width="300">Phone:</td>
<label for="phone"></label>
<input type="text" name="phone" id="phone" tabindex="4" />
<td width="300">Would you like us to contact you to assist and provide product recommendations?</td>
<table width="200">
<input name="contact" type="radio" id="contact_0" value="yes" checked="checked" />
<input type="radio" name="contact" value="no" id="contact_1" />
<fieldset><b>My experience level is:<br>
<input TYPE="radio" id="5" NAME="a" VALUE="brandNew">
Brand New<br>
<input TYPE="radio" id="10" NAME="a" VALUE="under2Years">
Less than 2 years<br>
<input TYPE="radio" id="15" NAME="a" VALUE="2to5Years">
2 - 5 years<br>
<input TYPE="radio" id="20" NAME="a" VALUE="5to10Years">
5 - 10 years<br>
<input TYPE="radio" id="30" NAME="a" VALUE="over10Years">
10+ years<br><br>

<br />
<input type="hidden" name="total" value="" />
<input name="submit" TYPE="submit" VALUE="View Results"><br><br>



Thank you so much in advance!

10-31-2012, 08:16 PM
1. Stay away from eval(). eval() is evil.
2. Every time you call computeForm(), you reset the total to zero. Are you sure you want to do that?
3. If you are using numbers for id, or if the id begins with a number, that's illegal. ids need to begin with either a letter or underscore.
4. The code just before your closing script tag runs on every page load, before any HTML is loaded. It's not part of a function, as you have it pasted.

10-31-2012, 08:33 PM
1. Okay, what should I use instead?

2. I don't see why this would be a problem since ideally I want the submit button to calculate the total and then send it to my php form, which then redirects them to the proper page.

3. Hmm. I thought this might be a problem. However I need the form values to be sent to PHP so I need them to stay on values. Unless you have another suggestion?

4. I'm not sure what to do about this :/

Philip M
10-31-2012, 08:38 PM
for readability )

<script LANGUAGE="JavaScript">
<!--Hide JavaScript from Java-Impaired Browsers

Javascript != Java!! They are two completely different languages.

<script language=javascript> is long deprecated. Use <script type = "text/javascript"> instead (in fact also deprecated but still necessary for IE<9).
The <!-- and //--> comment (hiding) tags have not been necessary since IE3 (i.e. since September 1997). If you see these in some published script it is a warning that you are looking at ancient and perhaps unreliable code.

Form validation of the pattern if (document.formname.formfield.value == "") - that is blank - is barely worthy of the name, and virtually useless, as even a single space, an X or a ? will return false, that is pass the validation. A proper name may only contain letters, hyphen, space and apostrophe.
Numeric values, such as zip codes and phone numbers, should be validated as such. Ditto email addresses. This topic has been covered many times before in this forum.

It is your responsibility to die() if necessary….. - PHP Manual

10-31-2012, 08:41 PM
1. If entry is an object and you're looking for the id, just use entry.id - you don't need to run it through the JS runtime to get it.
2. I was reading quickly. Didn't think about it. Sorry. :)
3. Can you replace the value (not the text of the checkbox, the value) with the ID and give the checkboxes a legal ID?
4. Integrate it into one of your functions so that it's called only when needed.

Old Pedant
10-31-2012, 09:42 PM
This makes no sense:

function test_it(entry) { ... }

but then invoked via:

<form name="myForm" onSubmit= "test_it();">

So the functiion is expecting an argument and will not work if not given one.

But then, when you call it, you don't pass any argument!

Then you have this nonsense line:

entry.id=""+ eval(entry.id);

*IF* you had passed an argument to the function and *IF* that argument was an element with an id, then that line would manage to do the wonderful task of setting the id of the argument to the id of the argument. In other words, it does nothing at all.

And then, finally, you do

Except, since entry is null, that line will get an error and so you will *NEVER* call computeForm( ) and that, of course, is why you don't see anything happen when you do the submit.

You are never even managing to call computeForm!

Old Pedant
10-31-2012, 09:47 PM
This code is total hash:

var form = document.forms['myForm'];
form.elements['total'].value = total;

First of all, as WolfShade said, since it is not INSIDE of any function, it simply runs when the page first starts up.

But because it runs before the HTML for the <form> is even created, the first line there will *NOT* be able to find the form named "myForm". IT DOES NOT YET EXIST.

By the same token at that point in the code, your computeForm function has not yet been invoked, so the total variable will be null. So you would be assigning null to the form field, if indeed the form field existed and the form containing it existed, neither of which is true.

Finally, you try to alert the form.value but a form doesn't *HAVE* any value. Form *fields* have values.

Old Pedant
10-31-2012, 09:50 PM
I want the submit button to calculate the total and then send it to my php form,

No, you do *NOT* want that.

If the user disables JavaScript, then the total will *NOT* be calculated but the PHP page will still be invoked.

Yes, you can calculate the total in JavaScript if you want to do so to display the value to the user.

But you should *NEVER* rely upon JavaScript form validation or calculations. You should *ALWAYS* do validation and calculations in the PHP code. Yes, again, even if you did it in the JS code.

10-31-2012, 10:08 PM
Okay I'm trying to process all of these posts.

Firstly, I know JavaScript and Java are different things....I took the personality test code from another source (which is quite possibly outdated, I'm not sure) and never noticed their comment calling it Java until you brought it up.

And please bear with me, I'm a designer and programming is NOT my forte so what may seem obvious to you is not to me :/

Believe me, coding this myself was my last resort as I was trying to find some sort of pre-made plugin that could do this for me to no avail. I'm always willing to learn, but I don't know what is valid/is not valid code just from looking at it.

So basically what I'm getting from this is I should take out the counting code and do this all in php?

The problem I am anticipating is the email-sending issue. $_GET is taking the VALUE of the form field (which is why I did something illegal and put the numbers/points in the ID initially). Getting the value works great for emails as it is sending me an email with the results from the test. But the automatic redirect is causing my problems as I can't calculate the points using ID. We want people to be able to see their results instantaneously instead of waiting for us to call them.

Old Pedant
10-31-2012, 10:55 PM
There's an easy fix for the points thing.

Try something like this in your <form>:

<label><input type="radio" name="Experience" value="5: brandNew">Brand New</label><br/>
<label><input type="radio" name="Experience" value="10: under 2 Years">Less than 2 years</label></br>
<label><input type="radio" name="Experience" value="15: 2 to 5 Years">2 - 5 years</label></br>
... etc ...

First, replace the meaningless name="a" with a name that relates to the purpose of the field. Secondly, put the number of points assigned right in the value= (note that I follow it with a colon to separate it from the descriptive part of the value).

Now, in your PHP code, you can easily do this:

$totalPoints = 0

$temp = explode( ": ", $_POST["Experience"]); // and you SHOULD use POST, not GET
$experience = $temp[1];
$points = $temp[0];
$totalPoints += $points;

$emailBody += "Your experience is $experience, which is worth $points points<br/>\n";

... and then do the next thing that is worth points ...

11-01-2012, 12:21 AM

Thank you so much! This worked brilliantly.