HTML Form Plus Button

HTML Form Plus Button

本文关键字：Button Plus Form HTML      更新时间：2023-09-26

我使用的是一个向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="+" />

最好的方法是什么？

将脚本标记放在头部元素中

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

开始于：

<input type="number">

如果你想在还不支持HTML5这一部分的浏览器中获得支持，那么就添加一个填充程序。

使用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

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

使用Javascript将"点击"事件添加到+按钮：-

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

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

使用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);
});
相关文章：