Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html>
- <head>
- <title>Library</title>
- <style type="text/css">
- table {
- border:1px solid #aaa;
- margin: 0.5em 0;
- }
- </style>
- <script type='text/javascript'>
- <!--
- function NewBooks(divName) {
- // public properties
- this.books = document.getElementById(divName);
- // private properties
- var counter = 0;
- var limit = 8;
- var bname1 = new Array();
- var abname1 = new Array();
- var cost1 = new Array();
- var num1 = new Array();
- var str;
- var self = this;
- // private method
- var addNewBook = function() {
- //alert(this + self + 'counter +1 is '+counter);
- self.books.childNodes[0].nodeValue = ' BOOKS '+counter+'/'+limit+' ';
- var newdiv = document.createElement('div');
- str = '<table id="book'+counter+'">';
- str += '<tr> <td style="text-align:right"> Name of book ' +counter + ' : </td><td> <input type="text" name="bname[]" value="" /> <span id="bname[]'+counter+'err" value=""></span> </td> </tr>';
- str += '<tr> <td style="text-align:right"> Name of Authour '+counter+' : </td><td> <input type="text" name="aname[]" value="" /> <span id="aname[]'+counter+'err" value=""></span> </td> </tr>';
- str += '<tr> <td style="text-align:right"> Publisher '+counter+' : </td><td> <input tyme="text" name="pub[]" value="" /> <span id="pub[]'+counter+'err" value=""></span> </td> </tr>';
- str += '<tr> <td style="text-align:right"> ISDN Number ' + counter + ' : </td><td> <input type="text" name="isdn[]" value="" /> <span id="isdn[]'+counter+'err" value=""></span> </td> </tr>';
- str += '<tr> <td style="text-align:right"> Edition ' + counter + ' : </td><td> <input type="text" name="edi[]" value="" /> <span id="edi[]'+counter+'err" value=""></span> </td> </tr>';
- str += '<tr> <td style="text-align:right"> Price '+ counter +' : </td><td> <input type="text" name="cost[]" value="" /> <span id="cost[]'+counter+'err" value=""></span> </td> </tr>';
- str += '<tr> <td style="text-align:right"> Number of copies '+ counter + ' : </td><td> <input type="text" name ="num[]" value="" /> <span id="num[]'+counter+'err" value=""></span> </td> </tr>';
- str += '</table>';
- newdiv.innerHTML = str;
- self.books.appendChild(newdiv);
- };
- // public method
- this.addInput = function() {
- if (counter == limit)
- {
- alert('You have reached the limit of adding ' + counter + ' inputs');
- }
- else
- {
- counter++;
- addNewBook();
- //alert('counter +1 is '+counter);
- };
- }
- // public method
- this.validateInputs = function() {
- //alert(this + self);
- var t = document.getElementsByTagName('table'); // table collection
- if (!t.length) {
- return false;
- }
- var name;
- var total_errors = 0;
- for (var i=0; i<t.length; i++) {
- if (t[i].getAttribute('id').indexOf("book") == 0) { // if identifier is book1, book2, ... (just for security)
- var f = t[i].getElementsByTagName('input'); // all input fields of i-th book
- for (var j=0; j<f.length; j++) {
- //alert('validating book #'+i+' , input field #'+j);
- if (validate_field(f[j],i+1)==false) {
- total_errors += 1;
- }
- }
- }
- }
- if (total_errors==0) {
- return true;
- } else {
- alert(total_errors + ' errors found.');
- return false;
- }
- }
- function validate_field(f,errid) { // f is input element
- var name = f.name;
- var value = f.value;
- var error_div = document.getElementById(name+errid+'err');
- //alert('name '+name+' value '+value);
- if (name.indexOf('bname') == 0) { // if validate book name
- if (value == '') { // e.g. book name should not be empty string?
- error_div.innerHTML = 'book name cannot be empty!';
- return false; // field is wrong
- }
- }
- else if (name.indexOf('aname') == 0) { // if validate author name
- if (value.length<2) {
- error_div.innerHTML = 'author\'s name is too short!';
- return false; // at least two characters long name? :)
- }
- }
- else if (name.indexOf('pub') == 0) { // if validate publisher
- if (value.length<2) {
- error_div.innerHTML = 'publisher\'s name is too short!';
- return false;
- }
- }
- else if (name.indexOf('isdn') == 0) { // if validate ISDN Number
- if (value == '') {
- error_div.innerHTML = 'ISDN cannot be empty!';
- return false;
- }
- }
- else if (name.indexOf('edi') == 0) { // if validate Edition
- if (value == '') {
- error_div.innerHTML = 'edition cannot be empty!';
- return false;
- }
- }
- else if (name.indexOf('cost') == 0) { // if validate Price
- if (value=='') {
- error_div.innerHTML = 'Cannot be empty!';
- return false;
- }
- if (isNaN(value)) {
- error_div.innerHTML = 'Please write a price using digits!';
- return false;
- }
- }
- else if (name.indexOf('num') == 0) { // if validate Number of copies
- if (value=='') {
- error_div.innerHTML = 'Cannot be empty!';
- return false;
- }
- if (isNaN(value)) {
- error_div.innerHTML = 'Please number of copies via digits!';
- return false;
- }
- }
- error_div.innerHTML = 'ok';
- return true; // field is ok
- // you can see also http://www.javascript-coder.com/html-form/javascript-form-validation.phtml
- }
- }
- var obj; // this will be object
- window.onload = function(){
- obj = new NewBooks('books'); // can create object, because now the #books div is already created (exists) in browser's DOM (document object model)
- }
- // $(document).ready(function(){ obj = new NewBooks('books'); }); // safe onload with jQuery
- // see also http://www.webreference.com/programming/javascript/onloads/
- //-->
- </script>
- </head>
- <body>
- <form action="http://localhost/test.php" method="post" onsubmit="return obj.validateInputs()">
- <div id="books"> BOOKS - <input type="button" value="add" onclick="obj.addInput()" /> <hr/> </div>
- <input type="submit" name="send_books" value="Send" />
- </form>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement