Question 1- Create a form for on-line payment of telephone bill which should have the following fields :- Name and Address
- Telephone Number
- Consumer Number
- Pay by date
- Amount Payable
- Surcharge amount payable after due date
Run Validation check on each Field.
solution-
main.html
<html>
<head>
<title>Telephone online payment</title>
<script type="text/javascript">
function checkValidation()
{
var name = document.payform.name.value;
var address = document.payform.address.value;
var telephoneno = document.payform.telnumber.value;
var consumerno = document.payform.consnumber.value;
var paybydate = document.payform.pbdate.value;
var amtpay = document.payform.amtpayable.value;
var suramt = document.payform.suramt.value;
if(name=="")
{
alert('name is required');
return false;
}
else if(address=="")
{
alert('address is required');
return false;
}
else if(telephoneno=="")
{
alert('Telephone number is required');
return false;
}
else if(consumerno=="")
{
alert('Consumer Number is required');
return false;
}
else if(paybydate=="")
{
alert('Pay by date is required');
return false;
}
else if(amtpay=="")
{
alert('Payable Amount is required');
return false;
}
else if(suramt=="")
{
alert('Surcharge amount can be empty');
return false;
}
else
{
}
// here we are saving variable locally so that we can access it through another page
localStorage.setItem('name',name);
localStorage.setItem('address',address);
localStorage.setItem('telephoneno',telephoneno);
localStorage.setItem('consumerno',consumerno);
localStorage.setItem('paybydate',paybydate);
localStorage.setItem('amtpay',amtpay);
localStorage.setItem('suramt',suramt);
return true;
}
</script>
</head>
<body>
<form name="payform">
<table background-color="red">
<tr>
<td>Name</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" name="address"></td>
</tr>
<tr>
<td>Telephone Number</td>
<td><input type="text" name="telnumber"></td>
</tr>
<tr>
<td>Consumer Number</td>
<td><input type="text" name="consnumber"></td>
</tr>
<tr>
<td>Pay by date</td>
<td><input type="date" name="pbdate"></td>
</tr>
<tr>
<td>Amount Payable</td>
<td><input type="text" name="amtpayable"></td>
</tr>
<tr>
<td>Surcharge amount payable after due date</td>
<td><input type="text" name="suramt"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" value="Proceed" onClick="checkValidation()"></td>
</tr>
</table>
</form>
</body>
</html>
Question 2 - Create a log-in page of any telephone company having field names : name of the customer and telephone number as password. It should have validation checks on both fields. After checking a log-in button, it should display the telephone bill of the current month of the customer having fields as shown in Question 1.
solution-
main.html
<html>
<head>
<title>Login Page</title>
<script type="text/javascript">
function checkUser()
{
var username = document.loginform.cusname.value;
var password = document.loginform.telnumber.value;
if(username == "surajchauhan66" && password =="12345")
{
window.location.href = "billpage.html";
return true;
}
else
{
alert('incorrect username or password');
return false;
}
}
</script>
</head>
<body>
<form name="loginform">
<table>
<tr>
<td>Customer Name</td>
<td><input type="text" name="cusname"></td>
</tr>
<tr>
<td>Telephone number</td>
<td><input type="text" name="telnumber"></td>
</tr>
<tr>
<td><input type="button" value="Login" onClick="checkUser()"></td>
</tr>
</table>
</form>
</body>
</html>
BillDetail.html-
<html>
<head>
<title>Bill Detail page</title>
<script type="text/javascript">
function load()
{
document.getElementById('nameid').innerHTML = localStorage.getItem('name');
document.getElementById('addressid').innerHTML = localStorage.getItem('address');
document.getElementById('telnumberid').innerHTML = localStorage.getItem('telephoneno');
document.getElementById('consnumberid').innerHTML = localStorage.getItem('consumerno');
document.getElementById('pbdateid').innerHTML = localStorage.getItem('paybydate');
document.getElementById('amtpayid').innerHTML = localStorage.getItem('amtpay');
document.getElementById('suramtid').innerHTML = localStorage.getItem('suramt');
}
</script>
</head>
<body onLoad="load()">
<table>
<tr><td><h1>Bill Detail</h1></td></tr>
<tr>
<td><b>Name:</b></td><td id="nameid"></td>
</tr>
<tr>
<td><b>Address:</b></td><td id="addressid"></td>
</tr>
<tr>
<td><b>Telephone Number:</b></td><td id="telnumberid"></td>
</tr>
<tr>
<td><b>Consumber Number:</b></td><td id="consnumberid"></td>
</tr>
<tr>
<td><b>Pay By Date:</b></td><td id="pbdateid"></td>
</tr>
<tr>
<td><b>Amount Payable:</b></td><td id="amtpayid"></td>
</tr>
<tr>
<td><b>Surcharge Amount:</b></td><td id="suramtid"></td>
</tr>
</table>
</body>
</html>
if you have any doubt related to this post, you can ask in comment section and if you want solution of any previous year questions. please post that question in section we will try to solve that
0 comments:
Post a Comment