Multiple autofocus on radio input select option

2
votes

I'm using a Twitter Bootstrap 3 form with (4) Radio form controls. When a user clicks on any of the four radio controls, an <input type="text"> appears. How do I make it, so that the first input, on any radio option select is "autofocus".

on radio select input field autofocus

To see code, if you may, please visit: https://von.host/cart.php?a=add&pid=20

It just seems silly to have the user click a radio button, than click again on the input field and type, than click once more on submit button...instead of three clicks, I wish to make it two.

p.s. - i added "autofocus" to all (4) input fields, but it only worked for the first one...of course ^ _ ^

2
javascripthtmlformstwitter-bootstrapautofocus
Please include your code here so far. - claudios
updated question to include code link - thanks for your attention to detail claudios and cool profile - BEER!! ^ _ ^ - Uncle Iroh

2 Answers

2
votes

Keep the autofocus attribute in the first one and use this jQuery code:

$('.domainoptions .option input:radio[name="domainoption"]').change(
  function(){
    $(this).parent().next().find('input[type="text"]').first().focus();
  }
);
3
votes

I think, you can this only with a little part of javascript :) for example:

$('input[type="radio"]').focus(function(){
    $(this).parent().find('input[type="text"]').focus();
});

In nutshell, this code pass the focus for the input field, when the radio give it.