填写输入字段时如何增加计数器值？

Question

This is my laravel view code. Here,I am trying to increment the counter value(ie.,value="0/5") . I have the input fields inside the modal and when clicking on the save button which is inside the model, the value should get incremented based on the filled input fields.ie(1/5..2/5..)

I have tried to increment those counter value.But it displays NaN

 var val; $("input").click(function() { val = $('#counter').val(); val++; $('#counter').prop('value', val) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="panel-title pull-left"> <i class="fa fa-check-circle" style="font-size:20px;color:lightgreen"> </i> Price,stock and Shipping Information<input type="submit" id="counter" value="0/5" style="background-color: transparent; border:none"> </div> 

Answer 1

<script type="text/javascript">
    $("input").click(function() {
        let val = parseInt($('#counter').val().split('/')[0]);
        $('#counter').prop('value', `${++val}/5`);
    });
</script>

Answer 2

Actually your code is working fine. Since you have the view inside a modal, which is only displayed or shown on a click event, you should use the jQuery " on " method to enhance your click handler function definition. In that case you should have your code working

 var val; $(document).on('click','#counter',function() { val = $('#counter').val(); val++; $('#counter').prop('value',val ) }); 

  <div class="panel-title pull-left"> <i class="fa fa-check-circle" style="font-size:20px;color:lightgreen"> </i> Price,stock and Shipping Information<input type="submit" id="counter" **value="0/5"** style="background-color: transparent; border:none"> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

Answer 3

You can use regular expression to parse data before / character

var val;
$("input").click(function() {
  val = $('#counter').val();
  qty = val.match(/[^/]*/i)[0];
  qty++;
  $('#counter').prop('value', qty)
});

Answer 4

If you want to increase like this 1/5..2/5 .Use split and increase only upper value .

 var val; $("input").click(function() { val = $('#counter').val().split("/"); //check eqal value with base if(val[0] == val[1]) { return false; } val[0]++; $('#counter').prop('value', val[0]+"/"+val[1]); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="panel-title pull-left"> <i class="fa fa-check-circle" style="font-size:20px;color:lightgreen"> </i> Price,stock and Shipping Information<input type="submit" id="counter" value="0/5" style="background-color: transparent; border:none"> </div> 

Answer 5

You can also try this.

 $("#counter").on("click",function(){ var counterBtn = document.getElementById("counter"); var count = counterBtn.value; //alert(count.split("/")[0]); count = count.split("/"); counterBtn.value = ((parseInt(count[0])+1)%(parseInt(count[1])+1))+"/"+count[1]; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="panel-title pull-left"> <i class="fa fa-check-circle" style="font-size:20px;color:lightgreen"> </i> Price,stock and Shipping Information<input type="submit" id="counter" value="0/5" style="background-color: transparent; border:none"> </div> 

Answer 6

Here is your solution:

$("input").click(function() {
    var val = $('#counter').val();
    $('#counter').prop('value', `${++val % 6}/5`);
});

And a working fiddle:

https://jsfiddle.net/wv2x0mx5/4/