Create a form that has the following fields: Name Address City Country (Please Select Country, US,...

Create a form that has the following fields:

Name
Address
City
Country (Please Select Country, US, Canada)
State/Province (Drop Down List)
Postal Code
Submit Button

Create two arrays of objects, one for US States, one for Canadian Provinces. The object should contain Name and Abbreviation. You don’t need to do all the states or provinces, just a few to make sure your code works. (3 OF EACH)

When the user selects either US or Canada, populate the drop down using the array of object. The first, default option should be “Please Select State” or “Please Select Province” depending on the selected country.

On Submitting the form, validate all form fields. Validate the Postal Code according to the rules for the selected country… US or Canada. You should do JavaScript Validation even if you use HTML5 controls

Follow good practices for JavaScript

Use the appropriate form controls from all the available form controls – HTML and HTML5.

Make the form accessible by using labels.

THIS IS TO DONE USING HTML/HTML5 AND JAVASCRIPT

Expert Solution

<!doctype html>
<html>
<head></head>
<body>
<form onsubmit="event.preventDefault(); validate(this)" action="#">
    <table>
        <tr>
            <td>
                <label for="Name">Name:</label>
            </td>
            <td>
                <input type="text" name="Name" class="Name" id="Name" value="">
            </td>
        </tr>
        <tr>
            <td>
                <label for="Name">Address:</label>
            </td>
            <td>
                <input type="text" name="Address" class="Address" id="Address" value="">
            </td>
        </tr>
        <tr>
            <td>
                <label for="Name">City:</label>
            </td>
            <td>
                <input type="text" name="City" class="City" id="City" value="">
            </td>
        </tr>
        <tr>
            <td>
                <label for="Country">Country:</label>
            </td>
            <td>
                <select class="Country" name="Country" id="Country" onchange="populate_state(this.value)">
                    <option value="0">Please Select Country</option>
                    <option value="1">US</option>
                    <option value="2">Canada</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <label for="State">State/Province:</label>
            </td>
            <td>
                <select class="State" name="State" id="State">
                    <option value="0">Please Select State</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <label for="Code">Postal Code:</label>
            </td>
            <td>
                <input type="text" name="Code" class="Code" id="Code" value="">
            </td>
        </tr>
        <tr>
            <td>
                <input type="submit" name="" value="Submit">
            </td>
        </tr>
    </table>
</form>
<p id="Error" ></p>
<script type="text/javascript">
            us = [
                {name: "Albama", abbr: "AL"},
                {name: "Alaska", abbr: "AK"},
                {name: "California", abbr: "CA"}
            ]
            canada = [
                {name: "Alberta", abbr: "AB"},
                {name: "British Columbia", abbr: "BC"},
                {name: "Manitoba", abbr: "MB"}
            ]

            function populate(obj) {
                let select = document.getElementById("State");
                select.options.length = 0;
                var el = document.createElement("option");
                el.textContent = "Please Select State";
                el.value = 0;
                select.appendChild(el);

                obj.forEach(o => {
                    var el = document.createElement("option");
                    el.textContent = o.name;
                    el.value = o.abbr;
                    select.appendChild(el);
                });
            }

            function populate_state(value) {
                if(value == 0) {
                    return;
                }
                else if (value == 1) {
                    populate(us);
                }
                else if (value == 2) {
                    populate(canada);
                }
            }

            function validate() {
                let name = document.getElementById("Name").value;
                let address = document.getElementById("Address").value;
                let city = document.getElementById("City").value;
                let country = document.getElementById("Country").selectedIndex;
                let state = document.getElementById("State").selectedIndex;
                let code = document.getElementById("Code").value;
                let error = document.getElementById("Error");

                if (!name) {
                    error.innerHTML = "Name required";
                }
                else if (!address) {
                    error.innerHTML = "Address required";
                }
                else if (!city) {
                    error.innerHTML = "City required";
                }
                else if (country == 0) {
                    error.innerHTML = "Select Country";
                }
                else if (state == 0) {
                    error.innerHTML = "Select State";
                }
                else if ((country == 1 && code.length != 5) || (country == 2 && code.length != 6)) {
                    error.innerHTML = "Enter Corrent Country Code (US: 5 characters | Canada: 6 characters)";
                }
                else {
                    error.innerHTML = "No Error : Form  Varified.";
                }
            }
        </script>
</body>
</html>

venereology answered 2 days ago

write program in java Create a class named PersonalDetails with the fields name and address. The...

write program in java Create a class named PersonalDetails with the fields name and address. The class should have a parameterized constructor and get method for each field.  Create a class named Student with the fields ID, PersonalDetails object, major and GPA. The class should have a parameterized constructor and get method for each field. Create an application/class named StudentApp that declare Student object. Prompts (GUI input) the user for student details including ID, name, address, major and GPA....

1) Create a table “college” that has as attributes name, city name, state/province/region name, country name,...

1) Create a table “college” that has as attributes name, city name, state/province/region name, country name, and year in which the college was established as well as an ID as primary key. Insert records for 5 colleges of your choice, including one or more you have attended. 2) Create a table “student” that has as attributes first name, last names, and college ID for students, and insert the names of yourself and friends who attended one or more colleges together...

sort by the following (name, address, dependent and gender) of these fields and ask the user...

sort by the following (name, address, dependent and gender) of these fields and ask the user which field to sort by !. this mean the following java must sort by address if we need, by name , by dependent , and by gender it depend on the following java it must have an option which we need to sort. please i need your help now, you just add the sorting on the following java. // Use a custom comparator. import...

Create a table with name “S_YOURStudentID” with the following fields with required constraints. Screenshots are to...

Create a table with name “S_YOURStudentID” with the following fields with required constraints. Screenshots are to be attached. For example, if your botho student id is 1212121, your table name should be “S_1212121”. Student id Student Name Age Gender City Course name Module Name Internal mark 1 Internal mark 2 Internal mark 3 Total internal mark Insert minimum 10 records/rows to the table. Input the data based on Question 5. Screenshots are to be attached. Create two users...

In C# please and thanks so much, Create an Employee class with five fields: first name,...

In C# please and thanks so much, Create an Employee class with five fields: first name, last name, workID, yearStartedWked, and initSalary. It includes constructor(s) and properties to initialize values for all fields. Create an interface, SalaryCalculate, class that includes two functions: first,CalcYearWorked() function, it takes one parameter (currentyear) and calculates the number of year the worker has been working. The second function, CalcCurSalary() function that calculates the current year salary. Create a Worker classes that is derived from Employee...

Create a table ‘StudentInfo’ with following fields: ID First Name Last Name SSN Date of Birth...

Create a table ‘StudentInfo’ with following fields: ID First Name Last Name SSN Date of Birth Create a table ‘ClassInfo’ table: ID Class Name Class Description Create a table ‘RegisteredClasses’ table: StudentID ClassID The RegisteredClasses table should have a foreign key relationship to StudentInfo and ClassInfo tables for the respective IDs. Also the IDs in StudentInfo and ClassInfo need to be primary keys. When you submit the file your email should also contain the following SQL Queries: Query to show...

In java, create a class named Contacts that has fields for a person’s name, phone number...

In java, create a class named Contacts that has fields for a person’s name, phone number and email address. The class should have a no-arg constructor and a constructor that takes in all fields, appropriate setter and getter methods. Then write a program that creates at least five Contact objects and stores them in an ArrayList. In the program create a method, that will display each object in the ArrayList. Call the method to demonstrate that it works. Include javadoc...

SQL statmen: List the first name, the last name, the address, the city, the state, the...

SQL statmen: List the first name, the last name, the address, the city, the state, the branchNo, and the email of agents working in the branch B005 and having email addresses ending with extensions different from .com.

SUPPLIERS(SupplierID, SupplierName, ContactName, Address, City, PostalCode, Country, Phone) CUSTOMERS(CustomerID, CustomerName, ContactName, Address, City, PostalCode, Country) 1.Show...

SUPPLIERS(SupplierID, SupplierName, ContactName, Address, City, PostalCode, Country, Phone) CUSTOMERS(CustomerID, CustomerName, ContactName, Address, City, PostalCode, Country) 1.Show suppliers that do not have a PO Box but only show those whose name starts with a G or an N 2.Show suppliers that are located in countries from A to G and cities from N to Z LastName: I got # records in the output (result set). 3.Show the set of city and country combinations (listing each combination only once) where our customers...

Create a class named “Car” which has the following fields. The fields correspond to the columns...

Create a class named “Car” which has the following fields. The fields correspond to the columns in the text file except the last one. i. Vehicle_Name : String ii. Engine_Number : String iii. Vehicle_Price : double iv. Profit : double v. Total_Price : double (Total_Price = Vehicle_Price + Vehicle_Price* Profit/100) 2. Write a Java program to read the content of the text file. Each row has the attributes of one Car Object (except Total_Price). 3. After reading the instances of...

Question