Assignment Question: Using HTML and scripts, create a form as shown in the figure below to allow user to enter their favorite food information. When the user clicks the SUBMIT button, the following output needs to be displayed to the user.
HTML Code
For this assignment answer, I will use Visual Studio 2017 as my IDE. Refer below for the html code.
<!--
Assignment CBWP2203 Semester May 2017
OPEN UNIVERSITY MALAYSIA
-->
<!-- Declare HTML Doctype. Standard W3C XHTML -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- HTML Head -->
<head>
<title>Assignment Question 1</title>
<meta name="author" content="Mohd Arief Ramli">
<meta name="description" content="Question1 Assignment Answer">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<meta property="og:title" content="Question1 Assignment">
<meta property="og:type" content="website">
<meta property="og:description" content="Question1 Assignment Answer">
<meta property="og:url" content="http://www.lemon-web.net/temp/cbwp2203/question1/question1.html">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Reference to CSS & JS files -->
<script type="text/javascript" src="/Question1.js"></script>
<script src="/jquery.min.js"></script>
<script src="/bootstrap.min.js"></script>
<link rel="stylesheet" href="/bootstrap.min.css">
<link rel="stylesheet" href="/question1.css">
<link rel="shortcut icon" href="/favicon.ico">
</head>
<!-- HTML Body -->
<body>
<div class="box1">
<h1>Assignment Question 1</h1>
<p>Fill in the following fields and click "Submit" to show result. </p>
<form id="question1_form" name="question1_form" action="" onsubmit="return false;">
<table>
<tr>
<td>
Name
</td>
<td width="20">
:
</td>
<td>
<input name="name" type="text" id="name"/>
</td>
</tr>
<tr>
<td>Age</td>
<td>:</td>
<td>
<input type="number" name="age" id="age" />
</td>
</tr>
<tr>
<td>Gender</td>
<td>:</td>
<td>
<select name="gender" id="gender" style="min-width:150px;">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td valign="top">Favourite Food</td>
<td>:</td>
<td>
<input type="radio" name="radio" id="favfood" value="burger" />
Burger<br />
<input type="radio" name="radio" id="favfood" value="pizza" />
Pizza<br />
<input type="radio" name="radio" id="favfood" value="roti canai" />
Roti Canai
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Your comment about the food:</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<textarea name="comments" id="comments" cols="25" rows="5"></textarea></td>
<td></td>
<td></td>
</tr>
</table>
<!-- Result -->
<div>
<!-- Trigger the modal with a button -->
<button type="button"data-toggle="modal" data-target="#myModal" onclick="showresult()">Submit</button>
<button type="button"onclick="resetfield()">Reset</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Result:</h4>
</div>
<div id="RESULT" class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
CSS Code
Refer below for the CSS code:
body {font-family:calibri; position:relative}
h1 {color:#3E1B78;}
.box1 {background-color:white; max-width:500px; padding:15px;}
JavaScript Code
Refer below for the Javascript code:
// Submit
function showresult()
{
// Declare variables
var name = document.getElementById('name').value;
var age = document.getElementById('age').value;
var gender = document.getElementById('gender').value;
var favfood = document.getElementById('favfood').value;
var comments = document.getElementById('comments').value;
var result = document.getElementById('RESULT');
// validation to ensure all fields are entered
if (name == "")
{
result.innerHTML = "Please type in name.";
return false;
}
if (age == "")
{
result.innerHTML = "Please type in age.";
return false;
}
if (favfood == "")
{
result.innerHTML = "Please select favourite food.";
return false;
}
if (comments == "")
{
result.innerHTML = "Please type in your comments on the food.";
return false;
}
else
{
// displaying result
result.style.display='block';
result.innerHTML = name + " is " + age + " years old " + gender + ".<br/>" + name + "likes to eat " + favfood + " because " + comments + ".";
}
}
// Reset
function resetfield()
{
document.getElementById('question1_form').reset();
var result = document.getElementById('RESULT');
result.style.display='block';
result.innerHTML = "";
}
}
Screenshots
Refer below for the sample screenshots:
Live Website URL
Refer below for the URL to view the website: