HTML 表单加号按钮答案

【问题标题】：HTML Form Plus ButtonHTML 表单加号按钮
【发布时间】：2012-04-01 00:56:59
【问题描述】：

我正在使用将数据提交到 MYSQL 数据库的 html 表单。我需要添加一个按钮，每次按下时都会将文本框中的数字增加一。我的代码如下所示：

<label for="htop">Top: </label>
<input type="button" name="decrease" value="-" /><input type="text" name="htop" value="0" />
<input type="button" name="increase" value="+" />

最好的方法是什么？

【问题讨论】：

你写过javascript吗？也发一下。

标签： javascript html forms button input

【解决方案1】：

也许像这样使用 jQuery...

$(document).ready( function() {
  var elm = $('#htop');
          function spin( vl ) {
            elm.val( parseInt( elm.val(), 10 ) + vl );
          }

          $('#increase').click( function() { spin( 1 );  } );
          $('#decrease').click( function() { spin( -1 ); } );
});

与

<label for="htop">Top: </label>
<input type="button" id="decrease" value="-" /><input type="text" id="htop" value="0" />
<input type="button" id="increase" value="+" />

HTH，

--汉森

【讨论】：

【解决方案2】：

使用 jQuery，这样的事情就可以了。

$("button[name=decrease]").click(function() {
   $("input[name=htop]").val(parseInt($("input[name=htop]").val()) - 1);
});

$("button[name=increase]").click(function() {
   $("input[name=htop]").val(parseInt($("input[name=htop]").val()) + 1);
});

【讨论】：

【解决方案3】：

使用 Javascript 向 + 按钮添加一个“点击”事件：-

<input type="button" name="increase" value="+" onclick='document.getElementById("htop").value = document.getElementById("htop").value + 1"' />

这将增加字段中的值，并且在提交表单时，将相关值返回给服务器。 '-' 按钮需要相同但减小值。您可能还希望添加一个检查，以确保该值也永远不会低于 0 或高于上限。

【讨论】：

【解决方案4】：

开始于：

<input type="number">

如果您想在尚不支持该部分 HTML 5 的浏览器中获得支持，请添加 a shim。

【讨论】：

【解决方案5】：

将脚本标签放在你的头部元素中

<script>
function increaseBtnOnclick() {
    document.getElementById("htop").value = Number(document.getElementById("htop").value) + 1;
}
</script>

<label for="htop">Top: </label>
<input type="button" name="decrease" value="-" /><input type="text" name="htop" value="0" id="htop"/>
<input type="button" name="increase" value="+" onclick="increaseBtnOnclick()"/>

【讨论】：

【解决方案6】：

您将使用一个带有数字的只读文本输入，并使用 javascript 通过 2 个按钮输入和减少输入字段的值。当达到所需的值时，用户将按下提交按钮以将表单发送并保存到数据库中。

【讨论】：