Clear Input Fields on button click

Question

I have got a input field where in user enters data. There are 2 buttons next to it upon click any one of them or both the input fields get reset. Now since these buttons and field is not inside a form I can't go for a instead how can i clear it with JQuery. The point is, now I have displayed only 2 buttons, the JQuery must also work if there where more buttons..Fiddle link below and the code i tried

$('button').each(function(){
   $('button').click(function(){
      find('input[type="text"]').val() = "0";
   });
});

[Fiddle link] http://jsfiddle.net/vineetgnair/1s22gcL5/

Thanks to all for help.

The val() method gets or sets the value of the "selected" elements, to set it , add the new value as a parameter , so to reset the field call: val("") — EaziLuizi
– EaziLuizi, Commented Aug 26, 2014 at 9:23
Hey Guys there is a bug i just figuered or may be I am wrong,but just to get cleared. On the same fiddle when you console log you will find one button click is equal to two buttons getting clicked. To prove my point here is the fiddle link jsfiddle.net/vineetgnair/1s22gcL5/12. Open up your consoles and see. Just clicking one button, the console shows 2 clicked...how can it be cleared.. — Vineet
– Vineet, Commented Aug 26, 2014 at 9:42
no no punitha.. i dont want to use <input type="reset" /> as I am not using forms here...i want to do it via JQuery — Vineet
– Vineet, Commented Aug 26, 2014 at 9:48
@VineetGNair..just remove $('button').each(function(){ line and see.. — Kartikeya Khosla
– Kartikeya Khosla, Commented Aug 26, 2014 at 10:01

Kartikeya Khosla · Accepted Answer · 2017-01-31 13:17:12Z

10

This will work:

$('button').click(function(){
   $('input[type="text"]').val(0);
});

If you want to just reset field then :

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

edited Jan 31, 2017 at 13:17

answered Aug 26, 2014 at 9:20

Kartikeya Khosla

18.9k8 gold badges46 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mritunjay · Accepted Answer · 2014-08-26 09:21:34Z

2

No need of saying each, just say .click it will apply for every button

$('button').click(function(){
      $('input[type="text"]').val(0);
});

DEMO

answered Aug 26, 2014 at 9:21

Mritunjay

25.9k7 gold badges57 silver badges71 bronze badges

Comments

mk117 · Accepted Answer · 2014-08-26 09:21:55Z

1

Instead of javascript variable defining to jQuery.function = 0, you should just reset the value to clear the contents of the input field with .val('');

$('button').each(function(){
    $('button').click(function(){
        $('input[type="text"]').val('');
    });
});

answered Aug 26, 2014 at 9:21

mk117

7752 gold badges14 silver badges27 bronze badges

Comments

Klapsius · Accepted Answer · 2014-08-26 09:26:32Z

1

This clean text field:

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

This change value to 0:

 $('button').click(function(){
        $('input[type="text"]').val(0);
    });

answered Aug 26, 2014 at 9:26

Klapsius

3,3676 gold badges36 silver badges61 bronze badges

Comments

RGS · Accepted Answer · 2014-08-26 09:21:33Z

0

Try this.

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

answered Aug 26, 2014 at 9:21

RGS

5,2317 gold badges44 silver badges69 bronze badges

Comments

Viswanath Donthi · Accepted Answer · 2014-08-26 09:22:45Z

0

Here'e the code:

$('button').click(function(){
   $('input[type="text"]').val('0');
});

That's it.

answered Aug 26, 2014 at 9:22

Viswanath Donthi

1,8211 gold badge12 silver badges12 bronze badges

Comments

Punitha Subramani · Accepted Answer · 2014-08-26 09:44:29Z

0

<input type="reset" value="button 2" />

answered Aug 26, 2014 at 9:44

Punitha Subramani

1,4621 gold badge8 silver badges6 bronze badges

Comments

Sandip Armal Patil · Accepted Answer · 2014-08-26 09:48:58Z

0

You can use following code to clear your input field on button click.

$('button').each(function(){
    $(this).click(function(){
        $('input[type="text"]').val('');
    });
});

edited Aug 26, 2014 at 9:48

Sandip Armal Patil

5,89523 gold badges95 silver badges162 bronze badges

answered Aug 26, 2014 at 9:22

VPK

3,0781 gold badge30 silver badges36 bronze badges

Collectives™ on Stack Overflow

Clear Input Fields on button click

8 Answers 8

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related