выполнять операцию, только если флажок установлен с использованием выходного тега - PullRequest
Новая
       1

выполнять операцию, только если флажок установлен с использованием выходного тега

0 голосов
/ 25 февраля 2020

Я хотел бы использовать HTML5 для динамического завершения основ 1011 *. Это легко сделать с помощью тега вывода, как показано здесь: https://www.w3schools.com/tags/tag_output.asp

Мое требование включает флажок, который при проверке будет вычитать из a. Если флажок не установлен, b не будет вычитаться из a.

Когда я снимаю флажок, значение остается равным 1. Я понимаю, что после выполнения POST значение 1 не будет отправлено на сервер. Является ли единственный способ изменить значение на 0 на клиенте javascript или существует способ, который позволит мне использовать встроенный HTML5?

Я не нашел другого примера кода для вывода код, который включает использование значения флажка. 

<!DOCTYPE html>
<html>
<body>

<h1>The output element</h1>

<form oninput="x.value=parseInt(a.value)-(parseInt(b.value)*parseInt(s.value))">
<input type="checkbox" id="s" name="s" checked="checked" value="1">
0
<input type="range" id="a" value="50">100
-<input type="number" id="b" value="50">
=<output name="x" for="a b s"></output>
</form>


</body>
</html>

1 Ответ

0 голосов
/ 25 февраля 2020

Ваш флажок всегда будет иметь значение 1, независимо от того, установлен он или нет.

если при отправке формы флажок не установлен, то имя и значение этого флажка не будут передаваться

. Решение состоит в том, чтобы проверить, установлен ли флажок (верно) или нет ( false) 

const myForm = document.getElementById('my-form');

ComputeSum(); // on load...

myForm.oninput = ComputeSum;
  
function ComputeSum() {
  myForm.o.value= (myForm.s.checked)
                    ? myForm.a.valueAsNumber -myForm.b.valueAsNumber
                    : myForm.a.value
}
small { color: grey; }
<h1>The output element</h1>

<form action="" id="my-form">
    <input type="checkbox"  name="s" checked   >
  <small>0</small>
  <input type="range" name="a" value="50">
  <small>100</small>
  -
  <input type="number" name="b" value="50">
  =
  <output name="o"></output>
</form>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...