0

I have three sets of forms on the same page and only one form is shown at a time. Other forms are hidden within the page and forms can be navigated through the next step button. I need to set the focus on the first input whenever each form is loaded.

How this could be achieved with jQuery?

JS Fiddle

  <div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="form-set">
        <form>
          <h4>
            Form Set 1
          </h4>
          <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" autofocus="autofocus">
            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
          </div>
          <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" id="exampleCheck1">
            <label class="form-check-label" for="exampleCheck1">Check me out</label>
          </div>
          <button type="submit" class="btn btn-primary next">Next Step</button>
        </form>

        <form class= "form-2" style="display:none">
          <h4>
            Form Set 2
          </h4>
          <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
          </div>
          <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" id="exampleCheck1">
            <label class="form-check-label" for="exampleCheck1">Check me out</label>
          </div>
          <button type="submit" class="btn btn-primary next">Next Step</button>
        </form>

        <form class= "form-3"  style="display:none">
          <h4>
            Form Set 3
          </h4>
          <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
          </div>
          <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" id="exampleCheck1">
            <label class="form-check-label" for="exampleCheck1">Check me out</label>
          </div>
          <button type="submit" class="btn btn-primary next">Next Step</button>
        </form>
      </div>
    </div>
  </div>
</div>
Rick Cannon
  • 139
  • 2
  • 2
  • 7
  • Possible duplicate of [How to Set Focus on Input Field using JQuery](https://stackoverflow.com/questions/6738760/how-to-set-focus-on-input-field-using-jquery) – rebecca Jul 17 '19 at 08:32
  • yes. and in the answer you find how to set the focus on an input. since you already managed to change and get the form with jquery i'd assume you'd figure out how to target that specific input – rebecca Jul 17 '19 at 08:42

2 Answers2

0

You could add something like this:

$(".form-set form:visible").find('input')[0].focus();

sidarcy
  • 2,958
  • 2
  • 36
  • 37
0

You can set every first input to "autofocus" in the HTML. When it unhides, it's selected automatically. (Note that this may not work in a Codepen/JSFiddle-Window, do test it stand-alone)

niorad
  • 1,330
  • 10
  • 14