Ваш
const ele = document.querySelectorAll('input');
будет перебирать все входные данные, включая <input type="submit" name= "submit" id="submit" value="Submit"/>
.
Если вы не используете value="Submit"
, этот элемент не не имеет реального .value
, поэтому по умолчанию используется пустая строка:
console.log(submit.value);
console.log(submit.value.length);
<input type="submit" name="submit" id="submit">
Напротив, <input value="Submit"/>
будет иметь .value
из Submit
, который нельзя превратить в число.
Выберите только ваши входы с input
классами вместо:
function myFunction() {
const ele = document.querySelectorAll('input.input');
let sum = 0;
ele.forEach(input => {
sum += input.value ? parseFloat(input.value) : 0;
});
document.getElementById('result').textContent = sum.toFixed(2);
}
<form action="test.php" method="POST" enctype="multipart/form-data">
<input type="text" id="array[]" class="input" oninput="myFunction(this.value)">
<input type="text" id="array[]" class="input" oninput="myFunction(this.value)">
<p id="result"></p>
<br>
<p><input type="submit" name="submit" id="submit" value="Submit" /></p>
Также обратите внимание, что дубликаты ID недопустимы HTML, и обработчики событий должны быть правильно подключены с использованием Javascript вместо использования встроенных обработчиков:
const inputs = document.querySelectorAll('input.input');
inputs.forEach((input) => {
input.addEventListener('keydown', () => {
const sum = [...inputs].reduce((a, input) => a + Number(input.value), 0);
document.getElementById('result').textContent = sum.toFixed(2);
});
});
<form action="test.php" method="POST" enctype="multipart/form-data">
<input type="text" class="input">
<input type="text" class="input">
<p id="result"></p>
<br>
<p><input type="submit" value="Submit"></p>
</form>