Button:

<button type="submit" id="status" class="button" value="True"><span>followed</span></button>

jQuery:

<script>
$(".button").toggle(function() {
    $(this).val('followed');
}, function(){
    $(this).val('follow');
});
</script>

When the user clicks the button I want it to toggle to the other value. But right now when I run the code the button just disappears from the page! What's wrong with this code?

Edit: Thanks for the help. Here is the entire updated jQuery:

<script>
$(document).ready(function(){
    $(".button").click(function() {
        var status = $("#status").val();
        var course = $("#course").html()

        //NEW SECTION that I'm having trouble with
        if ($(".button span").html() == "followed") {
            $(".button").on("mouseover", function () {
            $(".button span").html() = "unfollow";
}}

        $.ajax({
            type: "POST",
            url: "/follow",
            data: 'status=' + status + "&course=" + course,
            success: function() {
$(".button span").html($(".button span").html() == 'followed' ? 'follow' : 'followed');
$(".button").val($(".button").val() == 'True' ? 'False' : 'True');
}
        });
        return false;
    });
});
</script>

The onclick works. I then added the new onmouseover code to change "followed" to "unfollowed", and when I run it I get

405 Method Not Allowed

The method POST is not allowed for this resource.

What's wrong with the onmouseover code?

Also, what is the function of

return false;

?

Button:

<button type="submit" id="status" class="button" value="True"><span>followed</span></button>

jQuery:

<script>
$(".button").toggle(function() {
    $(this).val('followed');
}, function(){
    $(this).val('follow');
});
</script>

When the user clicks the button I want it to toggle to the other value. But right now when I run the code the button just disappears from the page! What's wrong with this code?

Edit: Thanks for the help. Here is the entire updated jQuery:

<script>
$(document).ready(function(){
    $(".button").click(function() {
        var status = $("#status").val();
        var course = $("#course").html()

        //NEW SECTION that I'm having trouble with
        if ($(".button span").html() == "followed") {
            $(".button").on("mouseover", function () {
            $(".button span").html() = "unfollow";
}}

        $.ajax({
            type: "POST",
            url: "/follow",
            data: 'status=' + status + "&course=" + course,
            success: function() {
$(".button span").html($(".button span").html() == 'followed' ? 'follow' : 'followed');
$(".button").val($(".button").val() == 'True' ? 'False' : 'True');
}
        });
        return false;
    });
});
</script>

The onclick works. I then added the new onmouseover code to change "followed" to "unfollowed", and when I run it I get

405 Method Not Allowed

The method POST is not allowed for this resource.

What's wrong with the onmouseover code?

Also, what is the function of

return false;

?

• javascript
• jquery
• button

• 1 You need to set up the click event. – Marko Commented Jan 10, 2014 at 23:10
• @darkmango: depending on what version of jquery you are using. Please see my demo below. You must be using the newer version. For this to work you have to use 1.8 – Alex Shilman Commented Jan 10, 2014 at 23:24

7 Answers 7

WORKING EXAMPLE

$(".button").click(function() {
     $(".button span").html($(".button span").html() == 'followed' ? 'follow' : 'followed');
});

Since you're probably new to jQuery here's a lil translation of what the others posted since you / someone might not know ? : operators yet.:

$i = 1;

$(function () {
    $(".button").click(function () {
        if ($i === 0) {
            $(this).text("followed");
            $i = 1;
        } else {
            $(this).text("follow");
            $i = 0;
        }
    });
})

Toggle is meant to "Display or hide the matched elements."

You just need to listen for the click event:

$(".button").on("click", function() {
  $(this).html($(this).html() == 'follow' ? 'followed' : 'follow');
});

jQuery toggle shows or hides elements. You are not using it correctly. You should use .on('click', function(), or .click(function() instead.

Also, for the text, you should use .text(), or .html() to include span tags, which you seem to have in your button.

See docs: http://api.jquery.com/toggle/

Update with example code

// native element tags perform better than classname selectors
// so use button instead of .button
$('button').click(function () { 
    var text = 'follow';
    // save $(this) so jQuery doesn't have to execute again
    var $this = $(this).find('span');
    if ($this.text() === text) {
        $this.text('followed');
    } else {
        $this.text(text)
    }
});

See JSFiddle.

The toggle click has been deprecated in the newer jQuery api. But the older still works. The reason why it gets removed on your end is because you are using the newer version, which is equivalent of fade toggle. Look at my demo using Jquery 1.8

<input type="button" onclick ="play" value="play"/>

 $("input[type='button']").toggle(function (){
       $(this).val("Pause");
    }, function(){
    $(this).val("Play");
});

DEMO

Using the code you can get solution:

just create function sign_in_up(idElement)

JS:

  function sign_in_up(idElement) {
        var element = document.getElementById('element' + idElement);
        if (idElement === 1 || idElement === 2) {
            if (element.innerHTML === 'SIGN IN') element.innerHTML = 'SIGN UP';
            else {
                element.innerHTML = 'SIGN IN';
            }
        }
    }

HTML:

 <button onClick="javascript:sign_in_up(1)" ></button>    
 <div id="element1"> SIGN UP </div>

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
    $(this).text()==='Click me away!' ? $(this).text('i am clic') : $(this).text('Click me away!');
});
});
</script>
</head>
<body>


<button type="submit">Click me away!</button>
<button type="submit">Click me also</button>

</body>
</html>