By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,701 Members | 2,006 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,701 IT Pros & Developers. It's quick & easy.

Checking a form input tag type works only for type text... not others...why?

P: n/a

Folks,

I have a form called "ourTestForm".

Its a test form - nothing special - it contains five input tags - they
are named one, two, three, four and five.

The input tags are of type text,text,radio,checkbox and select.

When I run the following code, it correctly reports "text" (for input
tag named "one") but it reports (alerts) input tag four as being
"undefined". The same happens for any input tag that is not of type "text".

How come? How can I fix it?

<script language="JavaScript" type="text/javascript">
function complete_field(form_name,field_name,field_value)
{
var form_name_obj=document.forms[form_name];
var field_type=form_name_obj.elements[field_name].type;
alert(field_type);
return true;
}

complete_field("ourTestForm","one","whatever");
complete_field("ourTestForm","four","whatever");
</script>
All help via the newsgroup please, so all can learn... thanks,

randelld
Jul 23 '05 #1
Share this Question
Share on Google+
12 Replies


P: n/a
VK
The code below works as you need.

A mistery: type of select ("select1") reported as "select-one" in both
FF in IE. What does it mean and where would be the "select-two"?
<html>
<head>
<title>Elements' test</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<script type="text/javascript">
function complete_field(form_name,field_name,field_value) {
var form_name_obj = document.forms[form_name];
var field_type=form_name_obj.elements[field_name].type;
alert(field_type);
}
</script>
</head>

<body bgcolor="#FFFFFF">
<form name="">
<input type="text" name="textfield1"
onclick="complete_field(this.form.name,this.name,t his.value)">
<input type="text" name="textfield2"
onclick="complete_field(this.form.name,this.name,t his.value)">
<input type="radio" name="radiobutton1" value="radiobutton"
onclick="complete_field(this.form.name,this.name,t his.value)">
<input type="checkbox" name="checkbox1" value="checkbox"
onclick="complete_field(this.form.name,this.name,t his.value)">
<select name="select1"
onclick="complete_field(this.form.name,this.name,t his.value)">
<option value="1" selected>Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</form>
</body>
</html>

Jul 23 '05 #2

P: n/a
VK wrote:
The code below works as you need.

A mistery: type of select ("select1") reported as "select-one" in both
FF in IE. What does it mean and where would be the "select-two"?
<html>
<head>
<title>Elements' test</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<script type="text/javascript">
function complete_field(form_name,field_name,field_value) {
var form_name_obj = document.forms[form_name];
var field_type=form_name_obj.elements[field_name].type;
alert(field_type);
}
</script>
</head>

<body bgcolor="#FFFFFF">
<form name="">
<input type="text" name="textfield1"
onclick="complete_field(this.form.name,this.name,t his.value)">
<input type="text" name="textfield2"
onclick="complete_field(this.form.name,this.name,t his.value)">
<input type="radio" name="radiobutton1" value="radiobutton"
onclick="complete_field(this.form.name,this.name,t his.value)">
<input type="checkbox" name="checkbox1" value="checkbox"
onclick="complete_field(this.form.name,this.name,t his.value)">
<select name="select1"
onclick="complete_field(this.form.name,this.name,t his.value)">
<option value="1" selected>Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</form>
</body>
</html>


Thanks for that - and thanks for the prompt reply... but it doesn't get
me to where I want to go... let me explain...

I am working on an idea whereby data restored from my dbserver is
written to the form. I want to create a dynamic function whereby I can
just call it to write the value to the input tag and where the function
sets the value correctly regardless of its type.

Thus - When I call complete_field, I will tell it the form name and form
field name (input tag name) and a value. Then, then function checks the
input tag type and uses this to decide on best to set the value.

Thus, your onClick solution would be great if the operator was to click
on the field/box - but this will not be the case.

Interestingly, I have found the following code correctly identify's the
input tag type...

var counter=0;
for(counter=0; counter<form_name.length; counter++)
{
alert(form_name.elements[counter].type);
}
All help is greatly appreciated, and thanks for the prompt reply...

randelld
Jul 23 '05 #3

P: n/a
VK wrote:
The code below works as you need.

A mistery: type of select ("select1") reported as "select-one" in both
FF in IE. What does it mean and where would be the "select-two"?


No mystery, the select element's type attribute was defined in DOM 1:

type of type DOMString , readonly
The type of this form control. This is the string "select-multiple"
when the multiple attribute is true and the string "select-one" when
false

<URL:http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/level-one-html.html#ID-822762427>
[...]
--
Rob
Jul 23 '05 #4

P: n/a
Randell D. wrote:

Folks,

I have a form called "ourTestForm".

Its a test form - nothing special - it contains five input tags - they
are named one, two, three, four and five.

The input tags are of type text,text,radio,checkbox and select.

When I run the following code, it correctly reports "text" (for input
tag named "one") but it reports (alerts) input tag four as being
"undefined". The same happens for any input tag that is not of type
"text".

How come? How can I fix it?

<script language="JavaScript" type="text/javascript">
function complete_field(form_name,field_name,field_value)
{
var form_name_obj=document.forms[form_name];
var field_type=form_name_obj.elements[field_name].type;
alert(field_type);
return true;
}

complete_field("ourTestForm","one","whatever");
complete_field("ourTestForm","four","whatever");
</script>
All help via the newsgroup please, so all can learn... thanks,

randelld


Yes, a mystery. You must have somethign wrong with your HTML - of
course you should never have just one radio button.

One radio of a group must always be selected, so if you only have one,
then it should always be selected (though most browsers don't enforce
it). You can't 'uncheck' a solo radio unless you re-load the page or
use a reset and clear the entire form).

Try the following:
<form action="" name="ourTestForm">
<input type="text" name="one" value="text one"><br>
<input type="text" name="two" value="text two"><br>
<input type="radio" name="three" value="text three">three<br>
<input type="checkbox" name="four" value="text four">four<br>
<select name="five">
<option value="opt0">opt 0</option>
<option value="opt1">opt 1</option>
<option value="opt2">opt 2</option>
</select><br>
<input type="button" onclick="alert(this.form.four.type);"
value="click me..."><br>
<input type="button" value="click me 2" onclick="
complete_field('ourTestForm','four','whatever');
"><br>
<input type="reset">

</form>
<script type="text/javascript">

function complete_field(form_name,field_name,field_value)
{
var form_name_obj=document.forms[form_name];
var field_type=form_name_obj.elements[field_name].type;
alert(field_type);
return true;
}

complete_field("ourTestForm","one","whatever");
complete_field("ourTestForm","four","whatever");
</script>

--
Rob
Jul 23 '05 #5

P: n/a
RobG wrote:
Randell D. wrote:

Folks,

I have a form called "ourTestForm".

Its a test form - nothing special - it contains five input tags - they
are named one, two, three, four and five.

The input tags are of type text,text,radio,checkbox and select.

When I run the following code, it correctly reports "text" (for input
tag named "one") but it reports (alerts) input tag four as being
"undefined". The same happens for any input tag that is not of type
"text".

How come? How can I fix it?

<script language="JavaScript" type="text/javascript">
function complete_field(form_name,field_name,field_value)
{
var form_name_obj=document.forms[form_name];
var field_type=form_name_obj.elements[field_name].type;
alert(field_type);
return true;
}

complete_field("ourTestForm","one","whatever");
complete_field("ourTestForm","four","whatever");
</script>
All help via the newsgroup please, so all can learn... thanks,

randelld

Yes, a mystery. You must have somethign wrong with your HTML - of
course you should never have just one radio button.

One radio of a group must always be selected, so if you only have one,
then it should always be selected (though most browsers don't enforce
it). You can't 'uncheck' a solo radio unless you re-load the page or
use a reset and clear the entire form).

Try the following:
<form action="" name="ourTestForm">
<input type="text" name="one" value="text one"><br>
<input type="text" name="two" value="text two"><br>
<input type="radio" name="three" value="text three">three<br>
<input type="checkbox" name="four" value="text four">four<br>
<select name="five">
<option value="opt0">opt 0</option>
<option value="opt1">opt 1</option>
<option value="opt2">opt 2</option>
</select><br>
<input type="button" onclick="alert(this.form.four.type);"
value="click me..."><br>
<input type="button" value="click me 2" onclick="
complete_field('ourTestForm','four','whatever');
"><br>
<input type="reset">

</form>
<script type="text/javascript">

function complete_field(form_name,field_name,field_value)
{
var form_name_obj=document.forms[form_name];
var field_type=form_name_obj.elements[field_name].type;
alert(field_type);
return true;
}

complete_field("ourTestForm","one","whatever");
complete_field("ourTestForm","four","whatever");
</script>

Hi,

Its interesting - your solution above worked exactly the way I want mine
to work - however I cannot find where I went wrong... I'm using
Dreamweaver MX and Moxilla 1.7.5 so I would expect the HTML syntax to be
correct... for reference, I've copy/pasted it below:

<form name="ourTestForm" method="post" action="">
<table border="1" align="center" cellpadding="1" cellspacing="1">
<tr>
<td width="20">&nbsp;</td>
<td><input name="one" type="text" id="one"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input name="two" type="text" id="two"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input name="three" type="checkbox" id="three" value="alpha"> one

<input name="three" type="checkbox" id="three" value="bravo" checked>two
<input name="three" type="checkbox" id="three" value="charlie">three

</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="radio" name="four" value="alpha"> one
<input name="four" type="radio" value="bravo" checked> two
<input type="radio" name="four" value="charlie"> three
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><select name="five" size="2" id="five">
<option value="a">alpha</option>
<option value="b" selected>bravo</option>
<option value="c">charlie</option>
<option value="d">delta</option>
</select></td>
</tr>
</table>
</form>

<script language="JavaScript" type="text/javascript">
function complete_field(form_name,field_name,field_value)
{
var form_name_obj=document.forms[form_name];
var field_type=form_name_obj.elements[field_name].type;
alert(field_type);
return true;
}

complete_field("ourTestForm","one","randell");
complete_field("ourTestForm","four","randell");
</script>
Can you see where I might have gone wrong? The javascript console with
mozilla does not report errors, yet field types three, four and five are
alerted as undefined... I've compared your solution to mine - yours
works - mine fails - and I can't really see where the difference is...

Can you?

Thanks for the prompt reply...

randelld
Jul 23 '05 #6

P: n/a
VK
> No mystery, the select element's type attribute was defined in DOM 1:
The type of this form control. This is the string "select-multiple"
when the multiple attribute is true and the string "select-one" when
false Oh, thank you. It's always good to know.

yet field types three, four and five are alerted as undefined...


Yep! And even more interestingly that if you do it as all good boys
should always do: ;-)
alert(document.forms[0].elements[3].type);
it works as a charme.

There are a lot of people out here to explain you that there are not
neither hash nor array in JavaScript and that there is not any
difference whether your're addressing a hash table value or an array
element.

While they are doing it, you may bring you script into the conventional
form:

function restoreFormValues (formName) {
var formRef = document.forms.formName;
var len = formRef.elements.length;
for (i=0; i<len; i++) {
// Some useful code. Now just:
alert(formRef.elements[i].type);
}
}

Jul 23 '05 #7

P: n/a
Randell D. wrote:
RobG wrote:
Randell D. wrote:
[...]
Hi,

Its interesting - your solution above worked exactly the way I want mine
to work - however I cannot find where I went wrong... I'm using
Dreamweaver MX and Moxilla 1.7.5 so I would expect the HTML syntax to be
correct... for reference, I've copy/pasted it below:
In your original post, 'four' was a checkbox, which has a type of
'checkbox'. In the code below, it's a radio group, so:

document.forms['ourTestForm'].elements['four'];

will return a HTML collection of the radio elements. Furthermore, you
have given all your checkboxes the same name and id, which will cause
further problems (particularly the multiple ids, which are not valid
HTML).

[...] <td><input name="three" type="checkbox" id="three" value="alpha"> one

<input name="three" type="checkbox" id="three" value="bravo" checked>two
<input name="three" type="checkbox" id="three" value="charlie">three
[...]
Can you see where I might have gone wrong? The javascript console with
mozilla does not report errors, yet field types three, four and five are
alerted as undefined... I've compared your solution to mine - yours
works - mine fails - and I can't really see where the difference is...


The JavaScript console only reports JavaScript errors, not HTML
errors. You have to work it out (sometimes it ain't obvious!!).

Run your page through the W3 HTML validator, you'd be surprised what
it turns up (and note that the code that Dreamweaver /et al/ produces
is not highly regarded).

<URL:http://validator.w3.org/>

If you are trying to serialise form elements, you better go to the W3
and thoroughly understand form elements and their attributes as well
as the DOM and how the two relate to JavaScript (hey, there's a lot to
learn).

Have fun!! :-)

--
Rob
Jul 23 '05 #8

P: n/a
RobG wrote:
Randell D. wrote:
RobG wrote:
Randell D. wrote:


[...]
Hi,

Its interesting - your solution above worked exactly the way I want
mine to work - however I cannot find where I went wrong... I'm using
Dreamweaver MX and Moxilla 1.7.5 so I would expect the HTML syntax to
be correct... for reference, I've copy/pasted it below:

In your original post, 'four' was a checkbox, which has a type of
'checkbox'. In the code below, it's a radio group, so:

document.forms['ourTestForm'].elements['four'];

will return a HTML collection of the radio elements. Furthermore, you
have given all your checkboxes the same name and id, which will cause
further problems (particularly the multiple ids, which are not valid HTML).

[...]
<td><input name="three" type="checkbox" id="three" value="alpha"> one

<input name="three" type="checkbox" id="three" value="bravo"
checked>two <input name="three" type="checkbox" id="three"
value="charlie">three

[...]

Can you see where I might have gone wrong? The javascript console
with mozilla does not report errors, yet field types three, four and
five are alerted as undefined... I've compared your solution to mine -
yours works - mine fails - and I can't really see where the difference
is...

The JavaScript console only reports JavaScript errors, not HTML errors.
You have to work it out (sometimes it ain't obvious!!).

Run your page through the W3 HTML validator, you'd be surprised what it
turns up (and note that the code that Dreamweaver /et al/ produces is
not highly regarded).

<URL:http://validator.w3.org/>

If you are trying to serialise form elements, you better go to the W3
and thoroughly understand form elements and their attributes as well as
the DOM and how the two relate to JavaScript (hey, there's a lot to learn).

Have fun!! :-)

Thanks again!

randelld
Jul 23 '05 #9

P: n/a
VK
> document.forms['ourTestForm'].*elements['four'];
will return a HTML collection of the radio elements.


And document.forms.ourTestForm.elements[3] will return the needed
object reference from the "elements" array. This is what OP was looking
for.

Jul 23 '05 #10

P: n/a
Randell D. wrote:
I want to create a dynamic function whereby I
can just call it to write the value to the input tag and where the
function sets the value correctly regardless of its type.


You might want to check out my "setInputValue" function at:
http://www.javascripttoolbox.com/validations/

It does exactly what you're looking for, which might be a bit more complex
than you're thinking it is.

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com
Jul 23 '05 #11

P: n/a
VK wrote:
document.forms['ourTestForm'].*elements['four'];
will return a HTML collection of the radio elements.

And document.forms.ourTestForm.elements[3] will return the needed
object reference from the "elements" array. This is what OP was looking
for.


Yeah, it returns an object, not a collection (guess I was confused
with getElementsByTagName). It makes little practical difference in
this case but it is an important distinction.

--
Rob

Jul 23 '05 #12

P: n/a
Matt Kruse wrote:
Randell D. wrote:
I want to create a dynamic function whereby I
can just call it to write the value to the input tag and where the
function sets the value correctly regardless of its type.

You might want to check out my "setInputValue" function at:
http://www.javascripttoolbox.com/validations/

It does exactly what you're looking for, which might be a bit more complex
than you're thinking it is.


Howye,

I just noticed your post and... Yeah.... your setInputValue is exactly
what I wanted to create - I'll examine it closely - I wanted the
function for a specific purpose but I had also set it as a technical
goal for myself to help push my javascript knowledge/skills to a new
level...

Thanks for the help,
randelld
Jul 23 '05 #13

This discussion thread is closed

Replies have been disabled for this discussion.