Кнопка 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

поместить тег сценария в головной элемент

<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 2

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

Answer 3

Пуск с:

<input type="number"> 

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

Answer 4

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

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

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

Answer 5

Использование 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 6

может быть что-то вроде этого с помощью 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="+" /> 

НТН,

--hennson