interactiveTable.html

<!DOCTYPE html>
<!--
File: http://weblab.cs.uml.edu/~rabdelaz/weblab/interactiveTable.html
Rajia M. Abdelaziz, Rajia.Abdelaziz@gmail.com, UMass Lowell Undergraduate 
    Enrolled in 91.461 GUI Programming
Created by RMA on October 17, 2015 at 9:45 AM
Last Updated: 10/20/15 at 4:00 p.m
This page contains a table created dynamically based on parameters entered in an 
HTML form. 
-->
<html>
    <head>
        <title>Assignment 6</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!--This external css file is used to style the content of the page. -->
        <link rel="stylesheet" href="form.css">
        <!--The following script loads the JQuery library and was displayed in Professor Heines Notes -->
        <!-- 
            Load jQuery library from the Google Content Delivery Network (CDN)
            see http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/
            however, note that you obviously must be online for this to work
            alternatively, you can download jQuery and store it locally from
               http://jquery.com/download/
        -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>        
    </head>
    <body>
        <h1>Assignment 6: Creating an Interactive Dynamic Table</h1>
        <h2>Please Fill Out the Form:</h2>
        
        <!--The form has four text-fields allowing the user to enter the range
        of the multiplicand and the range of the multiplier. It also has a submit
        button allowing them to enter the data.-->
        <form id="myForm" action="" method="get" onsubmit="return validateForm()">
            <br>
            <!--Input for Multiplier 1 -->
            <div>
                <label for="multiplier1" class="label">Multiplier 1:</label>
                <br>
                <input name="multiplier1" type="text" id="multiplier1" size="36">
            </div>
            <br>
            <!--Input for Multiplier 2-->
            <div>
                <label for="multiplier2" class="label">Multiplier 2:</label>
                <br>
                <input name="multiplier2" type="text" id="multiplier2" size="36">
            </div>
            <br>
            <!--Input for Multiplicand 1 -->
            <div>
                <label for="multiplicand1" class="label">Multiplicand 1:</label>
                <br>
                <input name="multiplicand1" type="text" id="multiplicand1" size="36">
            </div>
            <br>
            <!--Input for Multiplicand 2 -->
            <div>
                <label for="multiplicand2" class="label">Multiplicand 2:</label>
                <br>
                <input name="multiplicand2" type="text" id="multiplicand2" size="36">
            </div>
            <br>
            <!--Submit Button -->
            <br>
            <div>
                <input type="submit" value="Submit">
            </div>  
        </form> 
        
        <script>
            //Variable Declerations
            var para;
            var table;
            var th; 
            var tr;
            
            /* This function is called when the submit button is pressed. */
            function validateForm(){
                //Get the values the user entered and store them in variables
                var multiplicand1 = document.forms["myForm"]["multiplicand1"].value;
                var multiplicand2 = document.forms["myForm"]["multiplicand2"].value;
                var multiplier1 = document.forms["myForm"]["multiplier1"].value;
                var multiplier2 = document.forms["myForm"]["multiplier2"].value;
                
                //Check to see if the user forgot to fill out a field
                if(multiplicand1 === null || multiplicand1 === "" ){
                    alert("Error: Multiplicand 1 is NOT Filled In.");
                    return false;
                }
                if(multiplicand2 === null || multiplicand2 === ""){
                    alert("Error: Multiplicand 2 is NOT filled in.");
                    return false;
                }
                if(multiplier1 === null || multiplier1 === ""){
                    alert("Error: Multiplier 1 is NOT filled in.");
                    return false;
                }
                if(multiplier2 === null || multiplier2 === ""){
                    alert("Error: Multiplier 2 is NOT Filled In.");
                    return false;
                }
                
                //Check to see if any of the values the user entered are not a number
                if(isNaN(multiplicand1)){
                    alert("Error: Multiplicand 1 is NOT a number.");
                }
                if(isNaN(multiplicand2)){
                    alert("Error: Multiplicand 2 is NOT a number.");
                }
                if(isNaN(multiplier1)){
                    alert("Error: Multiplier 1 is NOT a number.");
                }
                if(isNaN(multiplier2)){
                    alert("Error: Multiplier 2 is NOT a number.");
                }
                
                //Display the values the user entered.
                displayMultiplicands("Multipliers: ", multiplier1, multiplier2);
                displayMultipliers("Multiplicands: ", multiplicand1, multiplicand2);
                
                //Check to see if multiplicand1 is less than multiplicand2, if so swap them. 
                if(multiplicand1>multiplicand2){
                    var temp1;
                    temp1 = multiplicand1;
                    multiplicand1 = multiplicand2;
                    multiplicand2 = temp1;
                }
                
                //Check to see if multiplier1 is less than multiplier2, if so swap them. 
                if(multiplier1>multiplier2){
                    var temp2;
                    temp2 = multiplier1;
                    multiplier1 = multiplier2;
                    multiplier2 = temp2;
                }
                
                //Create and Display the Interactive Table
                createAndDisplayTable(multiplicand1, multiplicand2, multiplier1, multiplier2);
                return false; 
            }
            
            //This function displays the multiplicands.
            function displayMultiplicands(name, m1, m2){
                var strContent = "";
                //Creates Dynamic content from JSON
                strContent += "<p>" + name + " " + m1 + " and " + m2 + "</p>" ;
                jQuery("#multiplicandContent").html( strContent ) ;
            }
            
            //This function displays the multipliers.
            function displayMultipliers(name, m1, m2){
                var strContent = "";
                //Creates Dynamic content from JSON
                strContent += "<p>" + name + " " + m1 + " and " + m2 + "</p>" ;
                jQuery("#multiplierContent").html( strContent ) ;
            }

            /*This function creatse a table to display the data.
            It uses the functions createElement, createTextNode and appendChild
            These were modeled after tutorials from w3schools.com . 
            Source: http://www.w3schools.com/jsref/met_document_createelement.asp */
            function createAndDisplayTable(rowStart, rowEnd, columnStart, columnEnd){
                table = document.createElement('table');
                table.id = "interactiveTable";
                th = document.createElement('tr');
                //Create the header row
                for (var k = columnStart-1; k <= columnEnd; k++){
                        if(k>=columnStart){
                            var tdh = document.createElement('td');
                            var headerText = document.createTextNode(' ' + k + ' ');
                            tdh.appendChild(headerText);
                            th.appendChild(tdh);
                            th.id = "header";
                        }else{ //This is the first cell, it should be empty.
                            var tdh = document.createElement('td');
                            var headerText = document.createTextNode(' ');
                            tdh.appendChild(headerText);
                            th.appendChild(tdh);
                            th.id = "header";
                        }
                }
                table.appendChild(th);
                //Create the Table Rows 
                for (var i = rowStart; i <= rowEnd; i++){
                    tr = document.createElement('tr');
                    var tIndex = document.createElement('td');
                    var indexText = document.createTextNode(' ' + i + ' ');
                    tIndex.appendChild(indexText);
                    tIndex.id = "header";
                    tr.appendChild(tIndex);
                    //Every other row should be styled differently
                    if(i % 2){
                        tr.id = "normal";
                    }else{
                        tr.id = "alt";
                    }
                    //Create Columns
                    for(var j=columnStart; j<=columnEnd; j++){
                        var td1 = document.createElement('td');
                        var text1 = document.createTextNode(' ' + i*j + ' ');
                        td1.appendChild(text1);
                        tr.appendChild(td1);
                    }
                    table.appendChild(tr);
                }
                document.body.appendChild(table); 
                jQuery("#tableContent").html( table ) ;
            }
        </script>
        <h3>The Values You Entered are: </h3>
        <div id="multiplicandContent"></div>
        <div id="multiplierContent"></div>
        <div id="tableContent"></div>
    </body>
</html>