CIS 217 – Web Programming – Programming Assignment HTML Forms and JavaScript Ove
ID: 3891375 • Letter: C
Question
CIS 217 – Web Programming – Programming Assignment
HTML Forms and JavaScript
Overview The purpose of this assignment is to develop and understanding of JavaScript and how it can be used to generate the markup for a webpage. The student will explore the manner in which JS is encapsulated and placed within web markup along with the introductory concepts of JavaScript programming.
Assignment Review the W3 Schools website on working with form objects on a webpage (http://www.w3schools.com/html/html_forms.asp):
* HTML Forms
* HTML Form Elements
* HTML Form Types
* HTML Input Attributes
Review the W3 Schools website JavaScript example on the following topics (http://www.w3schools.com/js/default.asp):
* JS Home
* JS Introduction
* JS Where To
* JS Output
* JS Syntax
* JS Statements
* JS Comments
* JS Variables
* JS Operators
* JS Arithmetic
* JS Assignment
Once you have a working understanding of the concepts reviewed in these examples, construct an HTML page that contains a single form. Capture input from all of the standard form input widgets reviewed in "HTML Form Elements". The type of data you capture at this point is not important at this point and can just be nonsense numbers/strings you select/type. Capture the data from the form and pass it to a simple JavaScript that displays the results from the form selections in a response page in the browser. You do not have to spend as much time on dressing up the output, but it should be legible and intuitive. You may place the JavaScript anywhere you want at this point (inline, header, or external).
Explanation / Answer
Here is the complete code with different HTMP input forms with javascrpt displaying the values in the form:
<!DOCTYPE html>
<html>
<body>
<form id="frm1" action="/action_page.php">
First name: <input type="text" name="fname" value="Donald"><br>
Last name: <input type="text" name="lname" value="Duck"><br><br>
Age: <input type="text" name="age" value="30"><br><br>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br><br>
Favorite Food:<br>
<select name="Favorite Food">
<option value="Pizza">Pizza</option>
<option value="Burger">Burger</option>
<option value="Pasta">Pasta</option>
<option value="Sandwich">Sandwich</option>
</select> <br><br>
<button type="button">Display</button>
</form>
<p>Click "Display" to display the value of each element in the form.</p>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("frm1");
var text = "";
var i;
for (i = 0; i < x.length ;i++) {
text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.