HTML Form Plus按钮

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

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

这样做的最佳方法是什么？

来源

2012-03-15 AquaMorph

你写过任何JavaScript了吗？张贴也是。 – 2012-03-15 13:51:22

把脚本标签在你的头上元素

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

来源

2012-03-15 13:53:16 Tom

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

来源

2012-03-15 13:52:13 kontur

开始：

<input type="number">

然后加入a shim，如果你想在浏览器的支持不支持HTML 5的一部分然而。

来源

2012-03-15 13:54:11 Quentin

使用JavaScript“喀嗒”事件添加到+按钮： -

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

这将增加价值的领域和形式提交时，相关的值返回给服务器。 ' - '按钮需要相同但减少的值。您也可以添加一个检查值，该值不会低于0或高于上限。

来源

2012-03-15 13:54:36 Purpletoucan

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

来源

2012-03-15 13:55:07 TimDog

也许像这样使用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

来源

2012-03-15 14:00:19 hennson

HTML Form Plus按钮

回答

相关问题