数字を入力すると、送信ボタンを押さなくても自動で計算するサイトを作りたい

Question

html,css, phpを勉強している初心者です。素人な質問ですみません。

inputタグで入力ボックスと送信ボタンを作れば、入力を用いた画面表示をできると思います。
しかし、このやり方では、送信ボタンが必要で、かつそれを押さなければ処理が実行されない気がします。

できれば、入力ボックスに数字の入力が済んで時点で、自動でその値を使って計算を行い、その計算結果を同じ画面に表示するものを作りたいです。

つまり、

• 送信ボタンを押さず、入力が済めば自動で計算結果を画面に表示する
• この入力と出力は同一ページ内で行う

を行えるページを作りたいのですが、これはどのようなやり方でできるのでしょうか？
細部のプログラムは自分で作るので、その方法をご紹介いただけると幸いです。

よろしくお願いいたします。

Comments

[Zuishin]

キー入力があって数式が変更された時点で計算する、もしくは数式が変更されて一定時間変更がなかった時点で計算すればいいと思います。PHP ではできません。JavaScript が必要になります。

[raichu]

お返事ありがとうございます。PHPではできないのですね。
JavaScriptを勉強してみようと思います。

Answer 1

javascriptにはなってしまいますが、formの値を取得すればできると思います。

<form id="form">
  <input type='number' id='id1' />
  <input type='number' id='id2' />
  <input type='text' id='id3' />
</form>

const mainForm = document.querySelector('#form')
const id1 = document.querySelector('#id1')
const id2 = document.querySelector('#id2')
const id3 = document.querySelector('#id3')

mainForm.addEventListener('change', () => {
  const value1 = parseInt(id1.value, 10) || 0
  const value2 = parseInt(id2.value, 10) || 0
  id3.value = value1 + value2
});

Comments

[raichu]

ありがとうございます。自分でも確かめてみます。