Populate next empty text input based on a button click

Question

I have a simple set of buttons that may be clicked in any order. When clicked the button should fill the next available text box.

So far I have only been able to make the button click populate the text box that is in focus. This only really fulfils half of my task.

At the moment I am only looking for vanilla JS solutions rather than JQuery if possible.

<body>
  <div class="buttons">
    <button class="btn" id="txt1" onclick="addText('txt1')">txt1</button>
    <button class="btn" id="txt2" onclick="addText('txt2')">txt2</button>
    <button class="btn" id="txt3" onclick="addText('txt3')">txt3</button>
    <button class="btn" id="txt3" onclick="addText('txt3')">txt3</button>
    <button class="btn" id="txt4" onclick="addText('txt4')">txt4</button>
    <button class="btn" id="txt5" onclick="addText('txt5')">txt5</button>
  </div>

  <div class="textBoxes">
    <input type="text" class="inputs" id="box1" placeholder="WPT 1" onfocus="field=this;" autofocus/>
    <input type="text" class="inputs" id="box2" placeholder="WPT 2" onfocus="field=this;"/>
    <input type="text" class="inputs" id="box3" placeholder="WPT 3" onfocus="field=this;"/>
    <input type="text" class="inputs" id="box4" placeholder="WPT 4" onfocus="field=this;"/>
    <input type="text" class="inputs" id="box5" placeholder="WPT 5" onfocus="field=this;"/>
  </div>

  <script>
    var field = 0;
    function addText(txt){
      if(field === 0) return false;
      field.value = txt;
    }
  </script>
</body>

At the moment you are _filling_ a field via script, you can determine what the next (empty) field would be. — CBroe, Jun 07 '22 at 13:05

Peter Seliger · Answer 1 · 2022-06-07T22:04:46.157

I have a simple set of buttons that may be clicked in any order. When clicked[,] the button should fill the next available [empty] text box.

I would choose kind of a custom component based approach, thus one implements code as generic as possible just once. Code-reuse will be possible pretty easy for same (even similar) tasks but with e.g. a different markup. One also can use/run more than just one component at each document.

The approach is build around the usage of data-* global attributes, attribute selectors and HTMLElement.dataset.

A component (source) root gets identified by its [data-prefill-values-for] attribute where its related dataset.prefillValuesFor value holds such a component's ID. The latter will be used for querying the component's related target root via `[data-prefill-targets-for="${ componentId }"]`.

The initialization of a component is done by subscribing a single handler which binds the component's target root to any 'click' event from within the root element (see ... event-delegation).

The handler itself retrieves from its bound target root the first available empty prefill-target which is done by querying for [data-prefill-target] and filtering the related elements each by its empty value. In addition, but only if an empty prefill-target exists, the handler retrieves from its event-target the to be set prefill-value which gets achieved by reading the event-target's dataset.prefillValue. In case all assignment criteria was fulfilled the assignment finally takes place.

function handlePrefillForBoundTarget(evt) {
  const targetRoot = this;
  const emptyPrefillTarget = Array
    .from(
      targetRoot
        .querySelectorAll('[data-prefill-target]')
    )
    .filter(elmNode =>
      (elmNode.value?.trim?.() ?? elmNode.value) === ''
    )[0];

  if (emptyPrefillTarget) {
    const prefillSource = evt
      .target
      .closest('[data-prefill-value]');

    const { prefillValue } = prefillSource.dataset;

    emptyPrefillTarget.value = prefillValue;
  }
}

function initPrefillComponent(sourceRoot) {
  const componentId = sourceRoot
    .dataset
    .prefillValuesFor ?? '';

  const targetRoot = document
    .querySelector(`[data-prefill-targets-for="${ componentId }"]`);

  if (targetRoot) {
    sourceRoot
      .addEventListener(
        'click',
        handlePrefillForBoundTarget
          .bind(targetRoot)
      );
  }
}

function main() {
  document
    .querySelectorAll('[data-prefill-values-for]')
    .forEach(initPrefillComponent);
}
main();

body { margin: 0; }
.textBoxes { margin: 8px 0 24px 0; }

<div class="buttons" data-prefill-values-for="1">
  <button data-prefill-value="foo bar">foo bar</button>
  <button data-prefill-value="baz biz">baz biz</button>
  <button data-prefill-value="the quick brown fox">the quick brown fox</button>
  <button data-prefill-value="jumps over">jumps over</button>
  <button data-prefill-value="the lazy dog">the lazy dog</button>
</div>
<div class="textBoxes" data-prefill-targets-for="1">
  <input type="text" placeholder="WPT 1" data-prefill-target autofocus />
  <input type="text" placeholder="WPT 2" data-prefill-target />
  <input type="text" placeholder="WPT 3" data-prefill-target />
  <input type="text" placeholder="WPT 4" data-prefill-target />
  <input type="text" placeholder="WPT 5" data-prefill-target />
</div>

<div class="buttons" data-prefill-values-for="2">
  <button data-prefill-value="Lorem ipsum">
    Lorem ipsum
  </button>
  <button data-prefill-value="dolor sit amet">
    dolor sit amet
  </button>
  <button data-prefill-value="consectetur adipiscing elit">
    consectetur adipiscing elit
  </button>
  <button data-prefill-value="sed do eiusmod tempor incididunt">
    sed do eiusmod tempor incididunt
  </button>
  <button data-prefill-value="ut labore et dolore magna aliqua">
    ut labore et dolore magna aliqua
  </button>
</div>
<div class="textBoxes" data-prefill-targets-for="2">
  <input type="text" placeholder="WPT 11" data-prefill-target value="foo" autofocus  />
  <input type="text" placeholder="WPT 12" data-prefill-target value="bar" />
  <input type="text" placeholder="WPT 13" data-prefill-target />
  <input type="text" placeholder="WPT 14" data-prefill-target value="baz" />
  <input type="text" placeholder="WPT 15" data-prefill-target />
</div>

AMunim · Accepted Answer · 2022-06-07T13:31:02.803

You can add a paramater to your function to update exact text box like this:

function addText(txt, fieldNumber) {
  var elems = document.getElementsByClassName("inputs");
  if (elems.length <= fieldNumber) return;
  elems[fieldNumber].value = txt;
}

and then call it like "addText('text', 3)"

Check this sandbox https://codesandbox.io/s/laughing-einstein-byhf0f?file=/src/index.js:299-472

If by "next available", you meant a field which doesn't already have a value then edit your function like this:

function addText(txt) {
  var elems = document.getElementsByClassName("inputs");
  console.log("111");
  console.log(elems);
  for (let i = 0; i < elems.length; i++) {
    if (elems[i] && !elems[i].value) {
      elems[i].value = txt;
      break;
    }
  }
}

For a demo check this sandbox: https://codesandbox.io/s/trusting-browser-lckvy0?file=/index.html

Populate next empty text input based on a button click

2 Answers2