Question

Javascript statement to put the result of the addition or subtraction of two different fields in another field

Forms

Updated May 13, 2015

asked on May 30, 2014

Hello,

I have this form and want to take the value of Money Adavnce and subtract it from expected expenses and put the result in Total expected expenses. The code is what I tried. I am completely new to java and have no idea how to get to that result. Thanks for any help.

question.jpg (122.79 KB)

| Download

0 0

Answers

APPROVED ANSWER

replied on May 30, 2014 • Show version history

When you write JavaScript, it's important to tell the code when it should run. You'll usually want to put all of your code within a $(document).ready function, as shown in the code below. This ensures that your code will run after the page loads. Then, using the .blur() method, you can have a function run when the user leaves a field (I like this for calculations).

$(document).ready(function () { 
  $('#q1 input, #q2 input').blur(function () {
    $('#q3 input').val($('#q1 input').val() - $('#q2 input').val());
  });
});

So, this code loads when the page is finished loading, and when the user leaves field 1 or field 2, the subtracted total is updated and placed in the field 3.

1 0

SELECTED ANSWER

replied on June 2, 2014 • Show version history

The selector on line 41 is incorrect. You need the hash (#) before q15, q28, and q24.

 $('#q12 input, #q15 input, #q28 input, #q24 input')

I recommend using Firefox or Chrome with their available JavaScript debugging tools when you're writing JavaScript in Forms. These tools make it very obvious when there are errors like this and make debugging a lot more pleasant.

0 0

Replies

replied on May 30, 2014

Have you looked at the example code in the Help documentation? They have a lot of good examples to get started with. Also, JavaScript and Java are two different things. It will help anyone you talk to in the future if you use the correct name. It's a common misconception.

1 0

replied on May 30, 2014

Thanks for the link and I guess when I looked up the code it looked exactly like javascript...

0 0

replied on May 30, 2014

Okay, I read some of the example code and this is what I came up with but it isnt populating the total expenses box.

$('#q8 input').click( function () {
  
  var temp1 = Number($('#q6 input'))
  var temp2 = Number($('#q5 input'))
  
  $('#q8 input').val(temp1-temp2)
}

0 0

View 2 previous replies

APPROVED ANSWER

replied on May 30, 2014 • Show version history

$(document).ready(function () { 
  $('#q1 input, #q2 input').blur(function () {
    $('#q3 input').val($('#q1 input').val() - $('#q2 input').val());
  });
});

So, this code loads when the page is finished loading, and when the user leaves field 1 or field 2, the subtracted total is updated and placed in the field 3.

1 0

replied on May 30, 2014

Thank you very much for your help, that makes sense why it wasnt working because it wasnt loading when the document loaded. I appreciate your help.

0 0

replied on May 30, 2014

You're welcome!

0 0

replied on May 13, 2015

Hey Eric, I borrowed the following code snippet from the forums for summing values typed into a table object. As it stands, the functions only trigger on blurring out of the table object cells. I'd like to add another event trigger for when someone blurs away from this field q28 that triggers the entire code snippet. I'm trying to build an expense report that adds up table values, but then can also subtract any previous cash advances provided, which is this field q28 which starts with a default value of 0. I have the subtraction working, but of course it only triggers if I place the cursor back in the table and blur away.

$(document).ready(function () {
    $('.cf-table-block').on('blur', 'input', sumtotal);
    if ($('.subtotal').length > 0) {
        $('.cf-table-block').on('blur', 'input', rowtotal);
    }

I'd like the blur event in q28 to also trigger the code the same way as a blur in .cf-table-block. Can I make a list of objects something like this:

$(document).ready(function () {
    $('.cf-table-block' | '#q28 input').on('blur', 'input', sumtotal);
    if ($('.subtotal').length > 0) {
        $('.cf-table-block').on('blur', 'input', rowtotal);
    }

I'm sure you already know this doesn't work as written. I just want the blur trigger to work the same way for table input and this q28 field.

0 0

replied on May 13, 2015

OK, so it looks like it's possible to just add another trigger in a separate line right after the first trigger:

$(document).ready(function () {
    $('.cf-table-block').on('blur', 'input', sumtotal);
    $('.advance').on('blur', 'input', sumtotal);
    if ($('.subtotal').length > 0) {
        $('.cf-table-block').on('blur', 'input', rowtotal);

'Advance' is a CSS class I assigned to this field q28. This seems to work.

0 0

replied on June 2, 2014

This is part of my form, I am trying to have the total trip cost auto populate everytime any of the other boxes above it changes its value. Here is my code, which is not working. Is there another way to do this? Thanks!

$(document).ready(function () {
  
  
  
  
  
  $('#q26 input').change(function () {
    
  $('#q12 input').val($('#q26 input').val());
    
  });
  
  
  
  
  
  $('#q14 input').change(function () {
    
    var temp1 = parseFloat($('#q14 input').val());
    var temp2 = parseFloat($('#q16 input').val());
    
    $('#q15 input').val( temp1 + temp2 );
    
  });
  
  
  
  
  
    $('#q16 input').change(function () {
      
    var temp1 = parseFloat($('#q14 input').val());
    var temp2 = parseFloat($('#q16 input').val());
    
    $('#q15 input').val( temp1 + temp2 );
    
  });
  
  
  
  
  
  
  
  $('#q27 input').change(function () {
  
  	var temp1 = parseFloat($('#q27 input').val());
    var temp2 = parseFloat($('#q19 input').val());
    $('#q28 input').val( temp1 + temp2 );
  
  });
        
  
  
  
  
  $('#q19 input').change(function () {
    
    var temp1 = parseFloat($('#q27 input').val());
    var temp2 = parseFloat($('#q19 input').val());
    $('#q28 input').val( temp1 + temp2 );
    
  });
  
                         
                         
                         
                         
  $('#q21 input').change(function () {
  
    var temp1 = parseFloat($('#q21 input').val());
    var temp2 = parseFloat($('#q22 input').val());
    $('#q24 input').val( temp1 + temp2 );
  
  });
                         
                         
                         
                         
                         
  $('#q22 input').change(function () {
  
    var temp1 = parseFloat($('#q21 input').val());
    var temp2 = parseFloat($('#q22 input').val());
    $('#q24 input').val( temp1 + temp2 );
  
  });
  
  
  
  
  
  $("#q12 input").change(function(){
	
    var temp1 = parseFloat ($('#q21 input').val());
    var temp2 = parseFloat ($('#q21 input').val());
    var temp3 = parseFloat ($('#q21 input').val());
    var temp4 = parseFloat ($('#q21 input').val());
    $('#q25 input').val(temp1 + temp2 + temp3 + temp4);
    
  });
  
  
  
  
  
    $("#q15 input").change(function(){
	
    var temp1 = parseFloat ($('#q21 input').val());
    var temp2 = parseFloat ($('#q21 input').val());
    var temp3 = parseFloat ($('#q21 input').val());
    var temp4 = parseFloat ($('#q21 input').val());
    $('#q25 input').val(temp1 + temp2 + temp3 + temp4);
    
  });
  
  
  
  
  
    $("#q28 input").change(function(){
	
    var temp1 = parseFloat ($('#q21 input').val());
    var temp2 = parseFloat ($('#q21 input').val());
    var temp3 = parseFloat ($('#q21 input').val());
    var temp4 = parseFloat ($('#q21 input').val());
    $('#q25 input').val(temp1 + temp2 + temp3 + temp4);
    
  });
  
  
  
  
  
    $("#q24 input").change(function(){
	
    var temp1 = parseFloat ($('#q21 input').val());
    var temp2 = parseFloat ($('#q21 input').val());
    var temp3 = parseFloat ($('#q21 input').val());
    var temp4 = parseFloat ($('#q21 input').val());
    $('#q25 input').val(temp1 + temp2 + temp3 + temp4);
    
  });
  
});

0 0

replied on June 2, 2014

I dont think it's changing the actual variable value, which is what I need it to do. How do I change a form variable via javascript?

0 0

View 5 previous replies

replied on June 2, 2014 • Show version history

Are those fields read-only? What are those fields you're monitoring for changes? One issue is that, if you're adding two fields together, you'll want to make sure the total is updated if either field is updated, instead of just one.

The .change() method is probably not what you want to use. I think .blur() with a selector that targets each input field that might be updated is a more reliable approach. See the code I shared earlier for an example.

0 0

replied on June 2, 2014

Yes, they are read only. So in your example code:

$(document).ready(function () {
  $('#q1 input, #q2 input').blur(function () {
    $('#q3 input').val($('#q1 input').val() - $('#q2 input').val());
  });
});

Basically whats happening is when q1 or q2 change the difference is stored in q3 ?

0 0

replied on June 2, 2014

Yeah, in my example whenever the user leaves either field the total is calculated and updated in the q3 field.

The issue you're experiencing is probably related to the fields being marked as read-only. For security reasons, if a field is marked as read-only, its variable (the value that Forms stores for it) will not be updated, regardless of what happens to it during the submission.

You can avoid that issue by using JavaScript to make the field read-only after you insert a value. For more information, see this question.

0 0

replied on June 2, 2014

Thank you very much, I'll check that out and get back to you.

0 0

replied on June 2, 2014

Okay I got it all working except calculating the total at the bottom. Any ideas?

$(document).ready(function () {
  
	$('#q26 input').blur(function () {
    
		var temp1 = parseFloat ( $('#q26 input').val());
      	$('#q12 input').val( temp1 ) ;
      	$('#q12 input').attr('readonly', 'True');

	});
  
  	$('#q14 input, #q16 input').blur(function () {
    
		var temp1 = parseFloat ( $('#q14 input').val());
      	var temp2 = parseFloat ( $('#q16 input').val());
      	var temp3 = ( temp1 + temp2 );
      	$('#q15 input').val( temp3 ) ;
      	$('#q15 input').attr('readonly', 'True');

	});
  
  	$('#q27 input, #q19 input').blur(function () {
    
		var temp1 = parseFloat ( $('#q19 input').val());
      	var temp2 = parseFloat ( $('#q27 input').val());
     	var temp3 = ( temp1 + temp2 );
      	$('#q28 input').val( temp3 ) ;
      	$('#q28 input').attr('readonly', 'True');

	});
  
    $('#q21 input, #q22 input').blur(function () {
    
		var temp1 = parseFloat ( $('#q21 input').val());
      	var temp2 = parseFloat ( $('#q22 input').val());
      	var temp3 = ( temp1 + temp2 );
      	$('#q24 input').val( temp3 ) ;
      	$('#q24 input').attr('readonly', 'True');

	});
  
  	$('#q12 input, q15 input, q28 input, q24 input').blur(function () {
    
		var temp1 = parseFloat ( $('#q12 input').val());
      	var temp2 = parseFloat ( $('#q15 input').val());
      	var temp3 = parseFloat ( $('#q28 input').val());
      	var temp4 = parseFloat ( $('#q24 input').val());
      	var temp5 = ( temp1 + temp2 + temp3 + temp4 );
      	$('#q25 input').val(temp5) ;

	});
  
});

0 0

SELECTED ANSWER

replied on June 2, 2014 • Show version history

The selector on line 41 is incorrect. You need the hash (#) before q15, q28, and q24.

 $('#q12 input, #q15 input, #q28 input, #q24 input')

0 0

replied on June 3, 2014

Thanks for the advice! I cant believe I missed that when I was looking it over.

0 0

replied on June 3, 2014

You're welcome!

0 0

You are not allowed to follow up in this post.

Question

Question

Javascript statement to put the result of the addition or subtraction of two different fields in another field

Answers

Replies

Sign in to reply to this post.