Force Focusing on Sibling Input

Question

I'm currently working with a contact form plugin through Wordpress and so the outputted HTML and JS looks like the following:

$('.form .form--field label').click(function() {
  $(this).parents('.form--field').addClass('form--field--focus');
  $('input').filter(':first').focus();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form--field form--field__firstname">
  <label for="firstname" class="form--field__label">First Name</label>
  <span>
    <input type="text" name="firstname">
  </span>
</div>

The design has caused me to get a bit hacky with it but in any event, I'm trying to figure out how to force focus on the respective input whenever the user clicks on a label. At the moment, this is where I'm at with it. If anyone has any input or suggestions, that would be greatly appreciated.

Master Yoda · Accepted Answer · 2017-12-19T17:35:11.813

the for attribute on a <label> looks for an id not a name. Example below should work without JavaScript

<div class="form--field form--field__firstname">
  <label for="firstname" class="form--field__label">First Name</label>
  <span>
    <input type="text" id="firstname" name="firstname">
  </span>
</div>

Although if you really want to do this with JavaScript/JQuery and not be tied down to using a label you can do it this way using $(this).next().children().focus();

$('.form--field__label').click(function() {
    $(this).next().children().focus();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form--field form--field__firstname">
  <label class="form--field__label">First Name</label>
  <span>
    <input type="text">
  </span>
</div>

<div class="form--field form--field__secondname">
  <!-- using a span instead of label as an example !-->
  <span class="form--field__label">Second Name</span>
  <span>
    <input type="text">
  </span>
</div>

Ah! Thank you for that. For whatever reason I always assumed that the `for` on labels was associated to the `name`. Worked like a charm. — thelgloriouspast, Dec 19 '17 at 17:44

Faizan Anwer Ali Rupani · Answer 2 · 2017-12-19T17:42:49.730

set input id="firstname" because you want focus on label click. This is builtin feature in html.

    <input type="text" id="firstname" name="firstname">

More details here https://www.w3schools.com/tags/tag_label.asp

for multiple input you can use it like this

<form action="/action_page.php">
  <label for="male">Male</label>
  <input type="radio" name="gender" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="gender" id="female" value="female"><br>
  <label for="other">Other</label>
  <input type="radio" name="gender" id="other" value="other"><br><br>
  <input type="submit" value="Submit">
</form>

If you still persist you can use it like this

$('.form--field label').click(function() {

    //It will look next sibling which is span and then find input in it and then focus it
    //so it doesn't focus on other children elements
    $(this).next('span').find('input').focus();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form--field form--field__firstname">
  <label class="form--field__label">First Name</label>
  <span>
    <input type="text" name="firstname">
  </span>
  <br>
  <label class="form--field__label">Last Name</label>
  <span>
    <input type="text" name="lastname">
  </span>
</div>

Force Focusing on Sibling Input

2 Answers2

Linked