Focus is not a dynamic attribute for inputs?

Wappler General How To
7

Here is a simple example. You should be able to paste this into a new, empty page in Wappler and hopefully see what I mean. I’ve added a select which will set the first variable to a number. Clicking the button will then apply focus according to the selection made. You could have a thousand fields and no extra code would be required (except adding numbers to the select control, as used in this example).

<!doctype html>
<html><head>
  <base href="/">
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <script src="dmxAppConnect/dmxAppConnect.js"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="dmxAppConnect/dmxBootstrap4Navigation/dmxBootstrap4Navigation.js" defer=""></script>
  </head>
  <body is="dmx-app" id="test">
    <dmx-value id="var1" dmx-bind:value="2"></dmx-value>
    <dmx-value id="var2" dmx-bind:value="&quot;myform.input&quot; + var1.value + &quot;.focus()&quot;"></dmx-value>
    <main>
      <div class="container">
        <div class="row">
          <div class="col">
            <div class="container">
              <form id="myform">
                <div class="row">
                  <div class="col-12 col-md-8 col-lg-7 col-xl-5 text-left">
                    <div class="row">
                      <div class="col">
                        <h4>Dynamic, Dynamic Event</h4>
                        <p class="text-h3">Event to run onclick is stored in a variable, which in turn is dependent on another variable.<br></p>
                      </div>
                    </div>
                    <div class="row">
                      <div class="mt-4 col-3">
                        <select id="select1" class="form-control" dmx-on:updated="var1.setValue(value)">
                          <option value="1">1</option>
                          <option value="2">2</option>
                          <option value="3">3</option>
                        </select>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col mt-4">
                        <input type="text" id="input1" name="input1" class="form-control" placeholder="field 1">
                      </div>
                    </div>
                    <div class="row">
                      <div class="col mt-4">
                        <input type="text" id="input2" name="input2" class="form-control" placeholder="field 2">
                      </div>
                    </div>
                    <div class="row mt-4">
                      <div class="col">
                        <input type="text" id="input3" name="input3" class="form-control mb-4" placeholder="field 3">
                        <button class="btn btn-danger" dmx-on:click="var2.value">select field</button>
                        <p>var1: <b>{{var1.value}}</b></p>
                        <p>var2: <b>{{var2.value}}</b></p>
                      </div>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </main>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body></html>
3 Likes