Кнопка HTML Form Plus

Question

Я использую HTML-форму, которая передает данные в базу данных MYSQL. Мне нужно добавить кнопку, которая будет увеличивать число в текстовом поле на единицу при каждом нажатии. Мой код выглядит так:

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

Каков наилучший способ сделать это?

Answer 1

может быть что-то подобное, используя 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,

- Хеннсон

Answer 2

Начните с:

<input type="number">

Затем добавьте шим , если вы хотите иметь поддержку в браузерах, которые еще не поддерживают эту часть HTML 5.

Answer 3

поместите тег script в элемент head

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

Answer 4

Используя 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);
});

Answer 5

Используя Javascript, добавьте событие «click» к кнопке +: -

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

Это увеличит значение в поле, и при отправке формы соответствующее значение возвращается на сервер.Кнопка «-» нуждается в том же, но уменьшая значение.Вы также можете добавить проверку того, что значение никогда не опускается ниже 0 и не превышает верхнего предела.

Answer 6

Вы бы использовали один ввод текста только для чтения с номером и javascript для увеличения и уменьшения значения поля ввода с помощью 2 кнопок.Когда желаемое значение будет достигнуто, пользователь нажимает кнопку отправки для отправки формы и ее сохранения в базе данных.