Why is JavaScript corrupting my PHP Script?

Hello all,

I'm new to PHP (and web development in general) and have come across something that to me seems really, really bizarre!

Background

I am currently designing and developing an online enrolment form for my employer, a training company. The form consists of 3 pages - pages 1 and 2 are for data input whilst page 3 is a summary page with only one input, a box to check that the customer agrees to our T&Cs. Page 3 also includes a box where calculations are made as to the price of the selected training course based on choices made earlier in the form.

The form displayed on page 2, and some of the text on page 3, changes depending on a choice made on page one - that is, whether they are paying for the course themselves or their employer is funding it. If they choose employer, they get one form, if they choose self funding they get a different one. However, both of these forms are contained within a single .php file, using session variables to decide which one should be displayed.

I am using sessions to transfer the data between the pages. Each page has been made sticky using session variables. Real-time validation is carried out using javascript on each individual page, then a final PHP validation check is run on the whole thing when the customer tries to submit the final page. Javascript is also used on page one to calculate the price of the course in real time so the customer can see how much he/she will be paying before proceeding further.

The Problem

I find this really strange:


In Firefox, everything works perfectly
In Internet Explorer, when JavaScript is turned off, everything is fine. But when JS is switched on, the PHP validation on the final page seems to go haywire, thus making it impossible to submit the form.
In Chrome, again when JS is switched off, everything works, but when switched on, I can't even get past the first page. Instead of loading the correct form for page 2, I just get a blank screen.


Can anyone help? This is my first major project and I've been working on it for weeks, coming up against all sorts of problems and tearing my hair out but managing to solve them. Now I'm completely stumped, when I'm almost within touching distance of completion!!

I can't post the code here as it's 3 separate documents and very complicated, but if you want to have a look at the form itself go to:

http://testing.xenongroupadmin.com/testing/enrolment.php

I hope someone can help! Thanks very much!

All the best

Chris

This won't have a thing to do with PHP.
Since it works in Firefox, and in IE with JS turned off, this indicates a full issue with your javascript and not that of your PHP.
You'll need to post your parsed HTML source for the client developers to help diagnose. Actually, just noticed you have a link, so that should help lead them through it.

Also, from PHP side make sure the same validation is occurring. Never trust that Javascript is sufficient for any verification or validation (or any client technology for that matter).

Moving from PHP to Javascript forum.

Without seeing your Javascript I don't see how we can diagnose the problem.

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

function doCalc() {

var level = document.getElementById("level").value;
var size = document.getElementById("size").value;
var delivery = document.getElementById("deliv").value;
var venue = document.getElementById("venue").value;

function doCalc() {

var level = document.getElementById("level").value;
var size = document.getElementById("size").value;
var delivery = document.getElementById("deliv").value;
var venue = document.getElementById("venue").value;

Thanks Davey,

Unfortunately this has not solved the problem - forgetting to define the 'venue' variable was a separate problem that I had missed!!

Any more ideas? I've uploaded the javascript for page 1 as an attachment for those that need to see it. Apologies, it's quite convoluted - I'm new to this and probably haven't gone about things in the most efficient way, just tried to find something that works - possibly could be done with less code to wade through!!

As it is an IE problem I suspect that the trouble is caused by using the same name for an HTML element and a Javascript id.

What error messages do you get from the IE debugging console? ( Press F12)

looked @ it on chrome and seemed ok- but that is just clicking next w/o filling anything in... can you tell us what fields are going "haywire" when validating?

@Philip M - Just been through and changed all of the javascript ids that were the same as the corresponding name attribute - that seems to have sorted most of the problem. Thank you!

The final issue is with the final submit form on the 3rd page. This page has just one piece of validation - a checkbox for our terms and conditions. At the moment the code works if the checkbox is NOT ticked and brings up an alert box, but if the box IS ticked it just reloads the final page, rather than actually submitting the form. It's defininitely a JS issue - turn JS off and the submission works perfectly. I'm sure it's just a small mistake on my part, so I've posted the relevant code below - can someone tell me what's wrong with it?

NB: The id of the form is 'finalpage'

Thanks!




//Final Submission


function submitForm4() { if (document.getElementById("tand_cs").checked) {
document.forms.finalpage.submit();
}
else {
alert ("Please confirm that you agree to our terms and conditions");
return false;
}
}



EDIT: This issue only seems to occur using Chrome. IE and Firefox work fine.

Is the name of your form "forms"? If so change it. But if you mean to refer to your form, then the syntax is forms[0], that is the first form on the page.

Thanks Philip, although I've not been able to test this fully yet for reasons given below. This is turning into a can of worms, new problems jumping out of nowhere for no apparent reason!

So the current situation is:



Firefox - works perfectly

Chrome - has decided to go back to the previous problem - when I try to submit the first page, instead of moving on to the second page I get a blank screen. I thought this had been resolved by making sure the 'name' and 'id' attributes on all form elements were different, but it seems to have gone back to whatever issue it was having before. When JS is turned off, the form works perfectly

IE - Has thrown up a new problem. It's become very hit and miss whether it actually loads the form in the first place!! Sometimes it will load up fine, and when it does everything works as expected. But the majority of the time it will not even load the first page! This happens regardless of whether JS is switched on. Could this be a server issue? The error message is simply 'Internet Explorer cannot display the webpage'



Edit: I have also tried this using Safari on my iPad, which is showing the same problem as Chrome - first page loads up fine, but can't move forward to the second page.

Well, you must have done something to screw things up. Making the changes I suggested could not possibly prevent the script from working properly.

I would not assume that if it works perfectly in Firefox that the problem lies with the other browsers. Firefox has its funny little ways as well and may accept something which is in fact wrong by ECMA standards. Same with IE of course.

"Internet Explorer cannot display the webpage" indicates a server issue. But I cannot suggest why the problem should be intermittant.

WHAT ERRORS MESSAGES DO YOU GET FROM YOUR ERROR CONSOLE?