Want to create a similar effect in your site? Here is the code...
I have added many comments so that you can understand the code without further explanation. To see the code that I used to create the form, view the source of this page.
In the above example I have used a 'button' type element as the Submit button - but when creating forms that will pass the values to a server side script you will have to use a 'submit' type element. Like this...
<input type="submit" value="Submit" />
When using the 'onclick' property with this, you will notice that the form is submitted even if there is a error. If you want to stop that, use the following method.
See the 'onsubmit' statement? This will execute the 'validate()' function when the user submits the form. The browser will submit the form if and ONLY if the function will return a true value. So if any validation error was spotted in the function, return a false value and the browser will stay on the same page. If there is no error, the function will return true value. This will cause the browser to submit the form and the user will be taken to the page in the 'action' attribute of the form.
If you wish to try something, use the below form.blog comments powered by Disqus