You are viewing limited content. For full access, please sign in.

Question

Question

How do I compare two Single Line fields in a collection and change background color based on results?

asked on August 15, 2024

Good morning.  I have a Classic Designer form with a Collection assigned a CSS Class "MyCollection".

In the Collection, I have (2) Single Line Fields: CSS Class "Part" and "Scan".

The Part field populates from a SQL lookup.  The user would scan a package and the Part value will fill the Part Field.  What I am attempting to accomplish is to compare the value of the Part field with the value of the Scan field after the scan field changes to populated.  If they match, change the Collection row background to green and if they do not match, change the background color to red.

I have attempted to adjust other code samples uploaded to Answers to closely match my setup, but it has not worked.  :(

 

Any assistance would be appreciated.  

0 0

Replies

replied on August 16, 2024

Working with tables and collections can get tricky. To simplify things, I would include a hidden field within the collection that compares the two values in that row (something simple like, if they match, make the value 1, else make it 0). Then, base your color changing on the value in that hidden field.

1 0
replied on August 16, 2024

They are both single lines.

1 0
replied on August 16, 2024

It seems this post is more about how to execute code when a single line is changed and that is where the real battle is at currently, since the rest of your code to compare and change colors may be working, it just is not running.

When programming you usually have to tackle one step at a time from the very beginning. This is how you perform actions on a single line change, I would try this code first, then you can work within this function to try changing colors and comparing values.

$(document).ready(function(){

  $('.mySingleLineClass input').on('change',function(){

   console.log('new value detected '+ $(this).val());
  });
});

 

1 0
replied on August 15, 2024

Which method were you not having success with? I use the attr method to update the CSS including !important to override the existing CSS

.attr('style', 'background-color: #6699ff !important; color:white;');

This works great for me. It sets the background color and the text to white so you can still read it with darker colors.

You can use the dev tools by pressing F12 in the browser and see if any other CSS is overwriting what you applied to the field.

0 0
replied on August 15, 2024

The issue I am having is the comparison is not working.  

$(document).ready(function() {
    // Event listener for when the value of the Scan field changes
    $('.MyCollection').on('change', '.Scan', function() {
        // Get the current row
        var row = $(this).closest('.cf-collection-item');
        
        // Get the value of the Part field in the same row
        var partValue = row.find('.Part').val();
        
        // Get the value of the Scan field
        var scanValue = $(this).val();
        
        // Check if Scan value matches Part value
        if (scanValue !== '') {
            if (scanValue === partValue) {
                // If values match, set background color to green
                row.css('background-color', 'green');
            } else {
                // If values don't match, set background color to red
                row.css('background-color', 'red');
            }
        } else {
            // Reset the background color if Scan field is empty
            row.css('background-color', '');
        }
    });
});

 

0 0
replied on August 15, 2024

Always check your values in the console. I think I see the issue and it is a common misunderstanding when getting started with forms. Adding a class does not add the class to the input field, it adds it to a parent object.

So you must reference your inputs by $('.Part input') instead of just $('.Part') when you want to get the value.

They do this because sometimes you don't need to access the input, select, etc. Sometimes your trying to access another child object like the label.

2 0
replied on August 16, 2024 Show version history

Good morning.  I understand what you explained.  I still was not getting any results.  So, I attempted to enable console logging but there is nothing showing in it.  I do not understand why no values show in console either.  So, I thought I would send the entire Javascript in case something else was interfering.

$(document).ready( function() {
$('.MyCollection').on('change','.SelectCheckbox input', function() {
    if ($(this).val().length > 0){
        $('#q28 input').focus();
    }
});
});

$(document).ready(function() {
    // Define the compareFields function
    function compareFields() {
        console.log("compareFields function called.");
        
        // Iterate through each row in the collection
        $('.MyCollection').each(function() {
            var partField = $(this).find('.Part input');
            var scanField = $(this).find('.Scan input');

            // Log the values of Part and Scan inputs to the console
            console.log("Part input value: " + partField.val());
            console.log("Scan input value: " + scanField.val());

            // Compare the values and change the background color
            if (partField.val() === scanField.val()) {
                $(this).css('background-color', 'green');
            } else {
                $(this).css('background-color', 'red');
            }
        });
    }

    // Attach an event listener to trigger compareFields when input is detected in Scan field
    $('.MyCollection .Scan input').on('input', function() {
        compareFields();  // This calls the compareFields function
    });
});


When I look at the console, it is blank.  So I assume the compareFields function is not running.  Do you see what I am doing incorrectly?

 

Here is a visual of the form.

desc.jpg
desc.jpg (43.7 KB)
0 0
replied on August 16, 2024

Try on 'change' instead of 'input' maybe?

0 0
replied on August 16, 2024

Are they both single line fields, or is Label Part Scan a number field? Comparing a number to a string can cause issues. 

0 0
replied on August 18, 2024

Your latest code works perfectly in my test without any modification, as Genny suggested, are you sure you are comparing two single line fields? And are these fields inside a same collection? Or are you referring to correct class name?

1 0
replied on August 16, 2024

Thank you Jennifer.  Unfortunately, my script isn't working even just to the point of getting the data, never mind what to do with it after.  Change color of rows vs set a value to another field.

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.