Browsing articles in "JS"

Form Validation Like Ajax or JQuery Using Simple Javascript and CSS

Aug 5, 2009   //   by nuhil   //   Ajax, CSS, JQuery, JS  //  No Comments

The code below will create a form with two fields. If do not enter “1″ in the first form field try to leave that field then it will response and create a message on the right side of the field.

This will work just like any Ajax or Jquery form validation but it is simply Javascript and CSS.

  1. <html>
  2. <head>
  3. <script type="text/javascript"><!–
  4. function update() {
  5. if(document.form.num_1.value != '1')
  6. document.form.sum.value = 'Start with 1';
  7. document.form.sum.style.visibility = 'visible';
  8. }
  9. //–></script>
  10. </head>
  11.  
  12. <body>
  13. <form name="form" method="post" action="">
  14. <table width="100%"  border="0" cellpadding="1">
  15. <tr>
  16. <td>First Number </td>
  17. <td><input name="num_1" type="text" id="num_1"  onChange="update()">
  18. <input name="sum" type="text" id="sum" readonly="" style="border:0px; visibility:hidden; "></td>
  19. <td>&nbsp;</td>
  20. <td>&nbsp;</td>
  21. </tr>
  22. <tr>
  23. <td>Second Number </td>
  24. <td colspan="3"><input name="num_2" type="text" id="num_2"  onChange="update()"></td>
  25. </tr>
  26. </table>
  27. </form>
  28. </body>

I hope logic can be developed by you for further uses.

Authentication Module with E-mail & Image Verification!

Aug 1, 2008   //   by nuhil   //   HTML, JS, MySQL, PHP  //  1 Comment

I’ve built an authentication system which can be used as secured module in a registration form or in a suggestion box where there are probability of insertion of data by a robot script. By using the image verification fact no auto generated script can fill up a form. Other wise there is an e-mail verification fact by which the man who fill up the form giving his e-mail address should check up his inbox for the mail sent by the form.
The e-mail is sent with a link on which by clicking it executes a script for neccessary update in the database.


In this module when a user fill up the form then in database every data is inserted and in a filled named active ’0′ is inserted. When the user clicks on the link sent to him by e-mail. It then executes another script page which then updates the value of active field into ’1′.
Then you can verify a user by examining the value of his active field in database that ensures that he clicked on th link.
This can be used as module in any Webapp.

See the example: Register Login

You can download the source code from the ShareBox left of side of my site. named Auth.zip

Another Power of Ajax! Instant Edit on View-Page

May 1, 2008   //   by nuhil   //   Ajax, CSS, JS, MySQL, PHP  //  2 Comments

When a page is displayed with requested data from a database, then normally the data it contains can be edited or updated by getting the id of that form and by using that to update the form. Now, with the Ajax you can make a output page where you can edit the field of the form by just clicking on it and it will be saved to database instantly.

I’m unable to describe the benifit or beauty of this task. Just try it and make it more effective and do the JavaScript and be with Ajax. Example named insedit.zip

Feelings of Drag and Drop using Ajax-PHP-MySQL

Apr 21, 2008   //   by nuhil   //   Ajax, JS, Library, MySQL, PHP  //  1 Comment

Refference -Building Responsive Web Application by PACKT PUBLICATION

You Just try this example and feel the power of Ajax and the libraries just like Script.aculo.us , prototype.js . Recently, Web Application without attractive interface is not accepted to real users. So, use the maximum of Libraries and Frameworks.

 You can get this example in my Shared Box named dragdrop.zip

Form Validation! Instant Alert on page!

Mar 21, 2008   //   by nuhil   //   JS  //  2 Comments

Using Java Script you can check a form. The errors will be shown in a small window. But using JavaScript library, you can do it more smartly and effectively.
The basic method is to attach to the form’s onsubmit event, read out all the form elements’ classes and perform validation if required. If a field fails validation, reveal field validation advice and prevent the form from submitting.
Include the javascript libraries:

<script src=”prototype.js” mce_src=”prototype.js” type=”text/javascript”></script>
<script src=”validation.js” mce_src=”validation.js” type=”text/javascript”></script>

You write elements like this:
<input class=”required validate-number” id=”field1″ name=”field1″ />
You then activate validation by passing the form or form’s id attribute like this:
<script type=”text/javascript”>
     new Validation(‘form-id’); // OR new Validation(document.forms[0]);
</script>See the Example:

Read more >>

Pages:12»