Assignment 3 in JS
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...