Add (+/-) Button Number Incrementers using jQuery

Add (+/-) Button Number Incrementers using jQuery

A common use would be a "quantity" input on an eCommerce site. The plus and minus field value interaction is done using jQuery, Add (+/-) Button Number Incrementers using jQuery.

 HTML 

<form id='myform' method='POST' action='#'>
    <input type='button' value='-' class='qtyminus' field='quantity' />
    <input type='text' name='quantity' value='0' class='qty' />
    <input type='button' value='+' class='qtyplus' field='quantity' />

</form>


More information please visit this url https://www.papawebdesigner.com/



 CSS 

<style>
#myform {
    text-align: center;
    padding: 5px;
    border: 1px dotted #ccc;
    margin: 2%;
}
.qty {
    width: 40px;
    height: 25px;
    text-align: center;
}
input.qtyplus { width:25px; height:25px;}
input.qtyminus { width:25px; height:25px;}

</style>



 JS 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function(){
    $('.qtyplus').click(function(e){
        e.preventDefault();
        fieldName = $(this).attr('field');
        var currentVal = parseInt($('input[name='+fieldName+']').val());
        if (!isNaN(currentVal)) {
            $('input[name='+fieldName+']').val(currentVal + 1);
        } else {
            $('input[name='+fieldName+']').val(0);
        }
    });
    $(".qtyminus").click(function(e) {
        e.preventDefault();
        fieldName = $(this).attr('field');
        var currentVal = parseInt($('input[name='+fieldName+']').val());
        if (!isNaN(currentVal) && currentVal > 0) {
            $('input[name='+fieldName+']').val(currentVal - 1);
        } else {
            $('input[name='+fieldName+']').val(0);
        }
    });
});

</script>

Follow On Social Media -

Follow on Facebook   -  https://www.facebook.com/Front-End-Issue-487743404963344
Follow on instagram   -  https://www.instagram.com/frontendissue/  
Follow on Twitter       -  https://twitter.com/IssueEnd
Follow on Linkedin     -  https://www.linkedin.com/in/hitesh-patidar-34253a10a/ 
Follow on GooglePlus -  https://plus.google.com/118238268171156252992
Follow on pinterest    -  https://in.pinterest.com/frontendissue/