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;

这会将文本框的值保存在名称“数字”下。如果你知道 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>

希望有帮助！