Forum Moderators: open
Form name is "foo" and below the form (or could be before) I need to call function "readfoo()". How do I reference the form name when calling the function? Reason I ask this is I will have common JS calling dynamic forms - sometimes only once per page, sometimes more. Thus I need to pass the form name or else they all explode.
So
-- Form Foo --
-- call to readfoo(reference form); --
readfoo(myformnamevariable){
somevariable = myformnamevariable.formfield.length;
--
I'm sure its something very simple that I have overlooked, but like I said, Im having a major brain fart on this.
Thanks in advance to anyone with any ideas
document.forms["foo"]
A string variable can replace the literal string in the example. This technique can be extended to named elements as in:
document.forms["foo"].elements["fubar"]
window["document"]["forms"]["foo"]["elements"]["fubar"];]
Thanks for the ideas, but you are assuming I know the name of the form when I reference it, and I only will have a variable - that is if I ever get it to work.
Oh, and Bernard, I think you may have been associating with your arrays a bit overmuch. To be on a first name basis with all of them, after all.
i.e. <input type="submit" onclick="readfoo(this.form)">
to pass the form name to the script, then:
function readfoo(frm) {
somevar=frm.elements["somefield"].value;
}
referencing the variable passed to readfoo(). Pass additional comma-separated references to "catch" and use in the function:
<select name="list" onchange="readfoo(this.form,this,this.options[this.selectedIndex])">
and:
function readfoo(frm,fld,idx) {
someformname=frm.name;
somefieldname=fld.name;
somevarvalue=idx.value;
}
What kind of situation exists where you do not know the name of the form you wish to use?
Bernard: Do you really use that expression of the array? I've never seen it done like that, before! You continue to surprise... :)
runfunction(formname);
runfunction(myform){
myform.variable.value........
Like I said at the start(but stated poorly), the point is to pass a form name to a function so that I can have 1, 2 or 3 forms call the same JS and can reuse and better update it in the future.
Rambo gave the solution in his first reply, and in fact Stupid's version (sending a reference) is equally applicable to your request:
>> so that I can have 1, 2 or 3 forms call the same JS and can reuse and better update it in the future
Stupid's is arguably better, because you can use exactly the same statement everytime. (Rambo would have done this too, I reckon, if you hadn't been explicit about using the form
nameHere's what you're after.
HTML <form name="one">
<input type="button" onclick="readfoo('one')">
...
<form name="two">
<input type="button" onclick="readfoo('two')">
...
<form name="tre">
<input type="button" onclick="readfoo('tre')">
SCRIPT
function readfoo(formRef)
{
var form = document.forms[formRef]
// var form = document.forms[formRef]¦¦ formRef //* alt (#1)
...
}
The key thing (as I er.. underlined earlier) is that these terms are exact synonyms:
object.propName
object['propName']
(tre is three in Swedish BTW. It keeps things looking neat.
fem, sex, sju are also useful for this.)
I'm feeling big today, so I'll go one better than both these honourable members.If you use the commented-out line instead, it becomes able to take both forms of referencing (#2) - object ref, or name string. So you can use the function calls above, and / or the universal:
(#3)<input type="button" onclick="readfoo(this.form)">
//
#1 - amend ¦¦ to unbroken pipes.
#2 - just as long as you don't give your forms the unlikely names of
"[object]""HTMLFormElement"[edited by: Bernard_Marx at 9:02 pm (utc) on Aug. 24, 2004]
Of course, you can only address the window indirectly, via one of it's self-referential properties. Just because one of them is named
window
I need the call to the function to happen not on "onclick" but on page load. So it can not be connected to a "onsubmit" or "onclick" action.
<body onload="yourFunction('str_var_1','str_var_2');">
or:
<script type="text/javascript">
window.onload=yourFunction(x,y,z){
//function code
}
</script>
So, I submit THIS for your inspection:
<script>
function readfrm(frm,tmout) {
clearTimeout(tmout);
var thaform=frm;
... etc ...
}
</script>
<form name="one" onload="doone=setTimeout('readfrm(this,\"doone\")',200)">
</form>
<form name="two" onload="dotwo=setTimeout('readfrm(this,\"dotwo\")',400)">
</form>
<form name="tre" onload="dotre=setTimeout('readfrm(this,\"dotre\")',600)">
</form>
... etc ...
The forms are initialized, then call the function (which kills the appropriate setTimeout) after a few microseconds' delay ... staggered, so they don't "collide" during execution of the function.
Eh? Are we getting closer to the solution? :)
(I didn't test this, but my only nagging doubt is how I included the setTimeout reference for clearing ... I think I escaped the delimeters correctly ... Bernard?)
The previous examples in this thread by our esteemed colleagues are chock full of good theory on this.
Often, the BODY's onload event happens before forms on the page are fully initialized, due to variances in browser JS handling
Now, I didn't know that. Do you think that that applies to the Javascript assignment,
window.onloadI think I escaped the delimeters correctly ... Bernard?
Yes, that escaping carries all the hallmarks of a true professional; the delimiters delimit sublimely.
...it's this that is putting us all to shame.
What?
this, that's what.
setTimeout executes the statement string in a global context, so
this
I had thought that "this" referred to the current object (form, image, etc.)? The setTimeout is carrying the child "readfrm()". Does that not move the burden of evaluating "this" to "readfrm()", ergo setting its value to its container (the <form> object)?
How about this? (Assuming the forms are consistently initialized prior to the BODY onload event):
<script>
function readfrm(frm,tmout) {
clearTimeout(tmout);
var thaform=frm;
... etc ...
}
function initForms() {
for(i=0;i<=document.forms.length-1;i++) {
tmo="do"+i;
tmo=tmo.toString();
tmlen=200*i;
tmo=setTimeout('readfrm(document.forms[i],tmo)',tmlen);
}
</script>
<body onload="initForms()">
<form name="one"></form>
<form name="two"></form>
<form name="tre"></form>
... more forms of varying quantity ...
</body>
Please can I go play outside, now? :)
..and yes, you can, but don't be playing with those rough kids (like Tribble).
Took a good look at it today, and used what Bernard and Rambo said originally.
<form>
code
</form>
<script language="JavaScript">
var myform = 'formname';
myfunction();
</script>
Within the function(s) rather then constantly passing the variable I set it above and not pass it to the 20 subfunctions that need the reference. Within the subfunctions I reference the form via document.forms[myform] and that solved my problem. Im sure there is a better way to do the reference, but Im just happy to hack with some JS and get it to work :)
Thanks to all those that spent time helping me. I need to stop coding CF one day and look at JS beyond simple form verification again.
