How to change button text onclick with toggle function
Question
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;
?
7 answers
solution1
9 ACCPTED 2014-01-10 23:14:54
$(".button").click(function() {
$(".button span").html($(".button span").html() == 'followed' ? 'follow' : 'followed');
});
solution2
2 2014-01-10 23:18:38
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;
}
});
})
solution3
1 2014-01-10 23:10:25
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 .
solution4
1 2014-01-10 23:11:00
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');
});
solution5
0 2014-01-10 23:23:26
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");
});
solution6
0 2017-01-27 09:45:02
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>
solution7
0 2017-01-30 05:53:04
<!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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.