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按鈕

回答

相關問題