HTML表单加按钮

Question

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

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

什么是最佳方法来做到这一点？

- AquaMorph

---

你写过任何JavaScript吗？也把那个发上来。 - Vincent Ramdhanie

Answer 1

将脚本标签放置在头部元素中。

<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()"/>

- Tom

Answer 2

从这里开始：

<input type="number">

如果你想在不支持 HTML 5 的浏览器中获得支持，那么就添加 a shim。

- Quentin

Answer 3

也许可以使用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,

--hennson

- hennson

Answer 4

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

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

这将增加字段中的值，当表单提交时，相关值将返回到服务器。'-'按钮需要相同的操作，但是减少值。您还可以添加一个检查，确保该值永远不会低于0或高于上限。

- Purpletoucan

Answer 5

使用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);
});

- TimDog

Answer 6

您可以使用一个只读文本输入框和JavaScript来通过两个按钮增加或减少输入字段的值。当达到所需值时，用户将按提交按钮以便将表单发送并保存到数据库中。

- kontur