three-param-form

<!DOCTYPE html>
<html>

<!--
    Example using (hopefully) unobtrusive JavaScript to verify
        that a form is filled in before it will be permitted
        to be submitted
    by: Sharon Tuttle
    last modified: 2-20-13
-->

<head>  
    <title> Form for (eventually) ThreeParams servlet </title>
    <meta charset="utf-8" />

    <link href="three-param-form.css" type="text/css" 
          rel="stylesheet" />

    <script type="text/javascript">

        // attach an onsubmit attribute to this page's form
        //    to make sure its fields have something in them
        //    prior to allowing it to be submitted

        window.onload =
            function()
            {
                var parameterForm = document.getElementById("paramForm");
                parameterForm.onsubmit = allFilled;

                // below is an alternative that you can set
                //    onsubmit to, with the same results
                /*
                    function()
                    {
                        return allFilled();
                    };
                */
            };
           
        // signature: function: allFilled: void -> Boolean
        // purpose: expects nothing, and returns true if the
        //     three textfields with the specified id attributes
        //     have something in them when this is called,
        //     and pops up an explanatory alert box and returns
        //     false if any of the textfields are empty
 
        function allFilled()
        {
            var param1Field = document.getElementById("param1");
            var param2Field = document.getElementById("param2");
            var param3Field = document.getElementById("param3");

            var val1 = param1Field.value;
	    var val2 = param2Field.value;
	    var val3 = param3Field.value;

            var result;

            if ((!val1) || (!val2) || (!val3))
            {
                alert("must fill in all fields before submit!");
                result = false;
            }
    
            else
            {
                result = true;
            }

            return result;
        }
    </script>

</head> 

<body> 
   <noscript>
        <p class="error">
        Your browser does not support JavaScript, or 
        has it disabled;
        this page will not behave as it should.
        </p>
        <hr />
    </noscript>

    <h1> Form for ThreeParams servlet (eventually!) </h1>

    <form action="http://users.humboldt.edu/smtuttle" id="paramForm" >
    <fieldset>
        <legend>Enter Parameters for Servlet</legend>
        <label class="heading" for="param1">Parameter 1:</label>
        <input type="text" name="first" id="param1" /> <br />

        <label class="heading" for="param2">Parameter 2:</label>
        <input type="text" name="second" 
               class="right" id="param2" value="13" /> <br />

        <label class="heading" for="param3">Parameter 3:</label>
        <input type="text" name="third" id="param3" /> <br />

        <input type="submit" value="submit values" />
    </fieldset>
</form>

    <hr />   

    <p>
        <a href="http://validator.w3.org/check/referer">
        Validate this HTML5 page
        </a>
    </p>

    <p>
        For full credit, this page must also pass the tests at
        <a href="http://lint.brihten.com/html/">
        http://lint.brihten.com/html/ </a> when its URL is
        entered (and without modifying the default options).
    </p>

    <p>
        <a href=
           "http://jigsaw.w3.org/css-validator/check/referer?profile=css3">
            <img src="http://jigsaw.w3.org/css-validator/images/vcss" 
                 alt="Valid CSS3!" height="31" width="88" />
        </a>
    </p>

</body> 
</html>