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

R

Randell D.

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
 
V

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,this.value)">
<input type="text" name="textfield2"
onclick="complete_field(this.form.name,this.name,this.value)">
<input type="radio" name="radiobutton1" value="radiobutton"
onclick="complete_field(this.form.name,this.name,this.value)">
<input type="checkbox" name="checkbox1" value="checkbox"
onclick="complete_field(this.form.name,this.name,this.value)">
<select name="select1"
onclick="complete_field(this.form.name,this.name,this.value)">
<option value="1" selected>Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</form>
</body>
</html>
 
R

RobG

VK said:
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"?
Click to expand...

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>


[...]
 
R

Randell D.

VK said:
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,this.value)">
<input type="text" name="textfield2"
onclick="complete_field(this.form.name,this.name,this.value)">
<input type="radio" name="radiobutton1" value="radiobutton"
onclick="complete_field(this.form.name,this.name,this.value)">
<input type="checkbox" name="checkbox1" value="checkbox"
onclick="complete_field(this.form.name,this.name,this.value)">
<select name="select1"
onclick="complete_field(this.form.name,this.name,this.value)">
<option value="1" selected>Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</form>
</body>
</html>
Click to expand...

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
 
R

RobG

Randell said:
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
Click to expand...

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>
 
R

Randell D.

RobG said:
Randell said:
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
Click to expand...


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>
Click to expand...


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
 
V

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
Click to expand...
Oh, thank you. It's always good to know.

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

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.type);
}
}
 
R

RobG

Randell said:
RobG said:
Randell D. wrote:
Click to expand...
[...]

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:
Click to expand...

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...
Click to expand...

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!! :)
 
R

Randell D.

RobG said:
Randell said:
RobG said:
Randell D. wrote:
Click to expand...
[...]

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:
Click to expand...


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...
Click to expand...


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!! :)
Click to expand...


Thanks again!

randelld
 
V

VK

document.forms['ourTestForm'].­elements['four'];
will return a HTML collection of the radio elements.
Click to expand...

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

Matt Kruse

Randell said:
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.
Click to expand...

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.
 
R

RobG

VK said:
document.forms['ourTestForm'].­elements['four'];
will return a HTML collection of the radio elements.
Click to expand...


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

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.
 
R

Randell D.

Matt said:
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.
Click to expand...

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Why is this WordPress comments form not submitting? 1
Only one table shows up with the information 2
form with one input type TEXT 6
onload works in page A but not Page B 3
why js identify my input type for text box but not forcheckbox/radiobox 15
dynamic readOnly for type=text works, but not for checkbox 5
Syntax for resetting radio button to initial value? 14
checking and unckecking a checkbox 9

Members online

No members online now.
Total: 29 (members: 1, guests: 28)
Robots: 222

Forum statistics

Threads
473,756
Messages
2,569,540
Members
45,024
Latest member
ARDU_PROgrammER

Latest Threads

Top