How to id a radio element (for a generic getVal() routine)?

[JSchwarz]

The question: In JavaScript, given the name of an HTML input element, how do I identify if it's a radio button (and then get the value)?

The goal: Create a generic function getVal(form-element) {}

I'm sick of using different code to get the value of each different type of form field. Worse, I have some fields on different forms which have the same name, but are different types of fields (that is, ProjID is a fill-in text field on one form, but a radio button or checkbox on another form), so I have to use different code for the same field on a different form.

So I am writing a generic function getVal(element).

So far, this has been pretty easy. Obtain an object reference to element (passed in as a string)fld = thisForm[element]
// ... working on code here to make sure I have an object reference ...
switch (fld.type) {
case "hidden":
case "text":
case "textarea":
return fld.value;
break;

case "select-one":
return fld.options[fld.selectedIndex].value;
break;

case "select-multiple":
case "checkbox":
alert("Lazy programmer alert: Did not implement getFieldVal for " + fld.type + " fields yet");
return;
break;

case "radio": (Radio buttons don't have a type property (this 'case' doesn't even work): how the heck do I identify them?)

default:
alert("Stupid programmer alert: Programmer has not heard of " + fld.type + " type fields");
return;
break;Thanks for your help,
Jeff

[Khalid Ali]

elementReference.type gives you the type of any html element

[JSchwarz]

Hi Khalid. Thanks for your answer (I was afraid noone was going to answer this simple -- I thought -- question).

Unfortunately, I think you are mistaken (or I have no idea what the heck I'm talking about -- which is a distinct possibility):

Radio buttons (at least the ones on my forms!) do not have a type property (that is why I posted the question). If I run the following code (which displays all of an objects properties, sorted), it does not show a 'type' property (I've attached pictures of the result).{
var obj=thisForm["LetterType"];
alert(obj);
var names=new Array();
var strnames="";
var i=0; var j=1;
for (prps in obj) {
names[i++] = prps + ':\t' + obj[prps];
} // for (prps in obj)
names.sort();
for (var i=0; i<names.length; i++) {
if (strnames.length + names[i].length > 1000) {
alert(strnames);
strnames="";
}
strnames += names[i] + "\n";
}
alert(strnames);
}

[JSchwarz]

If I change the first line of the above code tovar obj=thisForm["LetterType"][0]; then I get a type property. But by then it's too late; in other words, to examine ["LetterType"][0], I have to already know that LetterType is a radio button, but I want to determine if LetterType is a text field or a radio field.

Thanks.
Jeff

[Khalid Ali]

show me the html code..because if a radio button does not have type property ...its not a valid radio button tag.
And you might be using the images that simmulate the radio button...

[JSchwarz]

Attached is the HTML source, slightly edited.

Do a find on LetterType to find the radio button in question.

The HTML you'll find let's you choose between two different types of letters (Random or ICRD):<INPUT TYPE=radio NAME="LetterType" VALUE="At Random" onClick="
// We had to use the always annoying Refresh fields on keyword change (modified by instead calling _doClick here to prevent screen scroll) to support hiding
// and showing the correct messages in Navigator 4, which can not show and hide HTML elements. Could probably get this working use DynEl script from page 325
// of O'Reilly's JavaScript The Definitive Guide, 3rd Edition

_doClick('$Refresh', this, '_self')
">At Random<BR>

<INPUT TYPE=radio NAME="LetterType" VALUE="Initial Competitive Range Determination (ICRD)" onClick="
// We had to use the always annoying Refresh fields on keyword change (modified by instead calling _doClick here to prevent screen scroll) to support hiding
// and showing the correct messages in Navigator 4, which can not show and hide HTML elements. Could probably get this working use DynEl script from page 325
// of O'Reilly's JavaScript The Definitive Guide, 3rd Edition

_doClick('$Refresh', this, '_self')
">

[Khalid Ali]

Well for some reasons I am having hard time understanding your problem..here is what I could understand and made a solution for it.
http://68.145.35.86/temp/FindElementData.html

[JSchwarz]

First, I modified your example a bit to work in Netscape 4.7, to put all the elements on a single form (with unique names).

Second, you are determining the type of a radio button's OPTION object (which you already have a reference to), and you are doing it from the OPTION's onClick event.

I want to determine an object's TYPE (is it a radio button, a checkbox, a text field) based on it's name.

So, on my modified example, there are two radio buttons, both named 'r1' (so only one of them can be selected). There are other elements on the form (t1 is a textbox, c1 is a checkbox). If I pass a function the string "r1", I want the function to get the element for t1 like this (getElementById() doesn't work in Netscape 4):frm=document.forms[0];
el=frm[elName]; and then return object r1's type. In other words, alert(getType("r1")) would display "radio".

Here are the modifications to your example (which I can't attach for some reason):<html>
<head>
<script type="text/javascript">
<!--
function getType(elName) {
frm=document.forms[0];
el=frm[elName];
return el.type; //<--NOT WORKING FOR RADIO BUTTONS (or checkboxes).
}

function Process(el){
// var frm = document.getElementById(el.parentNode.id);
// var len = frm.length;
alert("Node name = "+el.nodeName+
"\nElement type = "+el.type+"\nElement name = "+el.name+"\nElement value= "+el.value)
}
//-->
</script>
</head>

<body onload="
alert('element t1 is a:\t' + getType('t1'));
alert('element c1 is a:\t' + getType('c1'));
alert('element r1 is a:\t' + getType('r1'));
">

<form id="form1" action="" onsubmit="">
<input type="text" name="t1" onclick="Process(this)"/>
<input type="radio" value="v1" name="r1" onclick="Process(this)"/>
<input type="radio" value="v2" name="r1" onclick="Process(this)"/>
<input type="text" name="t2" onclick="Process(this)"/><br/>
<input type="checkbox" name="c1" value="v1" onclick="Process(this)"/>
<input type="checkbox" name="c1" value="v2" onclick="Process(this)"/>
</form>
</body>
</html>

[Khalid Ali]

Add the following function replacing any with the same name you may already have

function getType(elName) {
frm=document.forms[0];
var el;
for(var x=0;x<frm.length;x++){
if(frm[x].name==elName){
el = frm[x];
break;
}
}
return el.type;
}

[JSchwarz]

Khalid, thanks, you got it! (whew!)

It works perfect.

Admittedly, it's not quite the sophisticated answer I expected from this forum, but it still works great!

Jeff

[JSchwarz]

Hi Khalid, are you still monitoring this thread? I hope so.

Here's the problem. I want to make getType() generic -- very generic -- such that if the parameter passed in is an actual reference type, it works, too.

Here is the function I created, adapted from your codefunction getType(elName) {
var el;

// In case elName is an object ref to a radio button (or other input type)
// instead of a string.
if (typeof elName != "string") elName = elName.name; <-- here's the problem

for (var x=0; x<thisForm.length; x++) {
if (thisForm[x].name == elName) {
el = thisForm[x];
break;
}
} // for (var x=0; x<frm.length; x++)

return el.type;
}

If you pass in a radio button object, there is no name property either .

Any idea how to work around this? Thanks,
Jeff