JavaScript form submission hates my form

[HazMatt]

What I need is a JavaScript expert!

I already have server-side form validation running in my PHP code, but I have decided that I need client-side JavaScript validation because IE 7 and Firefox 3 both do not appear to save the contents of the webform when using the Back button to fix an incorrectly filled out form (Safari worked great).

I've found many fine examples of JavaScript form validation online, but they all seem to rely on the name attribute of a form field. Here's a typical example:

Email: 

FileMaker's PHP Site Assistant would generate the following code for an email field:

Email: 

NOTE:  This post appears to hide the PHP opening and closing tags!



The rendered PHP code would reveal something like this:

Email: 

The number 13 would indicate that it is the 13th field in the form; they are numbered (more or less) sequentially.

I can (and already have) used these rendered numbers in my server-side validation. But when I try to use the number value 13 or '13' or "13", my JavaScript function appears to be ignored and the form is sent to the server. Obviously JavaScript treats numbers differently than text names, and I don't know how to accommodate for that.

I would love to use the 'id' attribute in my JavaScript validations, but I haven't seen any examples that do so. I am also considering scrapping the Site Assistant generated code (only if I really have to) and hand-writing each field using the regular PHP API stuff, but I really just need to get this form live.

Thanks!

Edited May 26, 2009 by Guest

[HazMatt]

Well I guess the FileMaker PHP Site Assistant is in violation of the W3C when it comes to generating name attributes:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

I fear I must further re-write the Site Assistant generated code to make things work properly. :P

[Baloo]

what you want is document.getElementById("theID")

each element should have a unique id; several elements can share the same name.

var field1 = document.getElementById("field1").value  

if you need for JavaScript to cast a number as a string just concatenate a null string to it



i.e.

    var answer = document.getElementById(42 + "").value



 

edited to add:

I am also considering scrapping the Site Assistant generated code (only if I really have to) and hand-writing each field using the regular PHP API stuff, but I really just need to get this form live.

From what I've seen of the site assistant's code, if you don't want exactly what it spits out building your own pages from scratch will save you tons of time in the end.

Edited June 11, 2009 by Guest

[HazMatt]

Thanks for the reply Baloo. I did end up re-writing things from scratch to work the way I wanted, but the JavaScript tip is appreciated. I figured there'd have to be some way to do it!