Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Dynamic form validation with Javascript? 16

Status
Not open for further replies.

gbaughma

IS-IT--Management
Staff member
Joined
Nov 21, 2003
Messages
4,773
Location
US
Here's the situation.

I have form web page that is dynamically built from ASP. In other words, the record number is included with the name of the form field, so I could have frm23depart and frm27depart, for example.

I want to do some validation on those fields, but what I need is something like:

function compare(fieldno){
var1=document.form1.frm<fieldno>depart.value;
....

See the issue? I need the javascript to be dynamically passed which FIELD it needs to use for it's calculations

I'm using onchange="compare(<%=fieldno%>)" ... to pass the field number to the javascript.

Any thoughts on this? It's holding up a project that I'm working on.....

I don't really want to dynamically generate multiple functions just for this (although that would be an option).

--Greg


Just my $0.02

"In order to start solving a problem, one must first identify its owner." --Me
--Greg
 
Something like this?
Code:
document.forms['myForm'].elements['myElement'].value


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 
You need to use the elements collection (and it wouldn't hurt to use the form collection either)
Code:
var1 = document.[b][COLOR=red]forms[[/color][/b]"form1"[COLOR=red][b]].elements[[/b][/color]"frm" + fieldno + "depart"[b][COLOR=red]][/color][/b].value;

-kaht

How much you wanna make a bet I can throw a football over them mountains?
sheepico.jpg
 
    2
  • Thread starter
  • Moderator
  • #4
Most excellent. You know, when I first tried it, I got an error... then I realized I had named my form Form1, and not form1... funny, how that one miss-of-a-shift-key....

But yes, that's exactly what I was looking for. I knew it had to be something simple like that.... I don't write a lot of Javascript, more ASP... <sigh>

Time to pull out my JavaScript for Dummies book again. :)



Just my $0.02

"In order to start solving a problem, one must first identify its owner." --Me
--Greg
 
I was the same as you, all my element references were like:
Code:
formname.elementname.value
Eventually, after all the suggestions by the other people in the forum I was converted. The constant warnings in the firefox javascript console about referencing elements this way also helped me get away from those bad habits.

-kaht

How much you wanna make a bet I can throw a football over them mountains?
sheepico.jpg
 
my $0.02:

if you start using XHTML 1.0 Strict, it does not define a "name" attribute for the form element, so you need to give your form elements an "id" attribute instead and use document.getElementById()

e.g.
var form = document.getElementById("myForm");
form.elements["frm" + fieldno + "depart"].value;

can't say that i've fixed all of them in my code yet...


-jeff
try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }
i like your sleeves...they're real big
 
Jeff, as a side note you can still use the forms collection if the form has been given an id. I don't know how widely supported this is, but it works for all of my code and I see no errors in the javascript console.

so with:
Code:
<form id="blah">

this will work:
Code:
document.forms["blah"].elements["whatever"]

-kaht

How much you wanna make a bet I can throw a football over them mountains?
sheepico.jpg
 
Well, an update on my project (if anyone's interested)... actually, I'm rather proud of myself.

The elements portion worked quite well.... here's what I am writing. It's a vehicle scheduling program, that needs to check if a vehicle is already assigned to be out.

This posed a couple of interesting problems... first of all, how to represent depart time and date, and return time and date, as values that could be easily compared and validated. Well, I found a nice little bit of code which does in Javascript the same thing as the dateDiff command in VBScript. SOoooooo... I converted all the dates and times to numbers. The easiest way was by doing a dateDiff("N","01/01/2000 00:00",date), which gave me the number of MINUTES from Jan 1, 2000 midnight. Now I could do <=, >=, etc. comparisons on the numbers.

The other part I needed to do was to actually load the values from my database into Javascript, so that the validation routine ran on the client, instead of filling out the form, submitting it, and then having it tell you that the vehicle was already in use.

This worked out kinda slick....

<SCRIPT Language="javascript">

<%
(bla bla)
SQLStmt = "SELECT * FROM Transports WHERE trans_sched=-1; "
Set db = Connect.Execute(SQLStmt)
icounter=0
Do while NOT db.EOF

%>
array0[<%=ICounter%>= <%=db("idepart_time");
array1[<%=ICounter%>= <%=db("ireturn_time");

<%
icounter = icounter + 1
db.MoveNext
Loop
%>

... that loaded up my javascript array with the values from my database, pulled forth from VBScript.

Anyway, that's how I'm doing it (generally)... hope you get the idea, and maybe an idea of your own or two. :)



Just my $0.02

"In order to start solving a problem, one must first identify its owner." --Me
--Greg
 
Thanks guys, just hit this major problem myself, started using XHTML and now that the 'name' attribute has been deprecated I am finding all my form scripts don't work.

This is going to be a nightmare to change.

But then again I just re-validated leaving "name" on the form and it is still valid XHTML - Transitional.

if XHTML Transitional allows "name" does that mean it's perfectly ok to reference the form elements in the normal way.

document.FORMNAME.FIELDNAME.value

also if "name" is being deprecated and ID is being used.

If you have an input with an ID not NAME, does it get handled the same way server side, or will PERL not see the value pairs as they are not name/value pairs they are ID/value pairs?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
if XHTML Transitional allows "name" does that mean it's perfectly ok to reference the form elements in the normal way.
It will still work. However, you will get boatloads of javascript warnings (take note I said warnings, not errors) in the javascript console when your page loads in firefox. If you have the web developer's toolbar installed then that means you'll have that obnoxious little yellow icon pop up every time the page loads. That's the main reason I converted most of my code to use the forms and elements collections.

-kaht

How much you wanna make a bet I can throw a football over them mountains?
sheepico.jpg
 
Ooops... syntax error... should be...

%>
array0[<%=ICounter%>]= <%=db("idepart_time")%>;
array1[<%=ICounter%>]= <%=db("ireturn_time")%>;

Forgot the ]'s and the %>'s :S

--Greg


Just my $0.02

"In order to start solving a problem, one must first identify its owner." --Me
--Greg
 
1DMF,

to clarify, XHTML 1.0 Strict does not define a "name" attribute for the form tag only - it does still define a "name" attribute for input tags.

the only change you need to make when using the strict doctype is in how you first get a reference to the form object.



-jeff
try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }
i like your sleeves...they're real big
 
so for an input form field you now have to give them a name and an id, the name is used server side and you have to use getElementById client side or use the form collection method.

why do standards always have make you code much more and go the long way around things?



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
form field -> id only
input field -> id and name, or name only as long as you reference it with the elements collection

-kaht

How much you wanna make a bet I can throw a football over them mountains?
sheepico.jpg
 
yup as i thought, what a pain, good job i'm using transitional doctype :-P

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
what a pain, good job i'm using transitional doctype
Maybe, but if you were using a strict doctype from the beginning, you would have selected your type first, validated as you went along and wouldn't have a need to go back on yourself and change your code. It's only if you are trying to add a doctype afterwards that you come across these types of problems [smile]


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 
touche ca8msm , but I still think it's better to go back to your code and make it correct and valid than not bother and leave it.

anything new i create will be done in the correct mannor, i'm not just going to leave all the bad stuff, just because I should have done it a different way in the first place.

have a great weekend.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
I agree with what everyone else has said.

Dave


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
O Time, Strength, Cash, and Patience! [infinity]
 
Dave, that definitely deserves a star.. ;-)

I agree too. [thumbsup2]

A smile is worth a thousand kind words. So smile, it's easy! :-)
 
Thanks! ...and: Back at'cha! :-)

Dave


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
O Time, Strength, Cash, and Patience! [infinity]
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top