Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations wOOdy-Soft on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

bringing focus to radio button 1

Status
Not open for further replies.

TheConeHead

Programmer
Aug 14, 2002
2,106
US
How do you bring focus to a member of a radio family

....radioName.focus()

does not work...

[conehead]
 
The following little test page shows this working in Firefox without a problem. In IE you don't get the little dotted lines appearing around the radio button until you use the arrow keys to move the selected radio. It's not ideal... and unfortunately shows the differences between FF and IE in a rather obvious way.

Code:
<html>
<head>
<script type="text/javascript">
function test(choice) {
	var myFrm = document.forms[0];
	myFrm.myRadio[1].focus();
	if (choice) myFrm.myRadio[1].checked = 'checked';
}
</script>
</head>
<body>
<form action="">
<input type="radio" name="myRadio" id="myRadio1" value="1">1<br/>
<input type="radio" name="myRadio" id="myRadio2" value="2">2<br/>
<input type="radio" name="myRadio" id="myRadio3" value="3">3<br/>
</form>
<a href="javascript:test()">Test Focus</a><br/>
<a href="javascript:test('select')">Test Select</a><br/>
</body>
</html>
Hope that helps,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch
[/tt]

What is Javascript? faq216-6094
 
Hey guys?
What if you wanted to pass the name of the radio button group to the function instead of having it hard coded?
Or can you even pass the name and position in a single string like "myradio[0]"

I have a function that sets focus to a specified field name passed into the function, I would like it to handle all field types in the same function.
I have not been able to get it working using the passed in value as the name of the field for radio buttons or checkboxes but it works fine with other field types.
I am sure it is just a syntax issue.

function setmyfocus(which) {
var myFrm = document.forms[0];
myFrm.which[1].focus();
}

How would the name in red be altered to use the passed in value?

Paranoid? ME?? WHO WANTS TO KNOW????
 
You could do this:

Code:
function setmyfocus(which, index) {
	var myFrm = document.forms[0];
	if (index) {
		myFrm.elements[which][index].focus();
	} else {
		myFrm.elements[which].focus();
	}
}

And then only pass a second parameter if you need to (for radio buttons and checkboxes).

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
theniteowl, you're looking for the elements collection I believe:
Code:
myFrm.[COLOR=red][b]elements[[/b][/color]which[COLOR=red][b]][/b][/color][1].focus();

-kaht

How much you wanna make a bet I can throw a football over them mountains?
sheepico.jpg
images
 
Hmm, any way to keep the name and array position in the same string without having to parse it out and test it?

Just trying to keep it all in the same function.
Modifying the app to pass an additional parameter could get messy because of the nature of how it is called. The function is the result of another function and the parameters are not passed in directly so writing it to use additional parameters is more complex.
Also, if I could use a single string then I do not have to distinguish between radio/checkbox fields and input/textarea/select fields for the line to use setting the focus.
I could just always say that the focus goes to the first radio button in a collection but then I am hardcoding the [0] into the line when I might be doing other types of fields.

I know, there are plenty of ways to work around this. I was just hoping there was a syntax that allowed me to do something like this:
var myfield = "myradio[0]"
OR
var myfield = "myinput"
myfield.focus();
without having to pass extra parameters or do a lot of testing on the value for the field name to break things out.


Paranoid? ME?? WHO WANTS TO KNOW????
 
I got it, at least partially.
Code:
function setfieldfocus(focusto, type) {
  if (type == "radio")
    whichform.elements[focusto][0].focus();
  else
    whichform.elements[focusto].focus();
}

whichform is already a reference to the form object object globally declared so I did not need to duplicate.

It was easy for me to pass in the field type because I was already using the DOM to iterate through the form fields.
This leaves me with the dilema that I have to hardcode that it will set focus to the first radio button in that collection but for my purposes it would never need to be otherwise.
This code does not take into account any other non-radio fields that are named the same however.

I tried testing with myform.elements[focusto].length to see if there was more than one object in the collection but that backfires if the field is a select box.

I guess I could use length and if it comes out false it is not a set of same named fields and if it comes out true then check if the type is select. But what would happen if you had two select boxes with the same name?


Paranoid? ME?? WHO WANTS TO KNOW????
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top