jeudi 6 août 2015

Form calculation conflicting with sticky header

I understand assistance is difficult with conflicting scripts without having access to the entire site however my question is a little more simple (only a little bit)...

I have the following script working perfectly on it's own:

$(function() {
$('#the_input_id').bind("change keyup", function(){
   updateTotal();
});
$('#the_input_id1').bind("change keyup", function(){
   updateTotal();
});  
$('#the_input_id2').bind("change keyup", function(){
   updateTotal();
});
$("#the_input_id3").bind("change keyup", function(){
   updateTotal();
});
var updateTotal = function () {
var input1 = parseInt($('#the_input_id').val());
var input2 = parseInt($('#the_input_id1').val());
var input3 = parseInt($('#the_input_id2').val());
var input4 = parseInt($('#the_input_id3').val());
    if (isNaN(input1) || isNaN(input2) || isNaN(input3) || isNaN(input4)) {  
          if(!input2){
              $('#total').val($('#the_input_id').val());
          }      
          if(!input1){
                $('#total').val($('#the_input_id1').val());
          }       
          if(!input3){
              $('#total').val($('#the_input_id2').val());
          }    
          if(!input4){
              $('#total').val($('#the_input_id3').val());
          }            
      } else {          
            $('#total').val((input1 + input2 + input3) / input4);
      }
    };
var output_total = $('#total');
var total = (input1 + input2  + input3)  / input4;
output_total.val(total);
});

This calculates the combined value of three fields and devides the total by the value of the fourth field.

When I place this script in my page with existing code, all hell breaks lose and the most obvious issue is with my sticky header.

When I remove:

if (isNaN(input1) || isNaN(input2) || isNaN(input3) || isNaN(input4)) {  
      if(!input2){
          $('#total').val($('#the_input_id').val());
      }      
      if(!input1){
            $('#total').val($('#the_input_id1').val());
      }       
      if(!input3){
          $('#total').val($('#the_input_id2').val());
      }    
      if(!input4){
          $('#total').val($('#the_input_id3').val());
      }            
  } else {          
        $('#total').val((input1 + input2 + input3) / input4);
  }
};

This works and doesn't break my other scripts however NaN shows on the field until all the fields are completed.

My question is, is there something wrong with the above if/else code that is not formatted right or not coded correctly that I can't see?

Any help would be greatly appreciated.

Aucun commentaire:

Enregistrer un commentaire