Wie wird der Zählerwert erhöht, wenn das Eingabefeld gefüllt ist?

Question

Dies ist mein laravel Ansichtscode. Hier versuche ich, den Zählerwert zu erhöhen (dh, Wert = "0/5"). Ich habe die Eingabefelder innerhalb des Modales und wenn ich auf die Speichern-Schaltfläche innerhalb des Modells klicke, sollte der Wert basierend auf den gefüllten Eingabefeldern erhöht werden.ie (1/5..2/5 ..)

ich habe versucht, diese Zähler zu erhöhen value.but es zeigt 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

Eigentlich Ihr Code funktioniert gut. Da Sie die Ansicht in einem Modal haben, das nur bei einem Klickereignis angezeigt oder angezeigt wird, sollten Sie die Methode jQuery "on" verwenden, um die Click-Handler-Funktionsdefinition zu verbessern. In diesem Fall sollten Sie Ihren Code haben Arbeits

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

Sie reguläre Ausdrücke Daten zu analysieren, bevor / Charakter

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

Answer 4

Wenn Sie diese 1/5..2/5 .Verwendung wollen erhöhen können split und nur den oberen Wert erhöhen.

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

Hier ist Ihre Lösung:

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

und eine Arbeits Geige:

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

Answer 6

Sie auch diese versuchen können.

$("#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>