Question

Javascript CSS formatting across Forms

Updated December 21, 2016

asked on December 21, 2016

So the issue I'm running into is I'll have a row in a table highlighted when a value is over "0", then when the form is submitted it loses the highlighting until you select the field again. I know I have it set up so the function runs when that happens but I need it to keep the formatting throughout the whole process. Here is my code.

$(document).ready(function() {

	setTimeout(function(){
		$('body').addClass('loaded');  
	}, 3000);

	$('.cf-table-block').on('blur', 'input', highlight);
  
	function highlight(){
		$('.cf-table-block tbody tr').each(function(){
          
			var t1 = 0;
			var t2 = 0;
			var t3 = 0;
			var t4 = 0;
			var t5 = 0;
			var t6 = 0;
			var t7 = 0;
			var t8 = 0;
			var t9 = 0;
			var t10 = 0;
			var t11 = 0;
			var t12 = 0;
			var t13 = 0;

			t1 = parseNumber($(this).find('.total1 input').val());
			t2 = parseNumber($(this).find('.total2 input').val());
			t3 = parseNumber($(this).find('.total3 input').val());
			t4 = parseNumber($(this).find('.total4 input').val());
			t5 = parseNumber($(this).find('.total5 input').val());
			t6 = parseNumber($(this).find('.total6 input').val());
			t7 = parseNumber($(this).find('.total7 input').val());
			t8 = parseNumber($(this).find('.total8 input').val());
			t9 = parseNumber($(this).find('.total9 input').val());
			t10 = parseNumber($(this).find('.total10 input').val());
			t11 = parseNumber($(this).find('.total11 input').val());
			t12 = parseNumber($(this).find('.total12 input').val());
			t13 = parseNumber($(this).find('.total13 input').val());

			if (t1 > 0) {
				$(this).closest('tr').css("background", "yellow");
			}
			else if (t2 > 0){
				$(this).closest('tr').css("background", "yellow");
			}

			else if (t3 > 0) {
				$(this).closest('tr').css("background", "yellow");
			}
			else if (t4 > 0){
				$(this).closest('tr').css("background", "yellow");
			}

			else if (t5 > 0) {
				$(this).closest('tr').css("background", "yellow");
			}
			else if (t6 > 0){
				$(this).closest('tr').css("background", "yellow");
			}

			else if (t7 > 0) {
				$(this).closest('tr').css("background", "yellow");
			}
			else if (t8 > 0){
				$(this).closest('tr').css("background", "yellow");
			}

			else if (t9 > 0) {
				$(this).closest('tr').css("background", "yellow");
			}
			else if (t10 > 0){
				$(this).closest('tr').css("background", "yellow");
			}

			else if (t11 > 0) {
				$(this).closest('tr').css("background", "yellow");
			}
			else if (t12 > 0){
				$(this).closest('tr').css("background", "yellow");
			}

			else if (t13 > 0) {
				$(this).closest('tr').css("background", "yellow");
			}
			else if (t1,t2,t3,t4,t5,t6,t7,t8,t9,t10,t11,t12,t13 == 0){
				$(this).closest('tr').css("background", "none");
			}
		});
	}

	function parseNumber(n){
		var f = parseFloat(n);
		return isNaN(f) ? 0 : f;
	}
});

I'm including a screenshot of the highlighting in action.

highlightform.png (14.16 KB)

| Download

0 0

Answer

SELECTED ANSWER

replied on December 21, 2016

$(document).ready(function() {
        .
        .
        .
	$('.cf-table-block').on('blur', 'input', highlight);
  
	function highlight(){

			.
                        .
                        .

	}

        .
        .
        .
        highlight();
});

Your original function block at line 9 of your example is just defining the function itself. You need to call it if you want it to execute on ready.

Take this function for example. This will not actually set Field8's value to 1 if I don't call it on line 6:

0 0

Replies

replied on December 21, 2016 • Show version history

Have you tried calling "highlight;" at the end of (but still inside) your document.ready? That should work unless there's a reason you wouldn't want to call it the moment the form loads.

0 0

replied on December 21, 2016

Hmm. I'm not sure what you mean. Should I move it after the parseNumber function?

0 0

SELECTED ANSWER

replied on December 21, 2016

$(document).ready(function() {
        .
        .
        .
	$('.cf-table-block').on('blur', 'input', highlight);
  
	function highlight(){

			.
                        .
                        .

	}

        .
        .
        .
        highlight();
});

Your original function block at line 9 of your example is just defining the function itself. You need to call it if you want it to execute on ready.

Take this function for example. This will not actually set Field8's value to 1 if I don't call it on line 6:

0 0

replied on December 21, 2016

Gotcha! Thanks, that fixed the issue. I have still have much to learn!

0 0

You are not allowed to follow up in this post.

Question

Question

Javascript CSS formatting across Forms

Answer

Replies

Sign in to reply to this post.