当添加不同的值时，如何使用jQuery来添加分段的表单字段并进行更新？

Question

In my form i have sectioned form fields (section 1, 2 etc...) for each form field i add up the values and display the total in the final field of each section, however if a user enters say 5 and then removes it and enters 0, the 5 is still added in the final score and i am unsure of how to allow changes to values so that they get rid of the old value.

The current way is:

User adds value 5;
5 += final section field total;
User removes 5, instead puts 0;
final section field total = 5;

the code i am using is below

var form_inputs = document.getElementsByTagName("input");

$.each(form_inputs, function(i){
    if($(form_inputs[i]).attr("type") == "hidden"){ return false; }
        $(form_inputs[i]).attr("type", "number");
        $(form_inputs[i]).attr("required", "true");
        $(form_inputs[i]).change(function(){
            if(i === 0 || i < 6){

                if(check_valid_pt($(this).uniqueId(), $(this).val())){
                    addValues(attempt, parseInt($(this).val()), i);
                } else {
                    alert("Please only enter 0, 4 or 5");
                    $(this).val("");
                }

            } else if(i > 20 && i < 39){

                if(check_valid_sr($(this).uniqueId(), $(this).val())){
                    addValues(attempt, parseInt($(this).val()), i);
                } else {
                    alert("Please only enter 0 or 5");
                    $(this).val("");
                }

            } else if(i > 59 && i < 78){

                if(check_valid_wfr($(this).uniqueId(), $(this).val(), "")){
                    addValues(attempt, parseInt($(this).val()), i);
                } else {
                    alert("Please only enter 0 or 5");
                    $(this).val("");
                }

            } else if(i > 77 && i < 108){

                if(check_valid_wfr($(this).uniqueId(), "", $(this).val())){
                    addValues(attempt, parseInt($(this).val()), i);
                } else {
                    alert("Please only enter 0, 3 or 5");
                    $(this).val("");
                }

            } else if(i > 128 && i < 159){

                if(check_valid_er($(this).uniqueId(), $(this).val())){
                    addValues(attempt, parseInt($(this).val()), i);
                } else {
                    alert("Please only enter 0, 3 or 5");
                    $(this).val("");
                }

            }
        });
});

Answer 1

I believe you are looking for something like the below:

 $('.addMe').change(function () { $('.addMe').removeClass('hasError'); var ttl = 0; $('.addMe').each(function (i, e) { ttl = Number($(e).val()) + ttl; var validVals = $(this).data('valid-vals').split(','); if (validVals.length > 0 && $(this).val() != '' && $.inArray($(this).val(), validVals) === -1) { $(this).addClass('hasError'); $(this).val(validVals.join(', ') + ' only'); } }); $('#cost').html($('.hasError').length > 0 ? '' : ttl); }); $('.addMe').focus(function () { if ($(this).val().match(/only/i)) { $(this).val(''); $(this).removeClass('hasError'); } }); 

 .addMe { margin-bottom: 15px; } .hasError { border-style: solid; border-width: 1px; border-color: red; background-color: #FFCCCC; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="cost"></div> <br> <br> <input type="text" value="" class="addMe" data-valid-vals="0,4,5" />Only - 0, 4, 5 <br> <input type="text" value="" class="addMe" data-valid-vals="0,5" />Only - 0, 5 <br> <input type="text" value="" class="addMe" data-valid-vals="0,5" />Only - 0, 5 <br> <input type="text" value="" class="addMe" data-valid-vals="0,3,5" />Only - 0, 3, 5 <br> <input type="text" value="" class="addMe" data-valid-vals="0,3,5" />Only - 0, 3, 5 <br>