Проверка данных формы не работает при отсутствии кнопки отправки

Question

На данный момент это небольшой тестовый фрагмент Javascript, в котором вы вводите некоторые значения в форму, а затем вычисляете некоторые значения на их основе. Значения не считываются непосредственно из формы, а скорее из набора глобальных переменных, которые обновляются с помощью кнопки загрузки параметров.

Меня беспокоит (буквально) то, что в моей форме входной атрибут type="number"кажется игнорируется. Когда я добавляю кнопку отправки в конец формы (кнопка, которая мне не нужна), форма работает как положено - она ​​не позволяет мне вводить что-либо, кроме числовых символов. Однако, когда я удаляю эту кнопку отправки, кажется, что она не выполняет эту проверку ввода.

Есть идеи, почему?

var params = {
  a: 0,
  b: 0,
  c: 0
}

function parse_inputs() {
  document.forms["input_parameters"].submit();
  params["a"] = parseFloat(document.getElementById("input_parameters").a_in.value);
  params["b"] = parseFloat(document.getElementById("input_parameters").b_in.value);
  params["c"] = parseFloat(document.getElementById("input_parameters").c_in.value);
}

function write_params() {
  var text = ""
  for (var param in params) {
    text += params[param] + "<br>"
  }
  document.getElementById("demo").innerHTML = text;
}

function calc_sum() {
  var sum = 0
  for (var param in params) {
    sum += params[param]
  }
  document.getElementById("demo").innerHTML = sum;
}

<h2>CLT Calculator</h2>
<form id="input_parameters" autocomplete="off" novalidate="false">
  <fieldset>
    <legend>Input parameters</legend><br> a: <input type="number" step="0.1" name="a_in" placeholder="0" required><br> b: <input type="number" step="0.1" name="b_in" placeholder="0" required><br> c: <input type="number" step="0.1" name="c_in" placeholder="0"
      required><br><br>
  </fieldset>
</form>
<br>
<button onclick="parse_inputs()">Load params</button><br>
<button onclick="write_params()">Stored params</button><br>
<button onclick="calc_sum()">Calculate sum</button><br>
<p id="demo"></p>

Answer 1

Кажется, вам не нужно отправлять форму в первую очередь? Вы можете получить значения input без submit, используя существующий код. Как насчет этого?

var params = {
  a: 0,
  b: 0,
  c: 0
}

var output = document.getElementById("demo");

function parse_inputs() {
  params.a = parseFloat(document.getElementById("input_parameters").a_in.value);
  params.b = parseFloat(document.getElementById("input_parameters").b_in.value);
  params.c = parseFloat(document.getElementById("input_parameters").c_in.value);

  output.textContent = "Params loaded!";
}

function write_params() {
  var text = ""
  for (var param in params) {
    text += params[param] + "<br>"
  }
  output.innerHTML = text;
}

function calc_sum() {
  var sum = 0
  for (var param in params) {
    sum += params[param]
  }
  output.textContent = sum;
}

<h2>CLT Calculator</h2>
<form id="input_parameters">
  <fieldset>
    <legend>Input parameters</legend><br> a: <input type="number" step="0.1" name="a_in" placeholder="0" required><br> b: <input type="number" step="0.1" name="b_in" placeholder="0" required><br> c: <input type="number" step="0.1" name="c_in" placeholder="0"
      required><br><br>
  </fieldset>
</form>
<br>
<button onclick="parse_inputs()">Load params</button><br>
<button onclick="write_params()">Stored params</button><br>
<button onclick="calc_sum()">Calculate sum</button><br>
<p id="demo"></p>

Answer 2

Вы хотите использовать событие submit или warnDefault, если не используете его

Вы можете попробовать это

Я удалил novalidate, чтобы сделать поля обязательными для заполнения.

Я также удаляю отправку из parseinputs

var params = {
  a: 0,
  b: 0,
  c: 0
}

function parse_inputs() {
  params["a"] = parseFloat(document.getElementById("input_parameters").a_in.value);
  params["b"] = parseFloat(document.getElementById("input_parameters").b_in.value);
  params["c"] = parseFloat(document.getElementById("input_parameters").c_in.value);
}

function write_params() {
  var text = ""
  for (var param in params) {
    text += params[param] + "<br>"
  }
  document.getElementById("demo").innerHTML = text;
}

window.addEventListener("load", function() {
  document.getElementById("input_parameters").addEventListener("submit", function(e) {
    e.preventDefault();
    var sum = 0
    for (var param in params) {
      sum += params[param]
    }
    document.getElementById("demo").innerHTML = sum;
  });
});

<h2>CLT Calculator</h2>
<form id="input_parameters" autocomplete="off">
  <fieldset>
    <legend>Input parameters</legend><br> 
    a: <input type="number" step="0.1" name="a_in" placeholder="0" required><br> 
    b: <input type="number" step="0.1" name="b_in" placeholder="0" required><br> 
    c: <input type="number" step="0.1" name="c_in" placeholder="0" required><br><br>
  </fieldset>
  <br>
  <button type="button" onclick="parse_inputs()">Load params</button><br>
  <button type="button" onclick="write_params()">Stored params</button><br>
  <button type="submit">Calculate sum</button><br>
</form>

<p id="demo"></p>