DATA Validation ne klient me javascript
Detyre
Te ndertojme nje forme login qe nuk lejon username dhe password bosh
Zgjidhje
<html>
<head>
<title>Login Form</title>
<script language="JavaScript">
function kontrollo()
{
if (document.loginfrm.user.value=='')
{ // begin
alert('Futni username');
document.loginfrm.user.focus();
return false;
} //end
if (document.loginfrm.pass.value=='')
{
alert('Futni password');
document.loginfrm.pass.focus();
return false;
}
return true;
}
</script>
</head>
<body>
<form name="loginfrm" method="post" action="checklogin.php" onSubmit="return kontrollo();" >
<p> Username
<input name="user" type="text" id="user">
</p>
<p>Password
<input name="pass" type="password" id="pass">
</p>
<p>
<input type="submit" name="Submit" value="---LOGIN---">
<input type="reset" name="Submit2" value="---CLEAR---">
</p>
</form>
</body>
</html>
Ndertimi i layout bazuar ne tabela
<html>
<head>
<title>table samle</title>
</head>
<body>
<table width="700" border="1" align="center">
<tr>
<td bgcolor="#00CCFF"> </td>
</tr>
<tr>
<td>
<table width="100%" border="1">
<tr>
<td width="100">
<p><img src="images/twiter.png" width="100" ></p>
<p>
<table width="100%" border="1">
<thead>
<tr>
<th>Site Menu</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#">item1</a></td>
</tr>
<tr>
<td><a href="#">item1</a></td>
</tr>
<tr>
<td><a href="#">item1</a></td>
</tr>
<tr>
<td><a href="#">item1</a></td>
</tr>
</tbody>
</table>
</p>
<p> </p>
<p> </p>
<p> </p>
<p>menu</p></td>
<td>content</td>
<td width="150">baner</td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
Ushtrim 1
Pershtatni ndefaqen e formes qe gjen shumen duke perdorur nje tabele
<html>
<head>
<title>DOM</title>
<script language="JavaScript">
function shuma()
{
var a,b,c;
a=document.getElementById('nr1');
b=document.getElementById('nr2');
c=document.getElementById('sh');
c.value=parseInt(a.value)+parseInt(b.value);
}
function boshatis2()
{
document.myform.nr2.value='';
}
</script>
</head>
<body>
<form name="myform">
<table width="250">
<tr>
<td height="40" onMouseOver="this.bgColor='#0099FF';" onMouseOut="this.bgColor='#FFFFFF';">
<p>Nr1: €
<input type="text" value="enter nr1" name="nr1" id="nr1" onClick="this.value='';" >
</p>
</td>
</tr>
<tr>
<td height="40" onMouseOver="this.bgColor='#0099FF';" onMouseOut="this.bgColor='#FFFFFF';">
<p>Nr2: ¥
<input name="nr2" type="text" id="nr2" onClick="this.value='';"
value="enter nr2" size="10" maxlength="5">
</p>
</td>
</tr>
<tr>
<td height="40" onMouseOver="this.bgColor='#0099FF';" onMouseOut="this.bgColor='#FFFFFF';">
<p>
Shuma:
<input name="sh" type="text" id="sh">
</p>
</td>
</tr>
<tr>
<td height="40" onMouseOver="this.bgColor='#0099FF';" onMouseOut="this.bgColor='#FFFFFF';">
<p>
<input type="button" value="gjej shumen" onClick="shuma();" >
</p>
</td>
</tr>
</table>
</form>
<br>
</body>
</html>