javascript - ボタンがクリックされたときに、HTMLフォーム入力に数値をjavascript変数として保存するにはどうすればよいですか?

Question

基本的に私がやりたいことは、ユーザーが HTML フォームの入力フィールドに数字を入力して送信ボタンを押すと、その数字が JavaScript 変数に格納されることです。

<input type="number" min="1" name="number">

var number = ?

javascriptまたはjqueryでこれを行うにはどうすればよいですか?

ありがとうございました。

Answer 1

シンプルな JavaScript ソリューションは、これを行うことです。

var number = document.getElementById("number").value;

これにより、テキスト ボックスの値が「number」という名前で保存されます。JavaScript を知っていれば、それを使ってほとんどのことを行うことができます。お役に立てれば。

id="number"これを行うには、の代わりに、を使用する必要があることに注意してくださいname="number"。

完全なコードは次のようになります

<input type="number" id="number" onchange="save()">

これは、ユーザーが数値を入力するとすぐに、javascript ファイルでsave()関数が呼び出されることを意味します。

JavaScript

function save() {
      var number;
      number = document.getElementById("number").value;
      // Do whatever you want with the value here.
}

Answer 2

これは JavaScript ソリューションです。jQuery がブラウザーに組み込まれるまでは、これを使用してください (救世主として、そうなる可能性もあります) 。

<form id="form">
  <input id="number" type="number" min="1" name="number">
  <button>Submit</button>
</form>

var form = document.getElementById('form');
    number = document.getElementById('number');
form.onsubmit = function() {
   var variable = number.value;
   alert( variable );
};

送信ハンドラーを割り当てて、入力の値を取得するだけです。

ただし、変数を保存するためだけに jQuery をダウンロードしないでください。

Answer 3

ここにあなたのhtmlがあります、

<form id="form">
    <input type="number" min="1" name="number" />
    <input type="submit" value="submit">
</form>

jQueryを使用すると、これを行うことができます。

var number = 0;
var $form = $("#form");
var $input = $form.find("input[name=number]");

一部のイベントでは、入力の値を数値変数に追加できます。

$form.submit(function(e){

    e.preventDefault();
    number = +($input.val()); 

    /* 
        takes value from input when the form is submitted. 
        This will work even when you hit "enter" on your keyboard.
    */

});

要約すれば、

<form id="form">
    <input type="number" min="1" name="number" />
    <input type="submit" value="submit">
</form>

<script>

    var number = 0;
    var $form = $("#form");
    var $input = $form.find("input[name=number]");

    $form.submit(function(e){

        e.preventDefault();

        number = +($input.val()); 

        /* 
            takes value from input when the form is submitted. 
            This will work even when you hit "enter" on your keyboard.
        */

        alert(number);

    });

</script>

それが役立つことを願っています!