Mikes sec dem CSCI-E3: Project Unit3b - Form Fun

Fun with form data.

by Lucille Kenney

HTML

<form id="myForm" method="GET" action="#">
    <input type="button" id="showForm" name="showForm" value="Show Form" />
    <div id="formDiv">
        <p>
            Does this word (<input type="text" id="firstWord" name="firstWord" value="word 1" />) match this word (<input type="text" id="secondWord" name="secondWord" value="word 2" />)? <span id="answer1">No!</span>
        </p>
        <p>
            Reformat 9 digits (in a row) to xxx-xx-xxxx:
            <br />
            <input type="text" id="nineDigits" name="nineDigits" value="" />
            <br />
            <span id="answer2">Need 9 digits (in a row)</span>
        </p>
        <p>
            Count characters in this box:
            <br />
            <textarea id="countBox" name="countBox" cols="20" rows="5"></textarea>
            <br />
            <span id="answer3">0</span> characters
        </p>
    </div>
    
    
</form>

CSS

#formDiv {
    display: none;
}

JavaScript

function displayForm() {
    console.log("Displaying form.");
    
    // Display the form
    document.getElementById("formDiv").style.display = "block";
}

function wordMatch() {
    console.log("Matching words.");
    
    // Grab the necessary elements
    var word1 = document.getElementById("firstWord").value;
    var word2 = document.getElementById("secondWord").value;
    var output=document.getElementById("answer1");
    
    // Check to see if words match. If yes,
    // print "Yes!" in output element; otherwise
    // print "No!"
    // (Print to span with id of "answer1")
    if (word1 === word2) {
        output.innerHTML = "Yes!";
    } else {
        output.innerHTML = "No!";
    }
}

function reformat() {
    console.log("Reformatting digits.");
    
    //Grab the necessary elements and/or values
    var theDigits = document.getElementById("nineDigits").value;    
    var output=document.getElementById("answer2");

    // If we have nine digits, print out
    // digit in xxx-xx-xxxx format; otherwise
    // print out "Need 10 digits (in a row)" 
    // (Print to span with id of "answer2")
    if (theDigits.match(/^(\d{3})(\d{3})(\d{4})$/)) {
        output.innerHTML = theDigits.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');
    } else {
        output.innerHTML =  "Need 10 digits (in a row)";
    }
    
}

function countCharacters() {
    console.log("Counting characters.");
    
    // Grab the necessary elements and/or values
    var input = document.getElementById("countBox").value;
    var output = document.getElementById("answer3");
    
    // Count characters and output them to span with
    // id of "answer3"
    output.innerHTML = input.length;
}


// Add event handlers
document.getElementById("showForm").onclick = displayForm;
document.getElementById("firstWord").onchange = wordMatch;
document.getElementById("secondWord").onchange = wordMatch;

document.getElementById("nineDigits").onkeyup =...