form_practice

<!DOCTYPE html>
<html>
<!-- Name: Tylor McLaughlin
     Description: This html page was created as part of an exercise to get more familiar with Forms and page layouts
     Date: September 30, 2015
-->
    <head>
        <title>SET Registration</title>
        <style>
            html, body, form {
                height: 100%;
            }

            td.odd {
                background-color: gray;
            }
        </style>

        <script>
            //This function creates the appropriate set of checkboxes for the user to see based on what radio
            //button is currently selected.
            function displayOptions()
            {
                var options = document.getElementsByName("occupation");

                for(var elem in options)
                {
                    if(options[elem].checked)
                    {
                        if (options[elem].value == "student")
                        {
                            document.getElementById("details_txt").innerHTML = '' +
                                "<input name='it_check' type='checkbox' value='it'>Student in Information Technology<br>" +
                                "<input name='laptop_check' type='checkbox' value='laptop'>Owns a laptop<br>" +
                                "<input name='bus_check' type='checkbox' value='bus'>Takes bus to school<br>" +
                                "<input name='music_check' type='checkbox' value='music'>Owns a portable music player";
                        }
                        else if (options[elem].value == "faculty")
                        {
                            document.getElementById("details_txt").innerHTML = '' +
                            '<input name="eng_check" type="checkbox" value="eng">Teaches in Engineering<br>' +
                            '<input name="car_check" type="checkbox" value="car">Drives car to work<br>' +
                            '<input name="lunch_check" type="checkbox" value="lunch">Brings lunch<br>';
                        }
                    }
                }
            }

            function resetForm()
            {
                document.getElementById("deets").reset();
                document.getElementById("name_err").innerHTML = "";
                document.getElementById("street_err").innerHTML = "";
                document.getElementById("city_err").innerHTML = "";
                document.getElementById("prov_err").innerHTML = "";
                document.getElementById("postal_err").innerHTML = "";
                document.getElementById("type_err").innerHTML = "";
                document.getElementById("details_err").innerHTML = "";
                displayOptions();
            }

            //This method is called before the form is submitted to validate the format of the postal code
            function checkForm()
            {
                //According to https://regex101.com/ this regex works as intended
                var postalcode_check = new RegExp(/^[ABCEGHJKLMNPRSTVXY]\d[ABCEGHJKLMNPRSTVWXYZ]( )?\d[ABCEGHJKLMNPRSTVWXYZ]\d$/i);

                //This seems to be getting skipped, so as long as the postal code field is not left empty, the form
                //will be submitted. Really have no idea why. It did work at one point. Tried a lot of things to get
                //the "required" attribute to work with a Submit button because form.submit doesn't actually check for the
                //"required" attribute. I don't know why the form gets submitted if the postal code doesn't fit the regex.
                if (postalcode_check.test(document.getElementByName("postalcode_box").value))
                {
                    return true;
                }
                else
                {
                    document.getElementById("postal_err").innerHTML = "Please enter a valid postal code.";
                    return false;
                }

                return false;
            }
        </script>
    </head>
    <body>
        <form id="deets" action="testRequest.asp" onsubmit="return checkForm()" method="GET">
            <div style="height:20%; width:100%;"></div>
            <!-- Turns out any input that isn't given a name attribute won't get passed on submit... -->
            <table id="content" align="center" style="table-layout: fixed; width: 100%">
                <tr>
                    <td id="name_err" width="15%"></td>
                    <td id="name_lbl" width="15%" align="right">Name:</td>
                    <td id="name_txt" width="15%"><input name="name_box" type="text" required></td>
                    <td id="name_blank" width="15%"></td>
                </tr>
                <tr>
                    <td id="street_err" width="15%"></td>
                    <td class="odd" id="street_lbl" width="15%" align="right">Street:</td>
                    <td class="odd" id="street_txt" width="15%"><input name="street_box" type="text" required></td>
                    <td id="street_blank" width="15%"></td>
                </tr>
                <tr>
                    <td id="city_err" width="15%"></td>
                    <td id="city_lbl" width="15%" align="right">City:</td>
                    <td id="city_txt" width="15%"><input name="city_box" type="text" required></td>
                    <td id="city_blank" width="15%"></td>
                </tr>
                <tr>
                    <td id="prov_err" width="15%"></td>
                    <td class="odd" id="prov_lbl" width="15%" align="right">Province:</td>
                    <td class="odd" id="prov_txt" width="15%">
                        <select name="prov_select">
                            <option value="AB">Alberta</option>
                            <option value="BC">British Columbia</option>
                            <option value="MB">Manitoba</option>
                            <option value="NB">New Brunswick</option>
                            <option value="NL">Newfoundland & Labrador</option>
                            <option value="NS">Nova Scotia</option>
                            <option value="NT">Northwest Territories</option>
                            <option value="NU">Nunavut</option>
                            <option value="ON" selected>Ontario</option>
                            <option value="PE">P.E.I.</option>
                            <option value="QC">Quebec</option>
                            <option value="SK">Saskatchewan</option>
                            <option value="YT">Yukon</option>
                        </select>
                    </td>
                    <td id="prov_blank" width="15%"></td>
                </tr>
                <tr>
                    <td id="postal_err" color="red" width="15%"></td>
                    <td id="postal_lbl" width="15%" align="right">Postal Code:</td>
                    <td id="postal_txt" width="15%"><input name="postalcode_box" type="text" required></td>
                    <td id="postal_blank" width="15%"></td>
                </tr>
                <tr>
                    <td id="type_err" width="15%"></td>
                    <td class="odd" id="type_lbl" width="15%" align="right">Occupation:</td>
                    <td class="odd" id="type_txt" width="15%">
                        <input id="student" name="occupation" type="radio" value="student" onchange="displayOptions()" checked>Student
                        <input id="faculty" name="occupation" type="radio" value="faculty" onchange="displayOptions()">Faculty
                    </td>
                    <td id="type_blank" width="15%"></td>
                </tr>
                <tr>
                    <td id="details_err" width="15%"></td>
                    <td id="details_lbl" width="15%" align="right">Additional information:</td>
                    <td id="details_txt" width="15%" style="word-wrap: break-word;">
                        <input name="it_check" type="checkbox" value="it">Student in Information Technology <br>
                        <input name="laptop_check" type="checkbox" value="laptop">Owns a laptop<br>
                        <input name="bus_check" type="checkbox" value="bus">Takes bus to school<br>
                        <input name="music_check" type="checkbox" value="music">Owns a portable music player
                    </td>
                    <td id="details_blank" width="15%"></td>
                </tr>
                <tr>
                    <td id="buttons_err" width="15%"></td>
                    <td id="buttons_lbl" width="15%"></td>
                    <td id="buttons_txt" width="15%" align="right">
                        <input id="reset_btn" type="button" value="Reset" onclick="resetForm()">
                        <input type="submit" value="Submit">
                    </td>
                    <td id="buttons_blank" width="15%"></td>
                </tr>
            </table>
        </form>
    </body>
</html>