Increment an input type numbers

Question

Hello I have a numbers type input in a form which is an amount, I've made two buttons one + and one - buttons to increase, decrease the amount, the problem is that in some cases the increment shalt not 1, but 2, 5, 15, etc ..

So I do this stuff:

my form:

<div id="ModalScan" class="modal fade" role="dialog">
 <div class="modal-dialog">
 <!-- Modal content-->
 <div class="modal-content">
 <div class="modal-header">
 Scannez les codes-barres à ajouter à la commande.
 </div>
 <div class="modal-body" style="height: 214px;">
 <br/>
 {{ form_start(scan_form, {'attr': {'id' : 'scan-reassort', 'class' : 'form-inline'}}) }}
 {{ form_label(scan_form.gencode) }}
 {{ form_errors(scan_form.gencode) }}
 {{ form_widget(scan_form.gencode, {'attr': {'onkeyup': 'showHint(this.value)'} }) }}
 <br><label>Designation : </label><span id="designationModal" style="padding-left: 20px;"></span><br>
 <br><label>Prix unitaire : </label><span id="prixModal" style="padding-left: 20px;"></span><br>
 <br><label>Colisage : </label><span id="colisageModal" style="padding-left: 40px;"></span><br>
 {{ form_label(scan_form.quantite) }}
 {{ form_errors(scan_form.quantite) }}
 {{ form_widget(scan_form.quantite, {'attr': {'min': '','value': ''}})}}
 &nbsp;<a href="#ajout" id="plus"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a>&nbsp;&nbsp;<a href="#moins" id="moins"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></a><br/><br/>
 {{ form_rest(scan_form) }}
 {{ form_end(scan_form) }}
 </div>
 <div class="modal-footer">
 <input type="submit" class="btn btn-menu" value="Valider">
 <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
 </div>
 </div>
 </div>
</div>

my js :

$(function(){
var input = document.getElementById('reassort_scan_quantite'),
 plus = document.getElementById('plus'),
 moins = document.getElementById('moins');
var colisage = Number(document.getElementById('reassort_scan_quantite').getAttribute('colisage'));
var miniCommande = Number(document.getElementById('reassort_scan_quantite').getAttribute('min'));
if(miniCommande === 1){
 plus.onclick=function(e){
 e.preventDefault();
 input.value++;
 }
 moins.onclick=function(e){
 e.preventDefault();
 if(input.value>1) input.value--;
 }
}
else{
 plus.onclick=function(e){
 value = parseInt(input.value);
 e.preventDefault();
 input.value = value + colisage;
 }
 moins.onclick=function(e){
 value = parseInt(input.value);
 e.preventDefault();
 if(input.value>miniCommande) input.value = value - colisage;
 }
}
});
function showHint(str) {
if (str.length == 13) {
 $.ajax({
 url: 'http://localhost/sf/web/extranet_dev.php/plateforme/reassort_scan/' + str,
 method: "POST",
 dataType: "json",
 success: function (json) {
 var nom = json.nom;
 var prix = json.prix;
 var colisage = json.colisage;
 var miniCommande = json.minicommande;
 document.getElementById("designationModal").innerHTML = nom;
 document.getElementById("prixModal").innerHTML = prix;
 document.getElementById("colisageModal").innerHTML = colisage;
 document.getElementById("reassort_scan_quantite").setAttribute("min", miniCommande);
 document.getElementById('reassort_scan_quantite').setAttribute("value", miniCommande);
 document.getElementById("reassort_scan_quantite").setAttribute("data-colisage", colisage);
 }
 });
}
}

i don't know why but this is not working at all, i've tried many things like :

$(function(){
var input = $('#reassort_scan_quantite');
var inputValue = parseInt(input.val());
var plus = $('#plus');
var moins = $('#moins');
var colisage = parseInt(input.attr("data-colisage"));
var min = parseInt(input.attr("min"));
var step = (min < 2) ? 1 : colisage;
var miniCommande = parseInt(input.attr('min'));
function addition(){
 if(miniCommande < 2){
 inputValue++;
 }
 else{
 inputValue = inputValue + colisage;
 }
 input.val(inputValue);
}
function soustraction(){
 if(input.val() > 1){
 if(miniCommande < 2){
 inputValue--;
 }
 else{
 inputValue = inputValue - colisage;
 }
 input.val(inputValue);
 }
}
$('#plus').click(function (e) {
 e.preventDefault();
 addition();
});
$('#moins').click(function(e){
 e.preventDefault();
 soustraction();
});
});

but still not working :/, is there someone could help me ?

Here is the thing i need, https://jsfiddle.net/2xt9yv6b/ but in my case values are set after the page load.

• epascarello: <input type="number" value="1" step="3" /> Modern browsers have it built in.
• jcubic: You need to call var inputValue = parseInt(input.val()); inside addition and soustraction
• epascarello: Your code reads the values/attributes when the page loads. If you update the values after the page loads, you will not get the new values. You would need to read the values inside of the method when the button is clicked to make sure you have the latest values.
• Fares El Williams: @epascarello how can i do it ?
• epascarello: Read the value and attributes inside the method...

Answer 1

I've found the answer thank you all.

$(function () {
 console.log("toto");
 function addition() {
 var input = $('#reassort_scan_quantite');
 var inputValue = parseInt(input.val());
 var colisage = parseInt(input.attr("data-colisage"));
 var min = parseInt(input.attr("min"));
 var miniCommande = parseInt(input.attr('min'));
 if (miniCommande === 1) {
 inputValue++;
 } else {
 inputValue = inputValue + colisage;
 }
 input.val(inputValue);
 }
 function soustraction() {
 var input = $('#reassort_scan_quantite');
 var inputValue = parseInt(input.val());
 var colisage = parseInt(input.attr("data-colisage"));
 var min = parseInt(input.attr("min"));
 var miniCommande = parseInt(input.attr('min'));
 if (input.val() > min) {
 if (miniCommande === 1) {
 inputValue--;
 } else {
 inputValue = inputValue - colisage;
 }
 input.val(inputValue);
 }
 }
 $('#plus').click(function (e) {
 e.preventDefault();
 addition();
 });
 $('#moins').click(function (e) {
 e.preventDefault();
 soustraction();
 });
});

• zer00ne: So...you want the console to print out the string "toto" not a number? So instead of 15 or 237 or whatever...you want the number "toto" (toto a number?!?)
• Fares El Williams: @zer00ne console.log is just a test so see when the script is executed.

Answer 2

You should be able to produce this functionality using the browser itself instead of doing the hard work yourself. For example:

<input type="number" min="0" max="30" value="0" step="5"></input>

You may not need to use some of these attributes, but I included them just in case

• JAAulde: This does not answer the actual question, and does not take into account the OP's desired UI/UX.
• Fares El Williams: This could work but i have to make it for Internet Explorer 9 too.
• Hugo Buff: I'm sorry to hear that :(

Answer 3

As I said in the comments, read the value/attributes inside your methods. Basic idea without the need of having to have two separate methods.

$("[data-dir]").on("click", function () {
 var dir = $(this).data("dir"),
 inp = $("#x"), 
 step = Number(inp.data("step")),
 min = Number(inp.data("min")),
 val = Number(inp.val());
 val = dir * step + val;
 if (val < min ) {
 val = min;
 }
 inp.val(val);
} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="x" type="text" data-min="2" value="2" data-step="2" />
<button data-dir="1">+</button>
<button data-dir="-1">-</button>