Create a Javascript application program for the following task: Create a webpage
ID: 638120 • Letter: C
Question
Create a Javascript application program for the following task:
Create a webpage that contains three text boxes in which users can enter a name, telephone number and a social security number. Include a save button which validate all the three text boxes using regular expressions for the following styles and save it in a table with three columns on the same webpage (lower half). The users should be able to enter/add maximum four sets
Example: Fname Lname, 1 (408) 123 4567 or 408 123 4567, SS# ddd-dd-dddd or ddd dd dddd. All these formats only should validate.
Explanation / Answer
<html>
<head>
<title></title>
<script type="text/javascript">
function addEntries() {
//validate entries
errors = "";
fname = document.getElementById('fName').value;
if(fname.length == 0)
errors += "First Name is required ";
lname = document.getElementById('lName').value;
if(lname.length == 0)
errors += "Last Name is required ";
tnumber= document.getElementById('tNumber').value;
if(tnumber.length == 0)
errors += "Telephone number is required ";
else {
var reg = /^s*(+|-)?d+s*$/;
if(reg.test(tnumber) == false)
errors += "Telephone number should contain integers only ";
}
snumber= document.getElementById('sNumber').value;
if(snumber.length== 0)
errors += "Social security number is required ";
else {
var reg = /^s*(+|-)?d+s*$/;
if(reg.test(snumber) == false)
errors += "Social security number should contain integers only ";
}
if(errors.length == 0) {
} else {
alert("Errors: "+errors);
}
return;
}
</script>
</head>
<body>
<table border="0" cellpadding="1" cellspacing="1">
<tbody>
<tr>
<td>
<form>
<table border="0" cellpadding="1" cellspacing="1">
<tbody>
<tr>
<td>
First Name</td>
<td>
<input id="fName" type="text" /></td>
</tr>
<tr>
<td>
Last Name</td>
<td>
<input id="lName" type="text" /></td>
</tr>
<tr>
<td>
Telephone Number</td>
<td>
<input id="tNumber" type="text" /></td>
</tr>
<tr>
<td>
Social Security Number</td>
<td>
<input id="sNumber" type="text" /></td>
</tr>
</tbody>
</table>
<p>
<input id="submit" type="submit" value="Submit" /></p>
</form>
</td></tr>
<tr><td>
</td></tr>
<tr><td>
Added Entries:
</td></tr>
<tr><td>
<p>
<table id="displayTable" border="1" cellpadding="1" cellspacing="1">
<tbody>
<tr>
<td>
First Name</td>
<td>
Last Name</td>
<td>
Telephone Number</td>
<td>
Social Security Number</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</td></tr>
</body>
</html>