Question

Forms jquery compare question

Forms Web Customizations

Updated June 1, 2016

asked on May 31, 2016 • Show version history

Hello,

I am very new to javascript & jquery. I am trying compare two currency fields in my form (.invoice & .total) and if they match I want to add a value to a third field (.flag) -"Match". If they do not match I want to add the value "Does Not Match" and change the color of that third field to red as well as hide all buttons so the form cannot be submitted, approved or rejected. I'm really hoping one of you can see the error in my code :) Thank you in advance!

Terri

$(document).ready(function(){
 	 $('.invoice','.total').change(function(){
			if ($('.invoice input').val()!==$('.total input').val()){
        		$('.flag').css('background-color': 'red');
           		$('.flag input').val("Does Not Match");   
   				$(".action-btn.Approve").hide();
  				$(".action-btn.Reject").hide();
        		$(".action-btn.Submit").hide();
			}
            else{
                
           		$('.flag input').val("Match");  
			}
	)};
});

Form IDs.PNG (13.54 KB)

| Download

0 0

Answer

SELECTED ANSWER

replied on May 31, 2016

Terri,

Try this:

$(document).ready(function(){

$('.Submit').hide();

$('.Invoice, .total').click(function(){

var invDollars = $(".Invoice input").val();
var totDollars = $(".total input").val();

if (invDollars != totDollars){

$('.flag input').css('background-color', 'red');

$('.flag input').val("Does Not Match");

$('.Approve').hide();

$('.Reject').hide();

$('.Submit').hide();

}

else{
$('.flag input').val("Match");
$('.flag input').css('background-color', 'white');
$('.Submit').show();
$('.Approve').show();
$('.Reject').show();

   }

});

Rick

1 0

Replies

replied on May 31, 2016

Brilliant- Thank you so much Rick- Was the problem that I wasn't declaring my fields?

0 0

replied on June 1, 2016

No, you were close. The .css property needed a comma between values rather than a colon, and when you were comparing the fields of the classes all in one statement it didn't seem right. I always have trouble with the syntax when doing that, and I just find it easier to use a val statement to get one value and set it to a variable and then compare it with the other. I'm fairly new to this as well, and it just makes it a lot easier for me to reuse it in other parts of the form if I have variables to condense things.

0 0

replied on June 1, 2016

Terri,

Actually this first line works better with the change function rather than the click one I had:

$('.Invoice, .total').click(function(){ ---------------

change that to $('Invoice, .total').change(function(){

That will prevent you from having to click again after an entry to make the flag field change

0 0

replied on June 1, 2016

thanks Rick- I made that change in testing. I appreciate all of your help!

0 0

You are not allowed to follow up in this post.

Question

Question

Forms jquery compare question

Answer

Replies

Sign in to reply to this post.