tomoya kitatani
portfolio site

input type = “number”で表示されるスピンボタンのカスタマイズを行いました。

・数値として認識させること

・フロント側だけでなくvalueの値も反映させること

上記２点が最初うまく動作せず、次のように対応しました。

 

HTML

<div class=”quantity-box”>
<input type=”number” id=”quantity” name=”quantity” required=”required” min=”1″ maxlength=”9″ class=”form-control” value=”1″ />
<div class=”btn-plus”> </div>
<div class=”btn-minus”> </div>
</div>

 

jQuery

$(function() {
$(‘.btn-plus’).on(‘click’, function() {
var quantity = parseInt($(“#quantity”).val());
$(‘[name=”quantity”]’).attr(“value”, parseInt(quantity) + 1);
});
$(‘.btn-minus’).on(‘click’, function() {
var quantity = parseInt($(“#quantity”).val());
$(‘[name=”quantity”]’).attr(“value”, parseInt(quantity) – 1);
});
});

quantityが文字列として扱われていたのが原因でした。