CODEWITHSUNDEEP
jquerybutton
Stiño
Stiño

Reputation: 2853

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

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

Upvotes: 2

Views: 1331

Answers (2)

Spokey
Spokey

Reputation: 10994

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" />

Upvotes: 0

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93571

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');
        }
    });

Upvotes: 1

Related Questions