Developing web applications is a challenge both the web developer and web designer but most of the time the responsibilities is being given to the web developer. One of the most challenging is how to make sure that all the text field in your web page is being filled up by your visitor of your website. As a web developer our main concern is to ensure as much as possible the all the information that is being submitted by our visitor in our website is correct and accurate.
By doing some research in the Internet I saw a code in JavaScript that uses JQuery framework that will allows the web developer to add functionality in their webpage by forcing the visitor of their website to fill up all the text fields prior it is will send the information in the web server. The code is not difficult to understand and implement below is the sample code for our webpage.
I hope you will find my work useful and beneficial in your web design and development using JQuery as your Javascript framework. If you have some questions you can send me an email at jakerpomperada@yahoo.com and jakerpomperada@gmail.com.
Thank you very much.
Sample Output of Our Program
Program Listing
<html>
<head>
<title>Personnel Record System</title>
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
$(function() {
$('#send').attr('disabled', 'disabled');
});
$('input[type=text],input[type=password]').keyup(function() {
if ($('#val1').val() !=''&&
$('#val2').val() != '' &&
$('#val3').val() != ''&&
$('#val4').val() != '' &&
$('#val5').val() != '') {
$('#send').removeAttr('disabled');
} else {
$('#send').attr('disabled', 'disabled');
}
});
});
</script>
<style type="text/css">
html { background: lightgreen; }
</style>
</head>
<body>
<h3>
<br>
Fill Up Forms </h3>
<form action="#">
<table border="1">
<tr>
<td><strong>Enter Your Name :</strong></td>
<td><input type="text" name="name" id="val1" />
</tr>
<tr>
<td><strong>Enter Your Address :</strong></td>
<td><input type="text" name="address" id="val2" />
</tr>
<tr>
<td><strong>Enter Your Mobile Number :</strong></td>
<td><input type="text" name="mobile" id="val3" />
</tr>
<tr>
<td><strong>Enter Your Email Address</strong></td>
<td><input type="text" name="email" id="val4" />
</tr>
<tr>
<td><strong>Enter Your Facebook Address</strong></td>
<td><input type="text" name="fb" id="val5" />
</tr>
<tr>
<td colspan="2">
<center><input type="submit" value="Submit Information"
title="Click here to submit information in the database." id="send" />
</td>
</form>
</body>
</html>
