Clearing all fields in a form with jQuery

  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

I've researched this online and tried to implement solutions that I have found* but I can't get it to work at all...

Here is what I have at the moment: (I put this in between <head>...</head> tags)
JAVASCRIPT Code: [ Select ]
<script type="text/javascript" src="templates/default/js/jquery-1.11.0.js"></script>
<script>
    function clear_form_elements(ele)
    {
        $(ele).find(':input').each(function()
        {
            switch(this.type)
            {
                case 'password':
                case 'select-multiple':
                case 'select-one':
                case 'text':
                case 'textarea':
                    $(this).val('');
                    break;
                case 'checkbox':
                case 'radio':
                    this.checked = false;
            }
        });
    }
</script>
  1. <script type="text/javascript" src="templates/default/js/jquery-1.11.0.js"></script>
  2. <script>
  3.     function clear_form_elements(ele)
  4.     {
  5.         $(ele).find(':input').each(function()
  6.         {
  7.             switch(this.type)
  8.             {
  9.                 case 'password':
  10.                 case 'select-multiple':
  11.                 case 'select-one':
  12.                 case 'text':
  13.                 case 'textarea':
  14.                     $(this).val('');
  15.                     break;
  16.                 case 'checkbox':
  17.                 case 'radio':
  18.                     this.checked = false;
  19.             }
  20.         });
  21.     }
  22. </script>

And here is how I try to implement it:
HTML Code: [ Select ]
<input type="button" onClick="clear_form_elements(this.form)" value="Clear All" />

Now, the reason why I'm trying to do this in jQuery is because after the user fills out the form and submits, I have the script remember some of user's input (such as username and email) and if the user erases those fields and hits submit, the input values would return back to the username and email the user has previously submitted. I also want a button to completely clear the form if the user chooses to do so (if they want to change the fields that were remembered and auto-filled VIA value="..." attribute.

I don't know what I'm doing wrong... I've tried many other different codes then the above but don't know how to make it work. Maybe I'm forgetting something? I don't know JavaScript at all, so I don't even know where to start looking to fix this up... what I got it to do so far is to clear the first field, but it doesn't clear all fields.

* Specifically, the following solutions:

http://stackoverflow.com/questions/6653556/jquery-javascript-function-to-clear-all-the-fields-of-a-form
http://stackoverflow.com/questions/680241/resetting-a-multi-stage-form-with-jquery
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

:lol: I got it figured out... still trying to get used to HTML5 and forgot about the email type input which wasn't resetting because javascript wasn't looking for email haha!
JAVASCRIPT Code: [ Select ]
<script>
    function clear_form_elements(ele)
    {
        $(ele).find(':input').each(function()
        {
            switch(this.type)
            {
                case 'password':
                case 'select-multiple':
                case 'select-one':
                case 'text':
                case 'textarea':
                case 'email':
                    $(this).val('');
                    break;
                case 'checkbox':
                case 'radio':
                    this.checked = false;
            }
        });
    }
</script>
  1. <script>
  2.     function clear_form_elements(ele)
  3.     {
  4.         $(ele).find(':input').each(function()
  5.         {
  6.             switch(this.type)
  7.             {
  8.                 case 'password':
  9.                 case 'select-multiple':
  10.                 case 'select-one':
  11.                 case 'text':
  12.                 case 'textarea':
  13.                 case 'email':
  14.                     $(this).val('');
  15.                     break;
  16.                 case 'checkbox':
  17.                 case 'radio':
  18.                     this.checked = false;
  19.             }
  20.         });
  21.     }
  22. </script>

HTML Code: [ Select ]
<input type="email" name="email"{% if form.email %} value="{{form.email}}"{% endif %} />

HTML Code: [ Select ]
 <input type="button" onClick="clear_form_elements(this.form)" value="Clear All" />

It now works :D Now I have to add the rest of HTML5 input type options (such as url... and don't know what others might be... have to do some researching!)

[EDIT] The following are the HTML5 input types
  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week
Just some FYI... and FMY (For My Information :P )

[EDIT #2] Below is the updated jQuery code to clear all fields including HTML5 input types (it clears the fields even if the value is set to something [e.g: value="something"]).
JAVASCRIPT Code: [ Select ]
<script>
    function clear_form(ele)
    {
        $(ele).find(':input').each(function()
        {
            switch(this.type)
            {
                case 'password':
                case 'select-multiple':
                case 'select-one':
                case 'text':
                case 'textarea':
                case 'email':
                case 'url':
                case 'color':
                case 'date':
                case 'datetime':
                case 'datetime-local':
                case 'email':
                case 'month':
                case 'number':
                case 'search':
                case 'tel':
                case 'time':
                case 'url':
                case 'week':
                    $(this).val('');
                    break;
                case 'range':
                    $(this).val(50);
                    break;
                case 'checkbox':
                case 'radio':
                    this.checked = false;
            }
        });
    }
</script>
  1. <script>
  2.     function clear_form(ele)
  3.     {
  4.         $(ele).find(':input').each(function()
  5.         {
  6.             switch(this.type)
  7.             {
  8.                 case 'password':
  9.                 case 'select-multiple':
  10.                 case 'select-one':
  11.                 case 'text':
  12.                 case 'textarea':
  13.                 case 'email':
  14.                 case 'url':
  15.                 case 'color':
  16.                 case 'date':
  17.                 case 'datetime':
  18.                 case 'datetime-local':
  19.                 case 'email':
  20.                 case 'month':
  21.                 case 'number':
  22.                 case 'search':
  23.                 case 'tel':
  24.                 case 'time':
  25.                 case 'url':
  26.                 case 'week':
  27.                     $(this).val('');
  28.                     break;
  29.                 case 'range':
  30.                     $(this).val(50);
  31.                     break;
  32.                 case 'checkbox':
  33.                 case 'radio':
  34.                     this.checked = false;
  35.             }
  36.         });
  37.     }
  38. </script>
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 475

Post 3+ Months Ago

you could always trigger a reset on the form like this

JAVASCRIPT Code: [ Select ]
$('#test_form')[0].reset();
 
  1. $('#test_form')[0].reset();
  2.  


one usage
HTML Code: [ Select ]
<form id="test_form">
    <input type="text" />
    <input type="text" value="Weee!" />
    <input type="button" value="clear" onclick="$('#test_form')[0].reset();" />
</form>
 
  1. <form id="test_form">
  2.     <input type="text" />
  3.     <input type="text" value="Weee!" />
  4.     <input type="button" value="clear" onclick="$('#test_form')[0].reset();" />
  5. </form>
  6.  


Here's a fiddle http://jsfiddle.net/LXa2Q/
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

I need it to clear inputs (make them empty) even if they have a value set (which is why I used $(this).val(''); and not reset();).

Thanks though :D
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 475

Post 3+ Months Ago

This was sent by my phone and not tested
JAVASCRIPT Code: [ Select ]
$(':input').not(':button, :submit, :reset, :hidden').removeAttr('checked').removeAttr('selected').not(':checkbox, :radio, select').val('');
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 475

Post 3+ Months Ago

just got to a computer and tested its works but the select is a bit strange http://jsfiddle.net/wSshJ/2/

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 46 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.