创建可与多个重复类和ID一起使用的可重用函数

Question

So I am creating a web app that will do comparisons for products on the same page. Each time a person adds a new product they have the option to adjust some of the input fields. Each product has the exact same attributes such as the class and name. I may be able to append something on to each ID but there is a good chance that as each form is added to this page, it could possibly have a repeated ID. Yes I know that is not proper HTML but it works anyway. So my question is that how would I be able to re-use this same function without having to have one for each specific form that is added?

I have a sample of what I would be doing here:

<form>
<input type="text" id="the_input_id" class="formField1" placeholder="formField1">
<input type="text" id="the_input_id1" class="formField2" placeholder="formField2">
<input type="text" id="total" class="total" placeholder="total">
</form>

<form>
<input type="text" id="the_input_id" class="formField1" placeholder="formField1">
<input type="text" id="the_input_id1" class="formField2" placeholder="formField2">
<input type="text" id="total" class="total" placeholder="total">
</form>

Script:

$(function() {

$('.formField1,.formField2').blur(function() {  
    updateTotal();
});


var updateTotal = function () {
  var input1 = parseInt($('.formField1').val()) || 0;;
  var input2 = parseInt($('.formField2').val()) || 0;;
      if(!input2){
          $('.total').val($('.formField1').val()) || 0;;
      }

      if(!input1){
            $('.total').val($('.formField2').val()) || 0;;
      }

  else {          
        $('.total').val(input1 + input2) || 0;;
  }
};

var output_total = $('.total');

var total = input1 + input2;

output_total.val(total);

 });

So basically, as each form is added, allow it to use that function and keep the outputs separate?

Fiddle

Answer 1

i'm not 100% sure what your trying to do with the particular script, but i can see what you want to do in an over-all pattern sense.

something like this should work:

$(function() {

    $("form").on("blur", "input", function(e){
        updateTotal(e.target.form);
    });

 function updateTotal (root) {
    var input1 = parseInt($('.formField1', root).val()) || 0;;
    var input2 = parseInt($('.formField2', root).val()) || 0;;
        if(!input2){
            $('.total', root).val($('.formField1', root).val()) || 0;;
        }

        if(!input1){
              $('.total', root).val($('.formField2', root).val()) || 0;;
        }

    else {          
          $('.total', root).val(input1 + input2) || 0;;
    }


  var output_total = $('.total', root);

  var total = input1 + input2;

  output_total.val(total);

  }

});

the big idea is to pass a container to the function and use that container in all jQuery dom searches inside the function by passing it as a 2nd parameter to $, after the css selector.

EDIT: i made a better binder using $.on() to hit forms not yet added to the dom when this code is executed.