How use jquery to change text of input button on click?

Question

I want to change the ADD text of the following button into "REMOVE" when clicking the button.

<input class="btn btn-6d" ahref="www.test.com" type="button" value="ADD"/>

I used the following jquery code for this:

$(':input[type="button"][class="btn-6d"]').click(function(){
var $this = $(this);
$this.toggleClass('btn-6d');
if($this.hasClass('btn-6d')){
    $this.value('ADD');         
} else {
    $this.value('REMOVE');
}
});

I'm probably doing something wrong with my selectors but I'm relatively new to programming and can't figure out what I'm doing wrong.

Here is a fiddle for you to play with:

http://jsfiddle.net/stijn777/shzuwu0v/

Thanks in advance,

Stijn

Don't forget in jsFiddle to include the jquery plugin. You can do this on the left panel, first dropdown. — Spokey
– Spokey, Commented Sep 18, 2014 at 11:10

iCollect.it Ltd · Accepted Answer · 2014-09-18 11:05:53Z

1

You were using value() instead of val(). Anything else below is just a little bit of cleanup :)

JSFiddle: http://jsfiddle.net/TrueBlueAussie/shzuwu0v/3/

   // Find the element by the generic btn class
    $(document).on('click', '.btn:input[type="button"]', function(){
        var $this = $(this);
        $this.toggleClass('btn-6d');
        if($this.hasClass('btn-6d')){
            $this.val('ADD');           
        } else {
            $this.val('REMOVE');
        }
    });

answered Sep 18, 2014 at 11:05

iCollect.it Ltd

93.9k26 gold badges189 silver badges210 bronze badges

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

1 Comment

Stiño Over a year ago

Thanks! That fixed the issue and I learned something useful here.

Spokey · Accepted Answer · 2014-09-18 11:08:08Z

0

Think easier, you just need to use the class as a selector. Also note that the method name is .val() and not .value()

  $('.btn.btn-6d').click(function () {
    var $this = $(this);
    
    $this.toggleClass('btn-6d');
    
    if ($this.hasClass('btn-6d')) {
        $this.val('ADD'); // method name is .val()
    } else {
        $this.val('REMOVE');
    }
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<input class="btn btn-6d" ahref="www.test.com" type="button" value="ADD" />

answered Sep 18, 2014 at 11:08

Spokey

11k2 gold badges31 silver badges44 bronze badges

Collectives™ on Stack Overflow

How use jquery to change text of input button on click?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related