admin 管理员组

文章数量: 1086019

I am using an html form that submits data to a MYSQL database. I need to add a button that will increase the number in the text box by one every time pressed. My code looks like this:

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

What is the best way to do this?

I am using an html form that submits data to a MYSQL database. I need to add a button that will increase the number in the text box by one every time pressed. My code looks like this:

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

What is the best way to do this?

  • javascript
  • html
  • forms
  • button
  • input
Share Improve this question asked Mar 15, 2012 at 13:49 AquaMorphAquaMorph 5073 gold badges7 silver badges14 bronze badges 1
  • 2 Have you written any javascript yet? Post that too. – Vincent Ramdhanie Commented Mar 15, 2012 at 13:51
Add a ment  | 

6 Answers 6

Reset to default 1

put the script tag in your head element

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

Start with:

<input type="number">

Then add a shim if you want to have support in browsers that don't support that part of HTML 5 yet.

maybe something like this using 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 ); } );
});

with

<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

You would use one read only text input with the number, and javascript for in- and decreasing the value of the input field via 2 buttons. When the desired value is reached, the user would press a submit button for the form to be sent and saved into the database.

Using Javascript add a 'click' event to the + button:-

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

This will increase the value in the field and when the form is submitted, the relevant value is returned to the server. The '-' button needs the same but decreasing the value. You may also wish to add a check that the value never goes below 0 or above an upper limit too.

Using jQuery, something like this would work. 

$("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);
});

本文标签： javascriptHTML Form Plus ButtonStack Overflow

版权声明：本文标题：javascript - HTML Form Plus Button - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1744058745a2526329.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。