PDA

View Full Version : how to get form name/id using onSubmit

Darren.T
01-09-2006, 01:08 PM
This seems like it should be easy, but I haven't been able to figure it out.

I think I can boil this down to a very simple example...

<form name="myform" action="some.cgi" onSubmit="javascript:alert(this.name)">

Unfortunately, the alert box displays "[object]".

I'm proceeding with the following assumptions...

the "this" object is referring to the form itself.
the "name" propery is valid for a form object.

My company uses IE6.

What am I doing wrong?

Thanks in advance...
Darren
_Aerospace_Eng_
01-09-2006, 01:37 PM
That should work though the javascript: part is not needed
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>

<body>
<form name="myform" action="#" onSubmit="alert(this.name)">
<input type="submit">
</form>
</body>
</html>
Does the above work for you?
Darren.T
01-09-2006, 03:58 PM
Gah!

Your's works... mine didn't.

I had stripped down my example to bare bones... here's a full example that still doesn't work for me...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head></head>
<body>
<form name="myform" method="POST" enctype="multipart/form-data" action="#" onsubmit="alert(this.name)">
<input name="name" id="name" type="text" size="20">
<button type="submit">Submit</button>
</form>
</body>
</html>

So I went back to your code and step by step converted it to my example above and lo 'n behold, it breaks when I add the <input>. If I leave the text field out, the alert displays the form name perfect. If I put the input field in, it no longer displays. So I took a hunch that it was the fact that my field was named "name" and all of a sudden, it works.

Bleh! I'm sure there's a logical explanation of why this.name gets messed up by having a field named "name", but whatever. I've changed the field name and it's fine now.

Thank you.
Darren
Jon Hanlon
01-09-2006, 06:54 PM
Well, if you name an element 'name' then of course it's gonna be an object.

You should steer clear of any nouns that could cause a conflict - 'form' 'action' 'name' 'onclick' 'forms' 'window' etc.
Darren.T
01-10-2006, 02:59 PM
Things are moving along, but I thought I'd come back and ask a follow up question...

The purpose behind getting the form name is I wanted to write one consistent onSubmit command for every form in the web site, and then use a switch statement in one validation.js file that would validate the fields based on the name of the form.

The javascript is working fine. I have an HTML question regarding the onSubmit attribute here...

I was using onSubmit="return validate(this)" in the <FORM ...> tag, which works when the user hits the enter key anywhere in the form. But I also have buttons at the bottom of the form, that originally looked like this:

<BUTTON type=button onclick="setAction('save');this.form.submit()">Save</BUTTON>
<BUTTON type=button onclick="setAction('next');this.form.submit()">Next</BUTTON>

However, the buttons didn't seem to activate the form's onSubmit attribute. Is that normal behavior? Is there a better way to do this?

Right now, I've written a wrapper function for the buttons that amounts to

function doAction(frm,act) {
setAction(act);
if(validate(frm)==true) frm.submit();
}

This all works, but again, is there a better way to do this without repeating code in two places (in the onSubmit of the form and in the onClick of the button)?

Thanks again,
Darren
_Aerospace_Eng_
01-10-2006, 03:41 PM
What does the validate function consist of? Can you post the code you have for that?
Darren.T
01-10-2006, 04:48 PM
The validate function just does client-side field validation. I'll post an excerpt:

function validate(frm)
{
with(frm)
{
switch( name )
{
case "form_login":
if( ve( login ) == false ) return false;
if( ve( password ) == false ) return false;
break;
case "form_new_user":
if( ve( user_name ) == false ) return false;
if( ve( user_age ) == false ) return false;
break;
case "form_edit_user"
if( ve( user_id ) == false ) return false;
if( ve( user_name ) == false ) return false;
if( ve( user_age ) == false ) return false;
break;
default: /* unknown form */
return false;
}
}
return true;
}

function ve( elem )
{
if( verifyElement( elem ) == false )
{
elem.focus(); return false;
}
else
return true;
}

function verifyElement( e )
{
with( e )
{
switch( name )
{
case "login":
if( value.length < 1 ) return popError( e, "please enter your login name." );
break;
case "password":
if( value.length < 1 ) return popError( e, "please enter your password." );
break;
case "user_id":
if( value.length < 1 ) return popError( e, "please enter the user's id number." );
break;
case "user_name":
if( value.length < 1 ) return popError( e, "please enter the user's name." );
break;
case "user_age":
if( value.length < 1 ) return popError( e, "please enter the user's age." );
if( value == NaN ) return popError( e, "illegal value for user's age." );
break;
defult: /* unknown field */
return false;
}
return true;
}

function popError( e, t )
{
alert( t );
e.focus();
return false;
}

Now, I posted that because you requested it, but that's getting into the java script... I didn't think my question dealt with the actual javascript. I was trying to figure out how to get FORM onSubmit to use the same code as the BUTTON onClick, so that I'm not repeating function calls in two places. I haven't tried it yet, but I was considering something along the lines of

<FORM ... onSubmit="this.button1.onClick(); return false">

I think that would work, and then I can just put all the function calls in one spot... and if anything changes, I'm only changing the code in the button and that's it.

This assumes (and I'm not sure) that when I have the button do a form.submit(), it doesn't in turn try to execute the code in the onSumibt= of the FORM (that would kinda loop around infinitely).

Ugh, I've rewritten this about 3 times trying to make it clear and I'm still not sure it is.

Well, if you understood the question... go for it. If not, my apologies.

Darren
_Aerospace_Eng_
01-10-2006, 06:56 PM
I see what you are saying. You could make those other buttons submits but if you gave your submit buttons names it would pass those values as well. If no names were given then know values from those buttons would be submitted.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
function setAction(what){
document.forms[0].action=what+'.php';
alert(document.forms[0].action);
}
</script>
</head>

<body>
<form action="test.html" method="get">
<div>
<input type="submit" onclick="setAction('save')" /><br />
<input type="submit" onclick="setAction('next')" /><br />
<input type="submit" />
</div>
</form>
</body>
</html>
Jon Hanlon
01-10-2006, 08:54 PM
However, the buttons didn't seem to activate the form's onSubmit attribute. Is that normal behavior? Is there a better way to do this?


This is normal. For some reason submit() doesn't fire the onsubmit(). Never has, not since Netscape 4.

<form name=fred onsubmit="return validSubmit(this.form)">

<button onclick="if validSubmit(fred) fred.submit()">
Darren.T
01-11-2006, 01:16 PM
Ok... another, "is this normal behavior?"

This code works...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>

<body>

<form name="myform" method="POST" action="#" enctype="multipart/form-data" onsubmit="this.B1.click()">
<input name="F1" type="text">
<button type="button" name="B1" onclick="alert(F1.value); this.form.submit()">Next &gt;</button>
</form>

</body>
</html>

Enter something in the text field and press enter and you should get a pop up box that repeats the contents of the text field.

But if I just add another field, it fails. Here's the exact same code, with just one input field added...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>

<body>

<form name="myform" method="POST" action="#" enctype="multipart/form-data" onsubmit="this.B1.click()">
<input name="F1" type="text">
<input name="F2" type="text">
<button type="button" name="B1" onclick="alert(F1.value); this.form.submit()">Next &gt;</button>
</form>

</body>
</html>

If I enter something into the first text field and press enter, it just beeps at me.

On a hunch, I change the button type to "submit" and then it works.

So, until I know the nuances, I will have to make one button a type="submit". I just hope that by doing that, I don't bring in unwanted behavior. I've done searches for submit behavior, and I just haven't found a good site yet that details the behavior. Please pass on the link to a site if you know of a good one.

Darren