-5
\$\begingroup\$

Please ignore row "B. and C." as it works in the environment where it was implemented and is missing the JavaScript reference. The rows highlighted in light blue are the issue. I injected row "A." to calculate (addition) the input of the rows above it. I am appealing to experts who know how to better recognize loops/arrays and scenarios to reduce lines of code to advise me and reproduce this with much less code and explain in great detail how and why they chose that specific method.

Once rows 1-4 have been filled in, a checkbox will show up so the respondent will know that they are done with that portion.

Again, please refine and reduce my code (side note, that was my first time putting it into jsfiddle and there were quite a few errors, eeks). I hope it did not affect data intake.

I have been reading up on jQuery from books borrowed from the library so feel free to make references to split/splice/slice. I will do my homework and this will be a learning experience for me.

jsFiddle

//Code Review 07-15-2015
//Reduce large lines of code by utilizing arrays, each, for, on change and setInterval
//Please ignore row "C." it works in the environment it is supposed to.
//-Dynamically Add Input Count - Dixon, Alexander 2015
            $('#_Q33_Q0_Q0').keyup(function() {     //-Q17A Custom Totals
                $("#_Q33_Q0_Q0").each(function(){
                    var rowOne = parseInt($(this).val(), 10);
                    var rowTwo = parseInt($('#_Q33_Q1_Q0').val(), 10);
                    var rowThree = parseInt($('#_Q33_Q2_Q0').val(), 10);
                    var rowFour = parseInt($('#_Q33_Q3_Q0').val(), 10);
                    var oneCheck = $(this).val().length;
                    var twoCheck = $('#_Q33_Q1_Q0').val().length;                   
                    var threeCheck = $('#_Q33_Q2_Q0').val().length;
                    var fourCheck = $('#_Q33_Q3_Q0').val().length;
                    if(oneCheck < 1 || isNaN(rowOne))
                    {
                        rowOne = "0";
                        $('#customSum').css("color", "red");
                    }
                    if(twoCheck < 1 || isNaN(rowTwo))
                    {
                        rowTwo = "0";
                        $('#customSum').css("color", "red");
                    }
                    if(threeCheck < 1 || isNaN(rowThree))
                    {
                        rowThree = "0";
                        $('#customSum').css("color", "red");
                    }
                    if(fourCheck < 1 || isNaN(rowFour))
                    {
                        rowFour = "0";
                        $('#customSum').css("color", "red");
                    }
                    var sumOne = parseInt(rowOne, 10) + parseInt(rowTwo, 10) + parseInt(rowThree, 10) + parseInt(rowFour, 10);
                    if(rowOne >= 0 || rowOne <= 0 || rowTwo >= 0 || rowTwo <= 0 || rowThree >= 0 || rowThree <= 0 || rowFour >= 0 || rowFour <= 0)
                    {
                        $('#customSum').css("background-color", "#e5f2fb");
                        $('#customSum').css("color", "green");
                        $('#customSum').text(sumOne);
                        $('#_Q33_Q0_Q0').css("background-color", "#e5f2fb");
                        $('#_Q33_Q1_Q0').css("background-color", "#e5f2fb");
                        $('#_Q33_Q2_Q0').css("background-color", "#e5f2fb");
                        $('#_Q33_Q3_Q0').css("background-color", "#e5f2fb");
                        if(oneCheck > 0 && twoCheck > 0 && threeCheck > 0 && fourCheck > 0)
                        {
                            if(rowOne >= 0 || rowOne <= 0 || rowTwo >= 0 || rowTwo <= 0 || rowThree >= 0 || rowThree <= 0 || rowFour >= 0 || rowFour <= 0)
                            {
                                $('#customSum').text(sumOne);
                                $('#topFour').html('<img src="http://surveys.researchresults.com/legacy/259/0067/checkmark.png">');
                            }
                        }
                    }
                });
            }); 

            $('#_Q33_Q1_Q0').keyup(function() {     //-Q17A Custom Totals
                $("#_Q33_Q1_Q0").each(function(){
                    var rowOne = parseInt($('#_Q33_Q0_Q0').val(), 10);
                    var rowTwo = parseInt($(this).val(), 10);
                    var rowThree = parseInt($('#_Q33_Q2_Q0').val(), 10);
                    var rowFour = parseInt($('#_Q33_Q3_Q0').val(), 10);
                    var oneCheck = $('#_Q33_Q0_Q0').val().length;
                    var twoCheck = $(this).val().length;                    
                    var threeCheck = $('#_Q33_Q2_Q0').val().length;
                    var fourCheck = $('#_Q33_Q3_Q0').val().length;
                    if(oneCheck < 1 || isNaN(rowOne))
                    {
                        rowOne = "0";
                        $('#customSum').css("color", "red");
                    }
                    if(twoCheck < 1 || isNaN(rowTwo))
                    {
                        rowTwo = "0";
                        $('#customSum').css("color", "red");
                    }
                    if(threeCheck < 1 || isNaN(rowThree))
                    {
                        rowThree = "0";
                        $('#customSum').css("color", "red");
                    }
                    if(fourCheck < 1 || isNaN(rowFour))
                    {
                        rowFour = "0";
                        $('#customSum').css("color", "red");
                    }
                    var sumOne = parseInt(rowOne, 10) + parseInt(rowTwo, 10) + parseInt(rowThree, 10) + parseInt(rowFour, 10);
                    if(rowOne >= 0 || rowOne <= 0 || rowTwo >= 0 || rowTwo <= 0 || rowThree >= 0 || rowThree <= 0 || rowFour >= 0 || rowFour <= 0)
                    {
                        $('#customSum').css("background-color", "#e5f2fb");
                        $('#customSum').css("color", "green");
                        $('#customSum').text(sumOne);
                        $('#_Q33_Q0_Q0').css("background-color", "#e5f2fb");
                        $('#_Q33_Q1_Q0').css("background-color", "#e5f2fb");
                        $('#_Q33_Q2_Q0').css("background-color", "#e5f2fb");
                        $('#_Q33_Q3_Q0').css("background-color", "#e5f2fb");
                        if(oneCheck > 0 && twoCheck > 0 && threeCheck > 0 && fourCheck > 0)
                        {
                            if(rowOne >= 0 || rowOne <= 0 || rowTwo >= 0 || rowTwo <= 0 || rowThree >= 0 || rowThree <= 0 || rowFour >= 0 || rowFour <= 0)
                            {
                                $('#customSum').text(sumOne);
                                $('#topFour').html('<img src="http://surveys.researchresults.com/legacy/259/0067/checkmark.png">');
                            }
                        }
                    }
                });
            });

            $('#_Q33_Q2_Q0').keyup(function() {     //-Q17A Custom Totals
                $("#_Q33_Q2_Q0").each(function(){
                    var rowOne = parseInt($('#_Q33_Q0_Q0').val(), 10);
                    var rowTwo = parseInt($('#_Q33_Q1_Q0').val(), 10);
                    var rowThree = parseInt($(this).val(), 10);
                    var rowFour = parseInt($('#_Q33_Q3_Q0').val(), 10);
                    var oneCheck = $('#_Q33_Q0_Q0').val().length;
                    var twoCheck = $('#_Q33_Q1_Q0').val().length;
                    var threeCheck = $(this).val().length;
                    var fourCheck = $('#_Q33_Q3_Q0').val().length;
                    if(oneCheck < 1 || isNaN(rowOne))
                    {
                        rowOne = "0";
                        $('#customSum').css("color", "red");
                    }
                    if(twoCheck < 1 || isNaN(rowTwo))
                    {
                        rowTwo = "0";
                        $('#customSum').css("color", "red");
                    }
                    if(threeCheck < 1 || isNaN(rowThree))
                    {
                        rowThree = "0";
                        $('#customSum').css("color", "red");
                    }
                    if(fourCheck < 1 || isNaN(rowFour))
                    {
                        rowFour = "0";
                        $('#customSum').css("color", "red");
                    }
                    var sumOne = parseInt(rowOne, 10) + parseInt(rowTwo, 10) + parseInt(rowThree, 10) + parseInt(rowFour, 10);
                    if(rowOne >= 0 || rowOne <= 0 || rowTwo >= 0 || rowTwo <= 0 || rowThree >= 0 || rowThree <= 0 || rowFour >= 0 || rowFour <= 0)
                    {
                        $('#customSum').css("background-color", "#e5f2fb");
                        $('#customSum').css("color", "green");
                        $('#customSum').text(sumOne);
                        $('#_Q33_Q0_Q0').css("background-color", "#e5f2fb");
                        $('#_Q33_Q1_Q0').css("background-color", "#e5f2fb");
                        $('#_Q33_Q2_Q0').css("background-color", "#e5f2fb");
                        $('#_Q33_Q3_Q0').css("background-color", "#e5f2fb");
                        if(oneCheck > 0 && twoCheck > 0 && threeCheck > 0 && fourCheck > 0)
                        {
                            if(rowOne >= 0 || rowOne <= 0 || rowTwo >= 0 || rowTwo <= 0 || rowThree >= 0 || rowThree <= 0 || rowFour >= 0 || rowFour <= 0)
                            {
                                $('#customSum').text(sumOne);
                                $('#topFour').html('<img src="http://surveys.researchresults.com/legacy/259/0067/checkmark.png">');
                            }
                        }
                    }
                });             
            });

            $('#_Q33_Q3_Q0').keyup(function() {     //-Q17A Custom Totals
                $("#_Q33_Q3_Q0").each(function(){
                    var rowOne = parseInt($('#_Q33_Q0_Q0').val(), 10);
                    var rowTwo = parseInt($('#_Q33_Q1_Q0').val(), 10);
                    var rowThree = parseInt($('#_Q33_Q2_Q0').val(), 10);
                    var rowFour = parseInt($(this).val(), 10);
                    var oneCheck = $('#_Q33_Q0_Q0').val().length;
                    var twoCheck = $('#_Q33_Q1_Q0').val().length;
                    var threeCheck = $('#_Q33_Q2_Q0').val().length;
                    var fourCheck = $(this).val().length;
                    if(oneCheck < 1 || isNaN(rowOne))
                    {
                        rowOne = "0";
                        $('#customSum').css("color", "red");
                    }
                    if(twoCheck < 1 || isNaN(rowTwo))
                    {
                        rowTwo = "0";
                        $('#customSum').css("color", "red");
                    }
                    if(threeCheck < 1 || isNaN(rowThree))
                    {
                        rowThree = "0";
                        $('#customSum').css("color", "red");
                    }
                    if(fourCheck < 1 || isNaN(rowFour))
                    {
                        rowFour = "0";
                        $('#customSum').css("color", "red");
                    }
                    var sumOne = parseInt(rowOne, 10) + parseInt(rowTwo, 10) + parseInt(rowThree, 10) + parseInt(rowFour, 10);
                    if(rowOne >= 0 || rowOne <= 0 || rowTwo >= 0 || rowTwo <= 0 || rowThree >= 0 || rowThree <= 0 || rowFour >= 0 || rowFour <= 0)
                    {
                        $('#customSum').css("background-color", "#e5f2fb");
                        $('#customSum').css("color", "green");
                        $('#customSum').text(sumOne);
                        $('#_Q33_Q0_Q0').css("background-color", "#e5f2fb");
                        $('#_Q33_Q1_Q0').css("background-color", "#e5f2fb");
                        $('#_Q33_Q2_Q0').css("background-color", "#e5f2fb");
                        $('#_Q33_Q3_Q0').css("background-color", "#e5f2fb");
                        if(oneCheck > 0 && twoCheck > 0 && threeCheck > 0 && fourCheck > 0)
                        {
                            if(rowOne >= 0 || rowOne <= 0 || rowTwo >= 0 || rowTwo <= 0 || rowThree >= 0 || rowThree <= 0 || rowFour >= 0 || rowFour <= 0)
                            {
                                $('#customSum').text(sumOne);
                                $('#topFour').html('<img src="http://surveys.researchresults.com/legacy/259/0067/checkmark.png">');
                            }
                        }
                    }
                });
            });

                if($('span.firstQual').length > 0) //-First Loaded
                {
                    var rowOne = parseInt($('#_Q33_Q0_Q0').val(), 10);
                    var rowTwo = parseInt($('#_Q33_Q1_Q0').val(), 10);
                    var rowThree = parseInt($('#_Q33_Q2_Q0').val(), 10);
                    var rowFour = parseInt($('#_Q33_Q3_Q0').val(), 10);
                    var oneCheck = $('#_Q33_Q0_Q0').val().length;
                    var twoCheck = $('#_Q33_Q1_Q0').val().length;
                    var threeCheck = $('#_Q33_Q2_Q0').val().length;
                    var fourCheck = $('#_Q33_Q3_Q0').val().length;
                    if(oneCheck < 1 || isNaN(rowOne))
                    {
                        var rowOne = "0";
                        $('#customSum').css("color", "red");
                    }
                    if(twoCheck < 1 || isNaN(rowTwo))
                    {
                        var rowTwo = "0";
                        $('#customSum').css("color", "red");
                    }
                    if(threeCheck < 1 || isNaN(rowThree))
                    {
                        var rowThree = "0";
                        $('#customSum').css("color", "red");
                    }
                    if(fourCheck < 1 || isNaN(rowFour))
                    {
                        var rowFour = "0";
                        $('#customSum').css("color", "red");
                    }
                    var sumOne = parseInt(rowOne, 10) + parseInt(rowTwo, 10) + parseInt(rowThree, 10) + parseInt(rowFour, 10);
                    if(rowOne >= 0 || rowOne <= 0 || rowTwo >= 0 || rowTwo <= 0 || rowThree >= 0 || rowThree <= 0 || rowFour >= 0 || rowFour <= 0)
                    {
                        $('#customSum').css("background-color", "#e5f2fb");
                        $('#customSum').css("color", "green");
                        $('#customSum').text(sumOne);
                        $('#_Q33_Q0_Q0').css("background-color", "#e5f2fb");
                        $('#_Q33_Q1_Q0').css("background-color", "#e5f2fb");
                        $('#_Q33_Q2_Q0').css("background-color", "#e5f2fb");
                        $('#_Q33_Q3_Q0').css("background-color", "#e5f2fb");
                        if(oneCheck > 0 && twoCheck > 0 && threeCheck > 0 && fourCheck > 0)
                        {
                            if(rowOne >= 0 || rowOne <= 0 || rowTwo >= 0 || rowTwo <= 0 || rowThree >= 0 || rowThree <= 0 || rowFour >= 0 || rowFour <= 0)
                            {
                                $('#customSum').text(sumOne);
                                $('#topFour').html('<img src="http://surveys.researchresults.com/legacy/259/0067/checkmark.png">');                             
                                $('#topFour').css("background", "url(/checkmark.png) no-repeat");
                            }
                        }
                    }
                }

                if($('span.secondQual').length > 0) //-Second Loaded
                {
                    var rowOne = parseInt($('#_Q33_Q0_Q0').val(), 10);
                    var rowTwo = parseInt($('#_Q33_Q1_Q0').val(), 10);
                    var rowThree = parseInt($('#_Q33_Q2_Q0').val(), 10);
                    var rowFour = parseInt($('#_Q33_Q3_Q0').val(), 10);
                    var oneCheck = $('#_Q33_Q0_Q0').val().length;
                    var twoCheck = $('#_Q33_Q1_Q0').val().length;
                    var threeCheck = $('#_Q33_Q2_Q0').val().length;
                    var fourCheck = $('#_Q33_Q3_Q0').val().length;
                    if(oneCheck < 1 || isNaN(rowOne))
                    {
                        var rowOne = "0";
                        $('#customSum').css("color", "red");
                    }
                    if(twoCheck < 1 || isNaN(rowTwo))
                    {
                        var rowTwo = "0";
                        $('#customSum').css("color", "red");
                    }
                    if(threeCheck < 1 || isNaN(rowThree))
                    {
                        var rowThree = "0";
                        $('#customSum').css("color", "red");
                    }
                    if(fourCheck < 1 || isNaN(rowFour))
                    {
                        var rowFour = "0";
                        $('#customSum').css("color", "red");
                    }
                    var sumOne = parseInt(rowOne, 10) + parseInt(rowTwo, 10) + parseInt(rowThree, 10) + parseInt(rowFour, 10);
                    if(rowOne >= 0 || rowOne <= 0 || rowTwo >= 0 || rowTwo <= 0 || rowThree >= 0 || rowThree <= 0 || rowFour >= 0 || rowFour <= 0)
                    {
                        $('#customSum').css("background-color", "#e5f2fb");
                        $('#customSum').css("color", "green");
                        $('#customSum').text(sumOne);
                        $('#_Q33_Q0_Q0').css("background-color", "#e5f2fb");
                        $('#_Q33_Q1_Q0').css("background-color", "#e5f2fb");
                        $('#_Q33_Q2_Q0').css("background-color", "#e5f2fb");
                        $('#_Q33_Q3_Q0').css("background-color", "#e5f2fb");
                        if(oneCheck > 0 && twoCheck > 0 && threeCheck > 0 && fourCheck > 0)
                        {
                            if(rowOne >= 0 || rowOne <= 0 || rowTwo >= 0 || rowTwo <= 0 || rowThree >= 0 || rowThree <= 0 || rowFour >= 0 || rowFour <= 0)
                            {
                                $('#customSum').text(sumOne);
                                $('#topFour').html('<img src="http://surveys.researchresults.com/legacy/259/0067/checkmark.png">');
                                $('#topFour').css("background-image", "http://surveys.researchresults.com/legacy/259/0067/checkmark.png");
                                $('#topFour').css("background", "url(/checkmark.png) no-repeat");
                            }
                        }
                    }
                }
\$\endgroup\$
  • \$\begingroup\$ Thank you for updating my post Jamal, should I re-post to potentially get someone to condense my code? I do plan I having a go at it myself but would like to see other ideas and best practices. \$\endgroup\$ – Alexander Dixon Jul 16 '15 at 20:32
0
\$\begingroup\$

jQuery offers concise DOM targeting and JavaScript has a very powerful function called setInterval(). When both are setup to compliment each other with the task of recognizing element states and user triggered events, it is possible to scale down large code iterations that stack when trying to account for multiple scenarios (unpredictable user input). I basically created one conditional statement that will check what state the input fields are in and run validation that sums all numeric input and returns the value in the last row. If all fields are numerical, a check box is displayed to give a more complete UI experience. I gladly welcome any additional feedback here on where my code could be more refined.

//Code Review 07-19-2015
//Reduce large lines of code by utilizing arrays, each, for, on change and setInterval
//Please ignore rows "B." & "C." as they are not the focus of this exercise.
//-Dynamically Add Input Count - Dixon, Alexander 2015
//Currently 53 lines down from 312. The "for" loop method was not utilized. Original found: https://jsfiddle.net/dixalex/d375u6Ln/

$('#customSum').closest('table').find('tr td:nth-child(2) input[type=text]').not(':last').addClass('rowA').css("border", "solid 1px black");

var checkValid = setInterval( function() {
    $("input.rowA").each(function(i){
        var totals = [0,0,0,0];
        var total = 0;
        if($('input.complete').length == $('input.rowA').length)
        {
            $('#topFour').html('<img src="http://www.alexldixon.com/images/checkmark.png">');
            $("input.rowA").each(function(i){
                $(this).css({"background-color": "#ffe", "border": "1px solid green", "border-left": "5px solid green"}).addClass("complete");
                items = $('input.rowA:eq(' + i + ')').val();
                if(!items.match(/^\d+$/))
                {
                    items = 0;
                    $('.rowA').on("keypress change", function(evt) {
                        $(this).css({"background-color": "#ffe", "border": "1px solid red", "border-left": "5px solid red"}).removeClass("complete");
                    });
                }
                items = parseInt($('input.rowA:eq(' + i + ')').val(), 10);
                totals.push(items);
            });
            total = 0; //ADD SUM LOGIC HERE: http://stackoverflow.com/questions/1230233/how-to-go-through-an-array-and-add-their-values (Tyler Carter)
            $.each(totals,function() {
                total += this;
            });
            $('#customSum').text(total);
        } else {
            $('#topFour').html('');
            totals = [0,0,0,0];
            $("input.rowA").each(function(i){
                var items = $('input.rowA:eq(' + i + ')').val();
                if(!items.match(/^\d+$/)) //Regular Expressions Source: http://www.regexlib.com/RETester.aspx?regexp_id=669
                {
                    items = 0;
                    $('.rowA').on("keypress change", function(evt) {
                        $(this).css({"background-color": "#ffe", "border": "1px solid red", "border-left": "5px solid red"}).removeClass("complete");
                    });
                } else {
                    items = parseInt($('input.rowA:eq(' + i + ')').val(), 10);
                    $(this).css({"background-color": "#ffe", "border": "1px solid green", "border-left": "5px solid green"}).addClass("complete");
                }
                totals.push(items);
            });
            total = 0; //ADD SUM LOGIC HERE: http://stackoverflow.com/questions/1230233/how-to-go-through-an-array-and-add-their-values (Tyler Carter)
            $.each(totals,function() {
                total += this;
            });
            $('#customSum').text(total);
        }
    });
}, 120);
$('#customSum').closest('table').find("td:contains('C.'), tr td:contains('B.')").closest('tr').toggle();

jsFiddle Demo

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.