CODEWITHSUNDEEP
jqueryhtml-input
Tamerlan Vahabzade
Tamerlan Vahabzade

Reputation: 71

toggle value of button Jquery

I want to toggle the value of button using the jquery toggle functions, but it doesn't works

my button is as follows:

<input type="button" value="Click to send message"  id="send_message_button">

Now I want to toggle the Click to send message to Click to hide message with jquery, is this possible ?

Upvotes: 2

Views: 5809

Answers (6)

Alexander Nicholas Popa
Alexander Nicholas Popa

Reputation: 272

Hello try this: http://jsfiddle.net/zander_pope/udu5cchh/

$(function () {
    $('.button').on('click', function (e) {
        if (!$('.dd').val()) {
            $('.dd').val("relevance");
        } else {
            $('.dd').val("");
        }
    });
});
$(function () {
    $('.button').on('click', function (e) {
        $('.search').click();
    });
});

This will work and can be adapted to your code.

Upvotes: 0

Atber
Atber

Reputation: 465

I'm not sure, that it'll be nice solution, but read it as one of the cases. JsFiddle

Add data attribute:

<input type="button" value="Click to send message" data-value="Click to hide message"  id="send_message_button" />

Js code:

$('#send_message_button').on('click', function(){
    $(this).val((function(input) {var alt = $(input).data('value'); $(input).data('value', $(input).val()); return alt;})(this))  
});

Upvotes: 0

Rohith Gopi
Rohith Gopi

Reputation: 566

I think its bit tricky with toggle function. I have created a fiddle for you please check.

http://jsfiddle.net/8udzL/

$(document).ready(function () {
$('#send_message_button').click(function () {

    if ($('#send_message_button').val() == "Click to send message") {
        $('#send_message_button').val("Click to hide message");
    } 
    else
    {
    $('#send_message_button').val("Click to send message");
    }
});

});

Upvotes: 1

nix
nix

Reputation: 3302

If you mean toggle like it reverts back when you clicked it again. Try this:

var clicked = false;
$('#send_message_button').click(function(){
    $(this).val("Click to "+ (clicked? "send": "hide") + " message");
    clicked = !clicked;
});

Upvotes: 5

AKD
AKD

Reputation: 3966

<input type="button" value="Click to send message" OnClick="toggle()"  id="send_message_button">

function toggle(){
    $('#send_message_button').val("Click to hide message");  
}

Upvotes: 0

vinothini
vinothini

Reputation: 2604

Please have a look at http://jsfiddle.net/QcUtc/

<input type="button" value="Click to send message"  id="send_message_button">

$('#send_message_button').click(function(){
    $(this).val("Click to hide message");  
});

Upvotes: 0

Related Questions