Textfield to Textfield - Exercise

Contact Us or call 1-877-932-8228
Textfield to Textfield - Exercise

Textfield to Textfield

Duration: 15 to 25 minutes.

In this exercise, you will write a function that bases the value of one text field on the value of another.

  1. Open FormValidation/Exercises/TextfieldToTextField.html for editing.
  2. Write a function called getMonth() that passes the month number entered by the user to the monthAsString() function in DateUDFs.js and writes the result in the monthName field.

Code Sample:

FormValidation/Exercises/TextfieldToTextField.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Textfield to Textfield</title>
<script src="DateUDFs.js" type="text/javascript"></script>
<script type="text/javascript">
	/*
		Write a function called getMonth() that passes the
		month number entered by the user to the monthAsString()
		function in DateUDFs.js and writes the result in
		the monthName field.
	*/
</script>
</head>
<body>
<h1>Month Check</h1>
<form name="dateForm">
	Month Number: <input type="text" name="monthNumber" size="2">
	<input type="button" value="Get Month" onclick="getMonth();"><br>
	Month Name: <input type="text" name="monthName" size="10">
</form>
</body>
</html>

Challenge

  1. If the user enters a number less than 1 or greater than 12 or a non-number, have the function write "Bad Number" in the MonthName field.
  2. If the user enters a decimal between 1 and 12 (inclusive), strip the decimal portion of the number.

Solution:

FormValidation/Solutions/TextfieldToTextField.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Textfield to Textfield</title>
<script src="DateUDFs.js" type="text/javascript"></script>
<script type="text/javascript">
	function getMonth(){
		var elemMonthNumber = document.DateForm.MonthNumber;
		var elemMonthName = document.DateForm.MonthName;
		var month = monthAsString(elemMonthNumber.value);
		
		elemMonthName.value = month;
	}
</script>
</head>
<body>
<h1>Month Check</h1>
<form name="DateForm">
	Month Number: <input type="text" name="MonthNumber" size="2">
	<input type="button" value="Get Month" onclick="getMonth();"><br>
	Month Name: <input type="text" name="MonthName" size="10">
</form>
</body>
</html>

Challenge Solution:

FormValidation/Solutions/TextfieldToTextField-challenge.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Textfield to Textfield</title>
<script src="DateUDFs.js" type="text/javascript"></script>
<script type="text/javascript">
	function getMonth(){
		var elemMonthNumber = document.DateForm.MonthNumber;
		var elemMonthName = document.DateForm.MonthName;
		var monthNum = parseInt(elemMonthNumber.value);
		
		var month = (monthNum >= 1 && monthNum <= 12) ? monthAsString(monthNum) : "Bad Number";
				
		elemMonthName.value = month;
	}
</script>
</head>
<body>
<h1>Month Check</h1>
<form name="DateForm">
	Month Number: <input type="text" name="MonthNumber" size="2">
	<input type="button" value="Get Month" onclick="getMonth();"><br>
	Month Name: <input type="text" name="MonthName" size="10">
</form>
</body>
</html>

Notice the use of the ternary operator on line13. If you don't remember how this works, go back and review the "JavaScript Operators" activity in the "Variables, Arrays and Operators" lesson.

Next