MathRiddles2 Example

Required Example -- Source Code

HTML Page -- index.htm

 <!DOCTYPE html>

<!-- Required Example 
Source code file: index.htm -->

<html lang="en">
    <head>
        <meta content="text/html; charset=utf-8" 
              http-equiv="Content-Type">
        <title>Required Example</title>
        <link rel="stylesheet" href="styles.css">
        <script src="script.js"></script>
    </head>
    <body>
        <h1>Required Example</h1>
        <p>Both amount1 and amount2 are required fields</p>

        <!-- Submit form with method POST. -->
        <form id="form1"
              action="http://ectweb.cs.depaul.edu/sjost/receipt.php"
              method="POST">
            <label for="amount1">
                Enter Numeric Value for Amount1:
            </label><br>
            <input type="number" id="amount1" 
                   name="amount1"><br>
            <span id="notify">Amount1 cannot be empty.</span>
            <br><br>

            <label for="amount2">
                Enter Numeric Value for Amount2:
            </label><br>
            <!-- amount2 is a required field. -->
            <input type="number" id="amount2" 
                   name="amount2" required><br><br>

            <input type="submit" value="Submit Form">
        </form>
    </body>
</html>

CSS Sheet -- styles.css

/* Styles for Required Example 
Source code file: styles.css */

body    { background-color: #E0E0FF; color: #000080; 
          font-family: Tahoma, Verdana, sans-serif; }
h1      { color: #800000; }
#notify { color: #FF0000; display: none; }

JavaScript Script -- script.js

// Required Example
// Source code file: script.js

function showNotification(ev) {
    var spanObj = document.querySelector("#notify");
    var amount1 = document.querySelector("#amount1").value;
    spanObj.style.display = amount1 ? "none" : "block";
    console.log(amount1);
    if (amount1.valueOf( ) == "") {
        ev.preventDefault( );
    }
}

function init( ) {
    var form1 = document.querySelector("#form1");
    form1.addEventListener("submit", showNotification);
}

window.addEventListener("load", init);