What is a better way of writing this code? (JQuery which displays x list form rows based on a number entered by the user).

Question

I'm working with a SharePoint 2013 NewForm. The list it relates to contains fields to hold information about batch files that being submitted, 4 fields per file. (So if 2 files are being submitted, then I need to display 4 fields per file => 8 fields)

I start by getting the number of files that are being submitted. Then I display all the rows that are needed to for that number of files.

I'm a beginner at this. The code below works but it's so clunky. What is a better way of doing it?

    //display the correct number of batch info rows

$("input[title='How many batches have you split the job into? Required Field']").change(function(){
    var numberPages = $('input[title="How many batches have you split the job into? Required Field"]').val();
    //convert the string to a number
    var n = Math.floor(Number(numberPages));
    //check to see if the number is NaN (not a number)
    if (isNaN(n)) {
        alert("Please enter a number"); 
    //If it is a number, display the correct number of rows, and hide the ones that are not needed (user may change their input to a lower number)
    } else if (n == 1) {
            $('nobr:contains("Batch 1 File name")').closest('tr').show();
            $('nobr:contains("Batch 1 - number of letters in batch")').closest('tr').show();
            $('nobr:contains("Batch 1 First name and address")').closest('tr').show();
            $('nobr:contains("Batch 1 Last name and address")').closest('tr').show();
            $('nobr:contains("Batch 2 File name")').closest('tr').hide();
            $('nobr:contains("Batch 2 - number of letters in batch")').closest('tr').hide();
            $('nobr:contains("Batch 2 First name and address")').closest('tr').hide();
            $('nobr:contains("Batch 2 Last name and address")').closest('tr').hide();
            $('nobr:contains("Batch 3 File name")').closest('tr').hide();
            $('nobr:contains("Batch 3 - number of letters in batch")').closest('tr').hide();
            $('nobr:contains("Batch 3 First name and address")').closest('tr').hide();
            $('nobr:contains("Batch 3 Last name and address")').closest('tr').hide();
            $('nobr:contains("Batch 4 File name")').closest('tr').hide();
            $('nobr:contains("Batch 4 - number of letters in batch")').closest('tr').hide();
            $('nobr:contains("Batch 4 First name and address")').closest('tr').hide();
            $('nobr:contains("Batch 4 Last name and address")').closest('tr').hide();
            $('nobr:contains("Batch 5 File name")').closest('tr').hide();
            $('nobr:contains("Batch 5 - number of letters in batch")').closest('tr').hide();
            $('nobr:contains("Batch 5 First name and address")').closest('tr').hide();
            $('nobr:contains("Batch 5 Last name and address")').closest('tr').hide();
            $('nobr:contains("Batch 6 File name")').closest('tr').hide();
            $('nobr:contains("Batch 6 - number of letters in batch")').closest('tr').hide();
            $('nobr:contains("Batch 6 First name and address")').closest('tr').hide();
            $('nobr:contains("Batch 6 Last name and address")').closest('tr').hide();
    } else if (n == 2) {
            $('nobr:contains("Batch 1 File name")').closest('tr').show();
            $('nobr:contains("Batch 1 - number of letters in batch")').closest('tr').show();
            $('nobr:contains("Batch 1 First name and address")').closest('tr').show();
            $('nobr:contains("Batch 1 Last name and address")').closest('tr').show();
            $('nobr:contains("Batch 2 File name")').closest('tr').show();
            $('nobr:contains("Batch 2 - number of letters in batch")').closest('tr').show();
            $('nobr:contains("Batch 2 First name and address")').closest('tr').show();
            $('nobr:contains("Batch 2 Last name and address")').closest('tr').show();
            $('nobr:contains("Batch 3 File name")').closest('tr').hide();
            $('nobr:contains("Batch 3 - number of letters in batch")').closest('tr').hide();
            $('nobr:contains("Batch 3 First name and address")').closest('tr').hide();
            $('nobr:contains("Batch 3 Last name and address")').closest('tr').hide();
            $('nobr:contains("Batch 4 File name")').closest('tr').hide();
            $('nobr:contains("Batch 4 - number of letters in batch")').closest('tr').hide();
            $('nobr:contains("Batch 4 First name and address")').closest('tr').hide();
            $('nobr:contains("Batch 4 Last name and address")').closest('tr').hide();
            $('nobr:contains("Batch 5 File name")').closest('tr').hide();
            $('nobr:contains("Batch 5 - number of letters in batch")').closest('tr').hide();
            $('nobr:contains("Batch 5 First name and address")').closest('tr').hide();
            $('nobr:contains("Batch 5 Last name and address")').closest('tr').hide();
            $('nobr:contains("Batch 6 File name")').closest('tr').hide();
            $('nobr:contains("Batch 6 - number of letters in batch")').closest('tr').hide();
            $('nobr:contains("Batch 6 First name and address")').closest('tr').hide();
            $('nobr:contains("Batch 6 Last name and address")').closest('tr').hide();
    } else if (n == 3) {
            $('nobr:contains("Batch 1 File name")').closest('tr').show();
            $('nobr:contains("Batch 1 - number of letters in batch")').closest('tr').show();
            $('nobr:contains("Batch 1 First name and address")').closest('tr').show();
            $('nobr:contains("Batch 1 Last name and address")').closest('tr').show();
            $('nobr:contains("Batch 2 File name")').closest('tr').show();
            $('nobr:contains("Batch 2 - number of letters in batch")').closest('tr').show();
            $('nobr:contains("Batch 2 First name and address")').closest('tr').show();
            $('nobr:contains("Batch 2 Last name and address")').closest('tr').show();
            $('nobr:contains("Batch 3 File name")').closest('tr').show();
            $('nobr:contains("Batch 3 - number of letters in batch")').closest('tr').show();
            $('nobr:contains("Batch 3 First name and address")').closest('tr').show();
            $('nobr:contains("Batch 3 Last name and address")').closest('tr').show();
            $('nobr:contains("Batch 4 File name")').closest('tr').hide();
            $('nobr:contains("Batch 4 - number of letters in batch")').closest('tr').hide();
            $('nobr:contains("Batch 4 First name and address")').closest('tr').hide();
            $('nobr:contains("Batch 4 Last name and address")').closest('tr').hide();
            $('nobr:contains("Batch 5 File name")').closest('tr').hide();
            $('nobr:contains("Batch 5 - number of letters in batch")').closest('tr').hide();
            $('nobr:contains("Batch 5 First name and address")').closest('tr').hide();
            $('nobr:contains("Batch 5 Last name and address")').closest('tr').hide();
            $('nobr:contains("Batch 6 File name")').closest('tr').hide();
            $('nobr:contains("Batch 6 - number of letters in batch")').closest('tr').hide();
            $('nobr:contains("Batch 6 First name and address")').closest('tr').hide();
            $('nobr:contains("Batch 6 Last name and address")').closest('tr').hide();
    } else if (n == 4) {
            $('nobr:contains("Batch 1 File name")').closest('tr').show();
            $('nobr:contains("Batch 1 - number of letters in batch")').closest('tr').show();
            $('nobr:contains("Batch 1 First name and address")').closest('tr').show();
            $('nobr:contains("Batch 1 Last name and address")').closest('tr').show();
            $('nobr:contains("Batch 2 File name")').closest('tr').show();
            $('nobr:contains("Batch 2 - number of letters in batch")').closest('tr').show();
            $('nobr:contains("Batch 2 First name and address")').closest('tr').show();
            $('nobr:contains("Batch 2 Last name and address")').closest('tr').show();
            $('nobr:contains("Batch 3 File name")').closest('tr').show();
            $('nobr:contains("Batch 3 - number of letters in batch")').closest('tr').show();
            $('nobr:contains("Batch 3 First name and address")').closest('tr').show();
            $('nobr:contains("Batch 3 Last name and address")').closest('tr').show();
            $('nobr:contains("Batch 4 File name")').closest('tr').show();
            $('nobr:contains("Batch 4 - number of letters in batch")').closest('tr').show();
            $('nobr:contains("Batch 4 First name and address")').closest('tr').show();
            $('nobr:contains("Batch 4 Last name and address")').closest('tr').show();
            $('nobr:contains("Batch 5 File name")').closest('tr').hide();
            $('nobr:contains("Batch 5 - number of letters in batch")').closest('tr').hide();
            $('nobr:contains("Batch 5 First name and address")').closest('tr').hide();
            $('nobr:contains("Batch 5 Last name and address")').closest('tr').hide();
            $('nobr:contains("Batch 6 File name")').closest('tr').hide();
            $('nobr:contains("Batch 6 - number of letters in batch")').closest('tr').hide();
            $('nobr:contains("Batch 6 First name and address")').closest('tr').hide();
            $('nobr:contains("Batch 6 Last name and address")').closest('tr').hide();
    } else if (n == 5) {
            $('nobr:contains("Batch 1 File name")').closest('tr').show();
            $('nobr:contains("Batch 1 - number of letters in batch")').closest('tr').show();
            $('nobr:contains("Batch 1 First name and address")').closest('tr').show();
            $('nobr:contains("Batch 1 Last name and address")').closest('tr').show();
            $('nobr:contains("Batch 2 File name")').closest('tr').show();
            $('nobr:contains("Batch 2 - number of letters in batch")').closest('tr').show();
            $('nobr:contains("Batch 2 First name and address")').closest('tr').show();
            $('nobr:contains("Batch 2 Last name and address")').closest('tr').show();
            $('nobr:contains("Batch 3 File name")').closest('tr').show();
            $('nobr:contains("Batch 3 - number of letters in batch")').closest('tr').show();
            $('nobr:contains("Batch 3 First name and address")').closest('tr').show();
            $('nobr:contains("Batch 3 Last name and address")').closest('tr').show();
            $('nobr:contains("Batch 4 File name")').closest('tr').show();
            $('nobr:contains("Batch 4 - number of letters in batch")').closest('tr').show();
            $('nobr:contains("Batch 4 First name and address")').closest('tr').show();
            $('nobr:contains("Batch 4 Last name and address")').closest('tr').show();
            $('nobr:contains("Batch 5 File name")').closest('tr').show();
            $('nobr:contains("Batch 5 - number of letters in batch")').closest('tr').show();
            $('nobr:contains("Batch 5 First name and address")').closest('tr').show();
            $('nobr:contains("Batch 5 Last name and address")').closest('tr').show();
            $('nobr:contains("Batch 6 File name")').closest('tr').hide();
            $('nobr:contains("Batch 6 - number of letters in batch")').closest('tr').hide();
            $('nobr:contains("Batch 6 First name and address")').closest('tr').hide();
            $('nobr:contains("Batch 6 Last name and address")').closest('tr').hide();

    } else if (n == 6) {
            $('nobr:contains("Batch 1 File name")').closest('tr').show();
            $('nobr:contains("Batch 1 - number of letters in batch")').closest('tr').show();
            $('nobr:contains("Batch 1 First name and address")').closest('tr').show();
            $('nobr:contains("Batch 1 Last name and address")').closest('tr').show();
            $('nobr:contains("Batch 2 File name")').closest('tr').show();
            $('nobr:contains("Batch 2 - number of letters in batch")').closest('tr').show();
            $('nobr:contains("Batch 2 First name and address")').closest('tr').show();
            $('nobr:contains("Batch 2 Last name and address")').closest('tr').show();
            $('nobr:contains("Batch 3 File name")').closest('tr').show();
            $('nobr:contains("Batch 3 - number of letters in batch")').closest('tr').show();
            $('nobr:contains("Batch 3 First name and address")').closest('tr').show();
            $('nobr:contains("Batch 3 Last name and address")').closest('tr').show();
            $('nobr:contains("Batch 4 File name")').closest('tr').show();
            $('nobr:contains("Batch 4 - number of letters in batch")').closest('tr').show();
            $('nobr:contains("Batch 4 First name and address")').closest('tr').show();
            $('nobr:contains("Batch 4 Last name and address")').closest('tr').show();
            $('nobr:contains("Batch 5 File name")').closest('tr').show();
            $('nobr:contains("Batch 5 - number of letters in batch")').closest('tr').show();
            $('nobr:contains("Batch 5 First name and address")').closest('tr').show();
            $('nobr:contains("Batch 5 Last name and address")').closest('tr').show();
            $('nobr:contains("Batch 6 File name")').closest('tr').show();
            $('nobr:contains("Batch 6 - number of letters in batch")').closest('tr').show();
            $('nobr:contains("Batch 6 First name and address")').closest('tr').show();
            $('nobr:contains("Batch 6 Last name and address")').closest('tr').show();
        } else {
            alert("If you need to do more than 6 batches, please submit more than one request.");
        }
}); 

Answer 1

Here's my shot at it. You always want to hide first, then show. This assumes there are no more fields with "Batch 1" than the four youve listed and the same with the other batch fields..

Why this works is jQuery will hide all the matching elements that are returned, you don't just have to have ONE element to hide, you can hide an array of elements with one line. see here: http://api.jquery.com/hide/

$("input[title='How many batches have you split the job into? Required Field']").change(function(){
    var numberPages = $('input[title="How many batches have you split the job into? Required Field"]').val();
    //convert the string to a number
    var n = Math.floor(Number(numberPages));
    //check to see if the number is NaN (not a number)
    if (isNaN(n)) {
        alert("Please enter a number"); 
    //If it is a number, display the correct number of rows, and hide the ones that are not needed (user may change their input to a lower number)
    } 
    else if(n >= 1 && n <= 6){
        $('nobr:contains("Batch")').closest('tr').hide();
        for(var i=1; i<=n; i++){
            $('nobr:contains("Batch ' + i.toString() + '")').closest('tr').show();
        }       
    }
     else {
            alert("If you need to do more than 6 batches, please submit more than one request.");
        }
}); 

Answer 2

You could try some Object Oriented Programming (OOP). From my understanding Javascript doesn't play too well with it, but it's manageable. There are a few different ways to do OOP in JS, and I'll show you one. Another is referenced here.

To do this, you make a "class" or object with the function(){} method, and put a constructor function inside. From there you can have internal or external functions, which can greatly reduce the amount of code and introduce flexibility. I'll add some code in this sort of design below, but it is very un-tested.

// Create the class
var Batches = function() {
    // Constructor function allows you to make a 'new' object, and have input values as well.
    var constructor = function Batches( BatchNumber ) {
       // Thoese two functions are callable from your declared objects below. They hide/show your Batch
        this.show = function() {
            $( 'nobr:contains("Batch ' + BatchNumber + ' File name")' ).closest( 'tr' ).show();
            $( 'nobr:contains("Batch ' + BatchNumber + ' - number of letters in batch")' ).closest( 'tr' ).show();
            $( 'nobr:contains("Batch ' + BatchNumber + ' First name and address")' ).closest( 'tr' ).show();
            $( 'nobr:contains("Batch ' + BatchNumber + ' Last name and address")' ).closest( 'tr' ).show();
        };

        this.show = function() {
            $( 'nobr:contains("Batch ' + BatchNumber + ' File name")' ).closest( 'tr' ).hide();
            $( 'nobr:contains("Batch ' + BatchNumber + ' - number of letters in batch")' ).closest( 'tr' ).hide();
            $( 'nobr:contains("Batch ' + BatchNumber + ' First name and address")' ).closest( 'tr' ).hide();
            $( 'nobr:contains("Batch ' + BatchNumber + ' Last name and address")' ).closest( 'tr' ).hide();
        };
    };
    // Returns the instance of your object so it can be stored in a variable
    return constructor;
};

// Create an array to hold each of your Batches
var BatchArray = [];

// Create a set of batches. CurrentBatchNumber is the n-th item in the array you'll make.
// NumberOfBatches is the number of items you'll have in your array. In this case you'd set
// NumberOfBatches to 6. Each batch can be referenced by the following:
//        BatchArray[i-1] where i is the Batch file you're referencing (JavaScript is 0 indexed)
for ( var CurrentBatchNumber = 0; CurrentBatchNumber < NumberOfBatches; CurrentBatchNumber++ ) {
    BatchArray.push( new Batches( CurrentBatchNumber ) );
}

// Check if n is a number or not. If it is, run some for loops.
if ( !isNaN( n ) ) {
   // This should show the first n items
    for ( var i = 0; i < n; i++ ) {
      BatchArray[i].show();
    }
    // This should hide the items after n.
    for ( var i = n; i < BatchArray.length; i++ ) {
      BatchArray[i].hide();      
    }
}

Reference to some concepts I mention:

1. Object Oriented Programming
2. Another JS OOP method
3. Zero Indexing

Remember, this is UNTESTED and don't promise it'll work... But this does have the core concept of OOP, which I believe could be adventageous for you.

Answer 3

Threw something quickly together. I'm a beginner myself so I think that there is so much more that could be simplified but this should be considered a start.

You might want to read about the following to make it even easier working with jQuery in SharePoint.

• SharePoint internal column names and how creating them with a different, more friendly internal name.
• jQuery Selectors
• Selecting multiple elements at the same time
• Case/Switch statements

Code:

<script language="javascript" type="text/javascript">
$( document ).ready(function() {

$('nobr:contains("Batch")').closest('tr').hide();

    $("input[id^='Title']").on('keyup', function(e){

        $('nobr:contains("Batch")').closest('tr').hide();
        var numberPages = $('input[id^="Title"]').val();
        //convert the string to a number
        var n = Math.floor(Number(numberPages));
        //check to see if the number is NaN (not a number)
        if (isNaN(n)) {
        alert("Please enter a number"); 
        //If it is a number, display the correct number of rows, and hide the ones that are not needed (user may change their input to a lower number)
        } 
        else if (n >= 1 && n <= 6) {
            $.each(new Array(n+1),
            function(n) {
                    $('nobr:contains("Batch '+n+'")').closest('tr').show();
            });
        }
        else {
            $('nobr:contains("Batch")').closest('tr').hide();
            alert("If you need to do more than 6 batches, please submit more than one request.");
        }
    }); 
});
</script>