iLTC Home
Bookmark iLTC!

Categories

Perl
  • Perl Tutorials Beginners

  • Javascript
  • Javascript Tutorials
  • Javascript Tutorials Beginners

  • HTML
  • HTML Tutorials

  • Command Line
  • Command Line Tutorials

  • How Tos
  • Other Tips and Tricks



  • I love the code... dot com
    1726012

    iLoveTheCode.com

    Javascript Reset Form

    reset();

    -Use Javascript's built-in reset object.

    The simplest way to use reset would be like this:

    <form name=fori>
    <input type=text name=textfi>
    </form>

    <a href="#" onClick="document.fori.reset();return false">Clear It!</a>

    -First we created a simple form named fori because we like the name fori.
    -Then we create a link to click on to clear the form.
    -We use Javascript's built-in onClick event handler.
    -Inside the quotation marks we say:
    ---document the page we are on
    ---fori the name we gave our form
    ---reset() Javascript's built-in reset() does the work

    Fairly straight forward. But I am always scared of reset buttons or links because if you have ever filled in a really long form and clicked the wrong button, it can be quite upsetting.

    So let's build a better mousetrap.

    function betterMo() {
    if (confirm("Are you sure you want to clear form?")) {
    document.fori.reset();
    }
    }

    <a href="#" onClick="betterMo();return false">Clear It!</a>

    This time we created a function to make sure our user wants to clear the form.

    -We used Javascript's built-in confirm method.
    -We enclosed our question in quotation marks.
    -We put our same document.fori.reset() code in the if condtion.
    ---document the page we are on
    ---fori the name we gave our form
    ---reset() Javascript's built-in reset() does the work

    Synopsis: In other words, if the user clicks OK or YES, the form will be reset. Otherwise, the form will be unchanged.


    The code below has three ways to clear the form. The submit button (which will confirm), a confirm link, and an immediately clear link.

    Have fun resetting that form!


    Free Copy and Paste Javascript Code:

    <script type="text/javascript">
    <!--
    function betterMo() {
    if (confirm("Are you sure you want to clear form?")) {
    document.fori.reset();
    }
    }
    -->
    </script>

    <form name=fori>
    <input type=text name=textfi>
    <input type=checkbox name=checki>
    <input type=radio name=radi>
    <textarea name=textai></textarea>
    <input type=submit onClick="betterMo();return false" value="Clear It! With Confirm...">
    </form>

    <a href="#" onClick="document.fori.reset();return false">Clear It NOW!</a>
    <a href="#" onClick="betterMo();return false">Clear It After Confirming</a>

    Resources:
    onClick Javascript
    Javascript Function
    Call a Function in Javascript
    If Else Javascript
    Javascript Alert



    Previous Article: Annoy Users with onBlur in Javascript
    Next Article: Javascript Referrer






    Search iLTC w/ Google




    Recent Articles

  • HTML Font Code
  • Javascript and CSS - Easy Pop Up Help Balloons
  • Use OnMouseOver in Javascript
  • Use onMouseOut in Javascript
  • Use innerHTML to Change Text on a Page
  • Renaming a File with Perl's RENAME Function
  • PRINT to Browser with document.write Command in Javascript
  • Passing an Argument or Variable to a Javascript
  • Opening an Alert Box in Javascript
  • Opening a REMOTE WINDOW in Javascript
  • OPEN and WRITE a Data File in Perl
  • OPEN and READ a Data File in Perl
  • Mimic Typing from a Textfield in a Textarea with Javascript
  • Javascript Reset Form








  • Perl Programming - Javascript Programming - HTML Code - Mac Unix Command Line - Maybe Some PHP - Free Scripts - ILoveTheCode
    All Content © 2006-2009 iLoveTheCode.com


    Contact Chris | About this Site


    1725737
    Counter by iLoveTheCode.com


    Last Modified: Monday, 09-Feb-2009 01:56:41 EST



    Hosted as well :)
    Home-brewed logo - 1997