Clear form Text boxes on Button Click

Question

I would like to clear all the texts boxes on register button click. Below is my attempt. When I click on the button, the texts still remains. Please advise. Thanks

<form action="#" class="signup" method="post" onsubmit="return signup();">
    <input type="text" id="signup-email" class="text-input" name="email" title="E-mail" autocomplete="off" tabindex="11" placeholder="E-mail">
    <input type="password" id="signup-password" class="text-input" name="password" title="Password" autocomplete="off" tabindex="12" placeholder="Password">
    <input type="password" id="signup-password2" class="text-input" name="password2" title="Confirm password" autocomplete="off" tabindex="13" placeholder="Confirm password">
    <table>
        <tr>
            <td></td>
            <td class="align-right">
                <button type="submit" class="signup-btn" onclick="this.form.elements['text-input'].value=''">Register</button>
            </td>
        </tr>
    </table>
</form>

score 4 · Accepted Answer · answered Dec 26 '13 at 09:00

4

try this

<button type="submit" class="signup-btn" onclick="this.form.reset();">Register</button>

answered Dec 26 '13 at 09:00

Let me see

5,063
9
34
47

I would like my register button to reset it. Not creating a new button. Thanks – KC Chai Dec 26 '13 at 09:01
great bro :). cheers :) – Let me see Dec 26 '13 at 09:08

score 1 · Answer 2 · answered Dec 26 '13 at 09:07

1

Try this.

   document.getElementById("myForm").reset();

answered Dec 26 '13 at 09:07

Tony Jose

1,654
1
13
25

score 1 · Answer 3 · answered Dec 26 '13 at 09:08

1

Try this:

$(function() {
  $('.signup-btn').click(function() {
    $('.signup input[type="text"]').val('');
  });
});

And you register button would be:

<button type="submit" class="signup-btn">Register</button>

answered Dec 26 '13 at 09:08

user2936213

1,021
1
8
19

score 1 · Answer 4 · answered Dec 26 '13 at 09:15

1

Add id attribute to form element. and then you can try this:

  <button type="submit" class="signup-btn" onclick="document.getElementById('formid').reset();">Register</button>

answered Dec 26 '13 at 09:15

Milind Anantwar

81,290
25
94
125

score 0 · Answer 5 · answered Dec 26 '13 at 09:09

Since he wants the form to reset it self automatically he can make a hidden reset button and make it click on submit.

<input type="reset" id="reset_button" style="display:none"/>

Then click the button by its id on submit of the form.

$('reset_button').click();

score 0 · Answer 6 · answered Dec 26 '13 at 09:11

0

Try this

<button type="submit" class="signup-btn" onclick="$('form')[0].reset()">Register</button>

answered Dec 26 '13 at 09:11

Sridhar R

20,190
6
38
35

score 0 · Answer 7 · answered Dec 26 '13 at 09:12

IMO this.form.elements[] is a collection array and you can access individual elements by passing either index or element name

For example, this.form.elements[0].value=''

OR

this.form.elements['email'].value='', this.form.elements['password'].value=''

I am not sure if you can really pass the class name to it to access all elements with that class name. To reset all elements in the form, you can use this.form.reset()

score 0 · Answer 8 · answered Dec 26 '13 at 09:14

Try this, First you need to edit your form tag like

<form action="#" name="form1" class="signup" method="post" onsubmit="return signup();">

Now add this script.

function resetForm($form1) {
    $form.find('input:text, input:password').val('');
}

resetForm($('#myform')); // by id, recommended
resetForm($('form[name=myName]')); // by name

score -1 · Answer 9 · answered Dec 26 '13 at 09:00

-1

Add reset button to your form,

<button type="reset" value="Reset">Reset</button>

answered Dec 26 '13 at 09:00

Kiran RS

981
14
31

Hi Kiran, I do not want to create a new button. I would like my register button to clear all my text boxes – KC Chai Dec 26 '13 at 09:05

Clear form Text boxes on Button Click

9 Answers9