Как проверить значение текстового ввода, если есть несколько входов с одинаковым именем?

Question

У меня есть несколько текстовых вводов, которые, как только я нажимаю на submit, мой PHP-скрипт получает массив $ _POST ['length'].

<form method="POST" action="myscript.php">
<input type="text" name="length[]" value="" onInput='checkinput();'>
<input type="text" name="length[]" value="" onInput='checkinput();'>
<input type="text" name="length[]" value="" onInput='checkinput();'>
<input type="submit" value="Submit">
</form>

Я хочу использовать функцию Javascript, чтобы убедиться, чтопользователь вводит только цифры в каждое текстовое поле. Каждый раз, когда что-то вводится в одно из полей, выполняется функция checkinput (). Как сделать так, чтобы функция получала значение из правого поля, введенного пользователем, чтобы оно могло проверить это значение?

Редактировать: я хочу разрешить ввод цифр и десятичных дробей.

Answer 1

HTML5 имеет проверку только на номер, которая вам нужна. Просто введите type="number" в свои поля ввода вместо текста.

Что касается JS-части вопроса - checkInput() будет вызываться при вводе чего-либо в поля ввода.

Внутри него вы получите событие в качестве параметра, например, так:

function checkInput(e) {}

Вы можете получить значение ввода, используя ключевое слово this или объект события.

function checkInput(e) {
    const value = e.target.value;
    // check if value is a number
    // etc.
}

ОБНОВЛЕНИЕ:

Возможно, попробуйте атрибуты данных. Ваш HTML-код будет выглядеть следующим образом:

<form id="inputform">
  <input type="text" name="length[]" value="" data-number="1" />
  <input type="text" name="length[]" value="" data-number="2" />
  <input type="text" name="length[]" value="" data-number="3" />
  <input type="submit" value="Submit" />
</form>

И JavaScript будет выглядеть так:

var formElem = document.querySelector("#inputform");
formElem.addEventListener("input", checkInput);

function checkInput(e) {
  console.log(e.target.dataset.number);
  console.log(e.target.value);
}

Это даст вам 1, 2 или 3 в зависимости от того, какой ввод был изменен. Вы также можете получить значение, введенное пользователем, в e.target.value