Member Avatar for shobha1335

Hi,

I have 3 radio buttons which are in the radio button group. On tab change it has to focus on next radio button. I have written a function to do that, but Its going from first to second radio button, after that again its coming back to first radio button and repeating the same.
Any one of you please help me in findingout on which radio button the focus is on presently...

Here is the function, conversion is radio button
function onTab(event) {
var str=document.getElementById("conver").value;
if(event.keyCode == 9 )
{
for(i =0;i<document.form1.conversion.length;i++){
if(str==i){
i=i+1;
document.form1.conversion.focus();
}
}
}
}

<c:forEach items="${QantasClubRenewViewBean.membershipQuoteList}" var="membershipQuote" varStatus="status">
<html-el:hidden property="hIndex" value="$(status.index)"/>
<html-el:radio property="renewPaymentSelected" onKeyUp="onTab(event)"/>


Thanks inadvance....

  • 4 Contributors
  • 6 Replies
  • 1K Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by essential
Member Avatar for DangerDev

<c:forEach items="${QantasClubRenewViewBean.membershipQuoteList}" var="membershipQuote" varStatus="status">
<html-el:hidden property="hIndex" value="$(status.index)"/>
<html-el:radio property="renewPaymentSelected" onKeyUp="onTab(event)"/>


Thanks inadvance....

is it html code or some other language code.
if possible please post html code for your radio button along with javaScript.

Please use code tag
Member Avatar for shobha1335

That is JSTL and struts,
ok please find the below code for html..

In jstl they have put this in for loop to display the list dynamically from java file.
depending on the list that many radio buttons will be displayed. so we have to focus on radio buttons one by one on every tab key hit.

<code>
<FORM NAME="form1">
<INPUT TYPE="radio" NAME="conversion" onKeyUp="onTab(event)">
</code>

Member Avatar for DangerDev

first problem i see is you have not defined a id property for radio button,
you can not get an element of name say "name1" by function GetElementById("name1").

Member Avatar for DangerDev

one more thing no two element can have same id.

now problem in logic:
just check

if(str==i){
i=i+1;

....isn't it should be in circle, i.e. after 2 again 0 should come, i am just giving a clue :)

Member Avatar for langsor

Hello,

Normally people use TAB to get between input elements on the page (location, window.focus, form input, etc ...) and then use the ARROW -> keys to move between input elements in a specific set, and with radio buttons they use the SPACE-BAR to select an element with current focus.

1. When no radio button is in focus, it TABS through the entire set.
2. If the first radio is selected it only TABS to the first radio button, and then you need to use ARROWS to navigate between the other radios.
3. If the second or third radio is selected it TABS to the first radio button in the set and then to the selected radio button, and then you need to use ARROWS to navigate ...

At least this is the behavior given to me by Firefox and IE browsers, you would have to test the other browsers to see if it's consistent.

I also can't seem to force specific behavior beyond the browsers natural tabbing system.

My advice is to enhance the existing functionality built in to the browser, instead of trying to rebuild it. First, it is easier; second, it works with what people are already familiar with ...

I was playing around with some radio button scripting here ... maybe something here will be useful to you?

<html>
<head>
<script type="text/javascript">

window.onload = function () {
  var inputs = document.getElementsByTagName('input');
  var output = document.getElementById('output');
  for ( var i = 0; i < inputs.length; i ++ ) {
    var input = inputs.item(i);
    if ( /group/.test( input.name ) ) {
      input.onchange = function () {
        if ( this.checked ) {
          //alert( this.value );
        }
      }
      input.onfocus = function () {
        this.parentNode.style.background = 'lightgreen';
        output.value = 'Use arrow keys to select different radio button';
      };
      input.onblur = function () {
        this.parentNode.style.background = '';
        output.value = '';
      };
    }
  }
};

</script>
</head>
<body>
  <input id="output" type="text" value="" style="width:300px;border:0;background:white;color:green;" readonly tabindex="-1" /><br />
  <label><input type="radio" name="group" value="one" tabindex="1" />One</label><br />
  <label><input type="radio" name="group" value="two" tabindex="2" />Two</label><br />
  <label><input type="radio" name="group" value="three" tabindex="3" />Three</label>
</body>
</html>

Good luck

Member Avatar for essential

Please feel free to modify this code to match your needs. If you have any question regarding this code you can document.write('Me on my inbox'). lol! Have a good day...

<!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=utf-8" />
<title>Some title</title>
<script type="text/javascript">
<!-- BEGIN HIDING

/* Tested and it's workin good! hope this would help you settle the focusing issue with your radio buttons. Enjoy coding...! */
  
var i = 0;
window.onkeyup = function() 
{
if ( event.keyCode == 9 ) { document.form1.conversion[i].focus(); ++i; }
i = ( i == document.form1.conversion.length ) ? 0 : i;
}  
// DONE HIDING-->
</script>
</head>
<body>
<form name="form1">
<label>Radio 1</label>&nbsp;<input type="radio" name="conversion" value="#" />
<label>Radio 2</label>&nbsp;<input type="radio" name="conversion" value="#" />
<label>Radio 3</label>&nbsp;<input type="radio" name="conversion" value="#" />
</form>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.