Develop Reference

Changing button text using javascript not working

I am working in this fiddle http://jsfiddle.net/vVsAn/4821/ I want to make the button text change on click. I have tried different things but non seem to work for me. Any help will be appreciated. below is my html code <div id='content'>Category Contents</div>
<input type='button' id='hideshow' value='Show Categories'>
is there any way i can add some transitional effect to it? i.e making the content show/hide "vertically" from top-bottom & bottom-top because by default, it is moving from left-right & right to left

Your main problem is that <input>s have a value, but you're trying to use .text() on it. Your first step is to change that to .val().
Next, you're using a kinda old version of jQuery, try something more recent, and instead of .live() (which is deprecated), use .on().
Here's a working demo. (Note: I did change the jQuery version to 2.2.1)

you can do something like this...
http://jsfiddle.net/vVsAn/4822/
$(document).ready(function() {
var count = 0;
$('#hideshow').live('click', function(event) {
$('#content').toggle('show');
count++;
if(count % 2)
{
$(this).attr('value', 'Show Categories');
}
else
{
$(this).attr('value', 'Hide Categories');
}
});
});

You have a few issues
You are using an input which has a value you can get with .val() not a text property
You are checking for "Show Answer" but your button acutally says "Show Category"
You should use a newer version of jQuery and .on() instead of .live() if at all possible
$(document).ready(function() {
$('#hideshow').live('click', function(event) {
$this=$(this);
$('#content').toggle();
if ($.trim($this.val()) === 'Show Answer') {
$this.val('Hide Answer');
} else {
$this.val('Show Answer');
}
return false;
});
});
#content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div id='content'>Category Contents</div>
<input type='button' id='hideshow' value='Show Answer'>

There are two issues in your code.
You should use .val() function instead of .text()
Your button value is Show Categories not Show Answer
$( document ).ready( function(){
$('#hideshow').on('click', function(event) {
$('#content').toggle('show');
if ($.trim($(this).val()) === 'Show Categories') {
$(this).val('Hide Answer');
} else {
$(this).val('Show Answer');
}
return false;
});
});
Note: .live()is Deprecated as of Jquery Ver. 1.7. So use .on() instead

Prevent anchor click after one click

I am facing one issue, I want to disable anchor click after one click. I have
on-click attribute set in my anchor tag. Below is my HTML
<a style="cursor:pointer;" id="someId" onclick="Myfuntion()">Verify</a>
After I click "Verify" I am changing anchors text to "Verifying..." and one more thing I am trying to disable this anchor to avoid click in between the verification logic going on.
I have tried event.preventdefault() and also added disabled attribute to anchor.
But nothing works.
Please help!

If you were using jQuery for this you could have done this more easly.
Here we add a new class to a link to show that it has been clicked already. We check this when a click is made.
<a style="cursor:pointer;" id="someId">Verify</a>
$('#someId').on('click',function(){
//Check if button has class 'disabled' and then do your function.
if(! $(this).hasClass('disabled')){
$(this).addClass('disabled');
Myfuntion();
$(this).removeClass('disabled');
}
});

Here is a demo as to how it could be done using Javascript.
//Pass the event target to the function
function Myfuntion(elem) {
//If the element has no "data-status" attribute
if (!elem.getAttribute("data-status")) {
//Set attribute "data-status=progress"
elem.setAttribute("data-status", "progress");
//Change the text of the element
elem.textContent = "Verifying...";
//The setTimeout(s) below is only for the demp purpose
//Lets say, your verification process takes 4 seconds
//When complte
setTimeout(function() {
//Remove the attribute "data-status"
elem.removeAttribute("data-status");
//Notify the use that verification is done
elem.textContent = "Verified";
//Again, this is only for demo purpose
setTimeout(function() {
//User may verify again
elem.textContent = "Verify";
}, 1000);
}, 4000);
}
return false;
}
Link to the demo

There are plenty of ways to do this; one simple approach is to just redefine the function itself:
var myFunction = function() {
alert('clicked');
// do whatever your function needs to do on first click, then:
myFunction = function() { // redefine it
// to no-op, or to another action
alert('second click');
}
}
<a onclick="myFunction()">click me</a>

jquery click event to swap text not firing on first click but works after

I'm new to javascript and jquery, and I have this little bit of code to swap one bit of text for another that works perfectly except for the very first time you click the div.
Any ideas? I'm probably just calling on it wrong but not sure how to proceed
Here's a fiddle: http://jsfiddle.net/pauljackson/4r8v6/
js:
$(document).ready(function() {
$("#showemail").click(function() {
var $self = $(this);
if ($self.text() == "Contact")
$self.text("someguy#theinternet.com");
else
$self.text("Contact");
});
});
html:
<div id="showemail">
Contact
</div>
css:
#showemail:hover {
cursor:pointer;
}
Thanks!

Your text has some whitespace originally, trim it:
if ($self.text().trim() == "Contact")
The reason it works the second click is because your else condition sets the text to "Contact" without whitespace - then the next time you click your condition evaluates to true and all is well
Fiddle: http://jsfiddle.net/4r8v6/3/

Heres an update. Note the trim. It seems there is some additional text in the #showemail div that needs to be trimmed.
$(document).ready(function() {
$("#showemail").click(function() {
var $self = $(this);
console.log($self.text());
if ($self.text().trim() == "Contact") {
$self.text("someguy#theinternet.com");
}
else {
$self.text("Contact");
}
});
});

How do I add and remove class in between this jQuery code?

I have this scripts that either enable or disable an submit button. My issue here is I want to remove the current class (yellow) and add a new one (green) if the inputs aren't empty. Also the value of the button I want to change from "Order Now!" to "Proceed!". I've tried checking the fields with an if-statement, but it didn't work out, the only part I can get to work is wether or not the submit is disabled.
My submit button are like this:
<input type="submit" class="submit-order-btn yellow" value="Order now!">
My jQuery looks like this:
var $submit = $('.submit-order-btn'),
$inputs = $('input[type=text]');
function checkEmpty() {
return $inputs.filter(function() {
return !$.trim(this.value);
}).length === 0;
}
$inputs.on('blur keyup', function() {
$submit.prop("disabled", !checkEmpty());
}).blur();
// DEBUG BEGIN \\
$submit.on("click", function() {
alert("Submitted");
});
// DEBUG END \\

I'm not clear on when you want the class and value change to happen, do you mean like this?
$inputs.on('blur keyup', function() {
$submit.prop("disabled", !checkEmpty());
if (!checkEmpty()) {
$submit.removeClass('yellow').addClass('green');
$submit.val('Proceed!');
} else {
$submit.removeClass('green').addClass('yellow');
$submit.val('Order now!');
}
}).blur();

you could do this just with css:
.yellow{
background-color:green;
}
input[type="submit"]:disabled{
background-color:yellow;
}
see here: http://jsfiddle.net/FR75Q/

You mean something like .addClass('') and .removeClass('')?
Sample: http://fiddle.jshell.net/AJLsz/

Checkbox: disable/enable href in jQuery

I want to enable/disable my <a href> button via a checkbox (default = disabled). Is it possible?
$('#check').change(function() {
});
What is the next step? I think I need unbind function?
(I want to disable checkout button until user not clicking on Terms And Conditions checkbox).
Thanks

Here is one solution. jsFiddle
HTML:
<a id="to-toggle" data-href="http://google.com/">My Link</a><br />
<input id="toggle" type="checkbox"> Toggle it
JS:
var link = $("#to-toggle");
$("#toggle").on("change", function() {
if(this.checked) {
link.attr("href", link.data("href"));
} else {
link.removeAttr("href");
}
});

If you want to disable and enable a link, this should work:
$('.button').click(function(){ return false; }); // initially disabled.
$('#check').click(function() {
if(!$(this).is(':checked')){
$('.button').bind('click', function(){ return false; });
}else{
$('.button').unbind('click');
}
});
http://jsfiddle.net/hQJXW/3/

$('#check').mousedown(function(){
if(!$(this).is(':checked')) {
$('.link').click(function(e){
e.preventDefault();
});
}
});