JQuery form controls loop
This is one of the JQuery magic. We can iterate all form controls using JQuery. Below example shows we are going to restrict characters more that 128(ASCII). Here we are accessing form elements(like textbox, password and textarea) using jquery loop and then we are checking each element is having characters more that 128(ASCII). If more that ASCII 128 characters we will remove that value from that control and return false.This is one of the good JQuery interview Question.
USES :
- Mainly for validation for the form. User should not enter any junk characters from the form controls.
- We can maintain our XML files in a good way, while doing XML transactions through other API.
OUTPUT:
 |
| JQuery Loop through All textboxes, Password and textarea |
Source Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#Button1').click(function() {//http://aspnettutorialonline.blogspot.com/
$(':text,:password,textarea').each(function() {
var val = $(this).val();
if (val != '') {
for (var i = 0; i < val.length; i++) {
if (val.charCodeAt(i) > 128) {
alert('please enter english characters');
$(this).val('');
return false;
}
}
}
});
});
});
</script>
<style type="text/css">
#TextArea1
{
height: 97px;
width: 233px;
}
</style>
</head>
<body>
<table style="width: 100%;">
<tr>
<td>
UserName</td>
<td>
<input id="Text1" type="text" /></td>
<td>
</td>
</tr>
<tr>
<td><!--http://aspnettutorialonline.blogspot.com/-->
Password</td>
<td>
<input id="Text2" type="password" /></td>
<td>
</td>
</tr>
<tr>
<td>
Address</td>
<td>
<textarea id="TextArea1" name="S1"></textarea></td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input id="Button1" type="button" value="button" /></td>
<td>
</td>
</tr>
</table>
</body>
</html>
Post a Comment
Please give your valuable feedback on this post. You can submit any ASP.NET article here. We will post that article in this website by your name.