Reputation:

How to focus on input field after change radio?

I try to set the focus of an input field, after I have changed a radio button. The change action is fired, because the alert pops up is showing.But the focus is not set on the input field. What is wrong in my code?

Thanks for your help!

$("input[name=options]").change(function () {
  alert(this.value);
  document.getElementById("input1").focus();
});

<!doctype html>
<html lang="en">
  <head>
    <title>Hello, world!</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  </head>

  <body>
    <div class="container">
      <div class="row justify-content-center">
        <div class="btn-group" data-toggle="buttons">
          <label class="btn btn-primary active">
            <input type="radio" name="options" value="x1" id="option1" autocomplete="off" checked> Radio 1
          </label>
          <label class="btn btn-primary">
            <input type="radio" name="options" value="x2" id="option2" autocomplete="off"> Radio 2
          </label>
          <label class="btn btn-primary">
            <input type="radio" name="options" value="x3" id="option3" autocomplete="off"> Radio 3
          </label>
        </div>
      </div>
      <br>
      <div class="row justify-content-center">
        <form>
          <div class="input-group input-group-lg">
            <input type="number" class="form-control" id="input1" autocomplete="off">
            <span class="input-group-btn">
              <button type="submit" class="btn btn-primary btn-custom">
                Go!
              </button>
            </span>
          </div>	
        </form>
      </div> <!-- row -->
    </div>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

  </body>
</html>

Upvotes: 0

Answers (3)

Murat

Reputation: 21

This part must be asynchronous

$("input[name=options]").change(function () {
    setTimeout(function() { document.getElementById("input1").focus(); }, 0)
});

http://jsbin.com/tizexolemi/edit?html,js,output

Upvotes: 2

Chamidu Jayaruwan

Reputation: 357

Use following.

$("input[name=options]").change(function () {
    window.setTimeout(function () {
        document.getElementById("input1").focus();
    }, 0);
});

Increase timeout value from 0 to 50 or 100 if any browser didn't support

Also do not use alert. Alert will focus out you from the text box.

Upvotes: 2

Kuru

Reputation: 738

Try the following code. Changed event from change to focus. Because after the element's change event triggered it will get focused. So i guess the focus change back to the element you clicked.

$("input[name=options]").focus(function () {
  alert(this.value);
  document.getElementById("input1").focus();
});
document.getElementById("input1").focus();

<!doctype html>
<html lang="en">
  <head>
    <title>Hello, world!</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  </head>

  <body>
    <div class="container">
      <div class="row justify-content-center">
        <div class="btn-group" data-toggle="buttons">
          <label class="btn btn-primary active">
            <input type="radio" name="options" value="x1" id="option1" autocomplete="off" checked> Radio 1
          </label>
          <label class="btn btn-primary">
            <input type="radio" name="options" value="x2" id="option2" autocomplete="off"> Radio 2
          </label>
          <label class="btn btn-primary">
            <input type="radio" name="options" value="x3" id="option3" autocomplete="off"> Radio 3
          </label>
        </div>
      </div>
      <br>
      <div class="row justify-content-center">
        <form>
          <div class="input-group input-group-lg">
            <input type="number" class="form-control" id="input1" autocomplete="off">
            <span class="input-group-btn">
              <button type="submit" class="btn btn-primary btn-custom">
                Go!
              </button>
            </span>
          </div>	
        </form>
      </div> <!-- row -->
    </div>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

  </body>
</html>

Upvotes: 0

How to focus on input field after change radio?

Answers (3)

Related Questions