Using Javascript, how to detect the value typed into a input box while it's being typed

Question

I have this problem to solve

In this form a user types in a value. (Actually, a scanner scans a number and virtually types it - without sending extra keys like Enter)

I need to contantly check - while typing is going on - if the value in the input box is a 8 digit number (starting with "4") and if it is, fire the submit action.

I tried to log any changes. But the code below only logs changes after I leave the input box.

<form action="#" onsubmit="return validateFormOnSubmit(this);">
    <input name="boarding_id" value="" width="600px" onChange="console.log(this.value);">
    <button type="submit" name="action" class="btn btn-primary" value="0">Scan</button>
</form>

Is there a Javascript way to pass the value of the box to a function whenever a single letter is typed?

Note: While the form displays a "scan" button, the goal is to have that button automatically clicked as soon as 8 digits have been entered and been declared valid by a validator function.

Answer 1

It is generally not a good idea to use inline event handlers.

Actually, a scanner scans a number and virtually types it

So, as far as I understand you want to show the result of some scanning function that inputs values and check the input value. Looks like there's not really a need for a change handler. Here's a minimal reproducable example for a dummy scanning function. It uses event delegation for handling the button click.

document.addEventListener(`click`, handle);

function scan(i = 0) {
  const inp = document.querySelector(`[name='boarding_id']`);
  const showIt = document.querySelector(`#showIt`);
  
  if (i < 1) {
    inp.value = 4;  
    i += 1;
  } else {
    const nr = 1 + Math.floor(Math.random() * 9);
    const currentValue = inp.value;
    inp.value += nr;
  }
  
  if (i < 8) {
    showIt.textContent = `Scanning ...`;
    return setTimeout( () => scan(i + 1), 100)
  }
  
  showIt.textContent = `Done!`;
  document.querySelector(`#scan`).removeAttribute(`disabled`);
}

function handle(evt)
{
  if (evt.target.id === `scan`) {
    evt.target.setAttribute(`disabled`, `disabled`);
    return scan();
  }
}

<input name="boarding_id" value="" width="600px" readonly> 
<span id="showIt"></span>
<p><button id="scan">Scan</button></p>

Answer 2

const input = document.querySelector('input');
const demo_variable = document.getElementById('demo_variable');

input.addEventListener('input', updateValue);

function updateValue(e) {
  demo_variable.textContent = e.target.value;
}
<form action="#" onsubmit="return validateFormOnSubmit(this);">
    <input name="boarding_id" value="" width="600px" >
    <button type="submit" name="action" class="btn btn-primary" value="0">Scan</button>
    <p id="demo_variable"></p>
</form>

Answer 3

You can use the input event, which also triggers when editing happens without the keyboard (mouse drag/drop, context menu, other device...).

Use a regular expression to do the verification. You can access the form via the form property of the input element:

<input name="boarding_id" oninput="/^4\d{7}$/.test(this.value) && this.form.submit()">

It is however better practice to bind events not with HTML attributes, but with JS code. For that purpose give the form element an id attribute (like id="frm"), and then:

const form = document.getElementById("frm");
form.boarding_id.addEventListener("input", (e) => /^4\d{7}$/.test(e.target.value) && form.submit());

Answer 4

You can achieve this in multiple ways. I have shown one below

function myFunction() {
  const userInput = document.getElementById("numberinput").value;
  document.getElementById("displaynumber").innerHTML = "You typed: " + userInput;
}

function submtValue(value) {
  const submitValue  =document.getElementById("numberinput").value; 
  if(submitValue.length === 8) {
  // do your validation
  alert("Bingo..!!")
  }
  else {
  alert("Minimum length required is 8")
  }

}

<input type="number" id="numberinput" oninput="myFunction()">
<p id="displaynumber"></p>

<button type="submit" value="Submit" onclick="submtValue()">Submit</button>

Answer 5

You can add key event like onkeydown or onkeypress on input which will trigger everytime type inside input and once condition fulfilled submit form