Assignment 3 in JS

 avatar
Rohit143
html
4 years ago
6.8 kB
40
Indexable
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Assignment 3</title>
    <style>
        *{
            font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        form{
            background-color: whitesmoke;
        }
        td {
            text-align: right;
        }
        #radio_btn,#checkbox_btn,#location_list{
            text-align: left;
        }
        #btn{
            text-align: center;
        }
        button{
            background-color: cornflowerblue;
            color: white;
            border: none;
            outline: none;
            padding: 7px;
            border-radius: 4px;
        }
    </style>
</head>
<body>

    <h1 align="center"> COVID 19 Survey</h1>
        <form action="" method="post" name="feedback" onsubmit="return validate()" autocomplete="True">
            <table align="center" cellspacing=15>
                <tr>
                    <td>Name
                    <td><input type="text" name="Name" placeholder="Enter your name" ></td>
                </tr>
                <tr>
                    <td>Email
                    <td><input type="email" name="Email" placeholder="Enter your email address" ></td>
                </tr>
                <tr>
                    <td>What is your age?
                    <td><input type="number"  name ="age"  placeholder="Enter your age.." ></td>
                </tr>
                <tr>
                    <td>Where did you took vaccine?
                    <td id="location_list">
                        <select name="locate" type="text">
                            <option>At collage</option>
                            <option>At Govt. Hospital</option>
                            <option>At Private Hospital</option>
                        </select>

                    </td>
                </tr>
                <tr>
                    <td>Which vaccine you took?
                    <td id="radio_btn">
                        <input type="radio" name="vaccine" value="Covishield"><label for="vaccine">Covishield</label>
                        <br>

                        <input type="radio" name="vaccine" value="Covaxin"><label for="vaccine">Covaxin</label>

                        <br>
                        <input type="radio" name="vaccine" value="Sputnik"><label for="vaccine">Sputnik</label>

                    </td>
                </tr>
                <tr>
                    <td>Which of your relatives has been vacinated?
                    <td id="checkbox_btn">
                        <input name="vaccinated_relative" type="checkbox" value="Brother"><label for="vaccinated_relative">Brother</label>
                        <br>

                        
                        <input name="vaccinated_relative" type="checkbox" value="Sister"><label for="vaccinated_relative">Sister</label>
                        <br>


                        <input name="vaccinated_relative" type="checkbox" value="Father"><label for="vaccinated_relative">Father</label>
                        <br>


                        <input name="vaccinated_relative" type="checkbox" value="Mother"><label for="vaccinated_relative">Mother</label>
                        <br>


                        <input name="vaccinated_relative" type="checkbox" value="No one"><label for="vaccinated_relative">No one</label>

                    </td>
                </tr>
                <tr>
                    <td>Please describe your thoughts about vaccination
                    <td>
                        <textarea name="describe_vaccinated_relative" id="" cols="22" placeholder="your thoughts about vaccination..."></textarea>
                        
                    </td>
                </tr>
                <tr>
                    <td id="btn" colspan="2">
                        <button type="submit">Submit</button>
                    </td></tr>
            </table>
        </form>

        

</body>
<script>

    // declaring varibles to access form element
    var name =
        document.forms["feedback"]["Name"];
    var email =
        document.forms["feedback"]["Email"];
    var age =
        document.forms["feedback"]["age"];
    var locate =
        document.forms["feedback"]["locate"];
    var vaccine =
        document.forms["feedback"]["vaccine"];
    var vaccinated_relative =
        document.forms["feedback"]["vaccinated_relative"];
    var describe_vaccinated_relative =
        document.forms["feedback"]["describe_vaccinated_relative"];


        // declaration of display function
     function display() {
         var emotions =""
         for (let i = 0; i < vaccinated_relative.length; i++) {
             if (vaccinated_relative[i].checked) {
                 emotions +=vaccinated_relative[i].value+", "
                 
                }
            }

            // showing vaccine and emotions
            alert("I took '"+vaccine.value+"' vaccine and In my family "+emotions+" took vaccine ")
    }

        
    function validate() {


        // validating inputs
        if (name.value == "") {
            alert("Please enter your name.");
            name.focus();
            return false;
        }

        if (email.value == "") {
            alert("Please enter a valid e-mail address.");
            email.focus();
            return false;
        }

        if (age.value ==null) {
            alert(
            "Please Enter your age.");
            age.focus();
            return false;
        }

        if (locate.selectedIndex < 1) {
            alert(
            "Please Select where did it happen.");
            locate.focus();
            return false;
        }

        if (vaccine.value == "") {
            alert("Please Select at what vaccine of the day did it happen");
            vaccine.focus();
            return false;
        }

        if (vaccinated_relative.selectedIndex<1) {
            alert("Please Select what emotions did you vaccinated relatived.");
            vaccinated_relative.focus();
            return false;
        }

        if (describe_vaccinated_relative.value=="") {
            alert("Please describe you positive vaccinated_relative");
            describe_vaccinated_relative.focus();
            return false;
        }

        display();//calling display function after validation

        return false; //if it is true then form will be submitted and go to new page
    }


</script>


</html>
Editor is loading...