jQuery AddClass method not working - javascript

I am trying to add a new class to a "submit" input after checking that other form elements are filled up. I´m using .keyup() to trigger the function. This function changes the property "disabled" to "false", but after that it does not add the class " animate pulse ". Thanks!
<script> //checks that all fields are completed before enabling submit button
$(document).ready(function() {
$('input[type="submit"]').prop('disabled', true);
$('input[type="text"],input[type="email"],input[type="password"]').keyup(function() {
if($('#log_password').val() != '' && $('#log_email').val() != '') {
$('input[type="submit"]').prop('disabled', false).addClass("animated pulse");
}
else{
$('input[type="submit"]').prop('disabled',true);
}
});
});
</script>

Your problem is how are you using the prop() function since this function does not return anything, and the addClass() function needs to be called from a jQuery object.
As you can see on the prop defintion it says:
Returns: Anything
This practice is called Chaining and in order to do Chaining functions those functions should return a jQuery Object.
More info
You can rewrite your line of code by something like this:
$('input[type="submit"]')
.addClass('animated pulse')
.prop('disabled', false);

Add seperately the addclass()
$(document).ready(function() {
$('input[type="submit"]').prop('disabled', true);
$('input[type="text"],input[type="email"],input[type="password"]').keyup(function() {
if($('#log_password').val() != '' && $('#log_email').val() != '')
{
$('input[type="submit"]').prop('disabled', false);
//add in next line
$('input[type="submit"]').addClass('animated pulse');
}
else{
$('input[type="submit"]').prop('disabled',true);
}
});
});

Related

How to return a value from a jQuery event function to the parent function?

I have a jQuery event inside a JavaScript function. I've already read that you cannot access the inner function. However, I would like to know how to adjust my code so that the parent function returns true or false depending on the jQuery function.
function validate() {
$("#button").on('click', function(){
var input = document.forms["formular"]["text"].value;
if (input == "") {
return false;
}
});
if(onclickfunction() == true){
return true;
}
else{
return false
}
}
validate();
Or can you recommend a different approach?
Not sure what this code is supposed to do, because calling validate only creates the event listener without actually executing it. But what you can do is to prevent the default action when you need, which is how validation is usually implemented:
$("#button").on('click', function(){
var input = document.forms["formular"]["text"].value;
yourSecondFunction(input !== "");
});
function yourSecondFunction(inputIsValid) {
// Do your magic here
}

Why the readonly false property is not working for the textbox?

I have an MVC dropdown and when its value changes it should make the textbox readonly and editable for certain values. I tried this, but it doesn't work.
$("#Users_UserGroupID").change(function () {
if ($("#Users_UserGroupID").val != "2") {
$("#Users_ClientName").prop("readonly", true);
$("#Users_ClientName").val("")
} else if ($("#Users_UserGroupID").val == "2") {
$("#Users_ClientName").attr("readonly", false)
$("#Users_ClientName").val("")
}
});
You need to invoke the val() method, not compare the reference to val. Also note that the logic can be simplified. Try this:
$("#Users_UserGroupID").change(function () {
$("#Users_ClientName").prop("readonly", $("#Users_UserGroupID").val() != "2").val("")
});
can you please try
$("#Users_ClientName").attr("readonly", "readonly");
instead of
Users_ClientName").prop("readonly", true);
as because readonly does not accept true or false.
and to remove you can use
$("#Users_ClientName").removeAttr("readonly");
Hope this will work.

JavaScript all On/Off button

I have 6 buttons and I wish to create a master button which will turn all the other buttons on or off. I managed to do that but ran into a problem when the master button would turn a button off if it was already on. I need this button to turn all the buttons on or off regardless of its previous state.Button 7 will be acting as master button. Thank you for taking the time to read this, any help would be much appreciated.
//master button
function button7(){
currentvalue = document.getElementById('button7').value;
if(currentvalue == "Off"){
document.getElementById("button7").value="On";
}else{
document.getElementById("button7").value="Off";
}
}
$(document).ready(function(){
$('#button7').on('click', function(){
$('#button7').toggleClass('on');
$('#button1').toggleClass('on');
$('#button2').toggleClass('on');
$('#button3').toggleClass('on');
$('#button4').toggleClass('on');
$('#button5').toggleClass('on');
$('#button6').toggleClass('on');
if(currentvalue == "Off"){
alert("off")
}
else{
alert("on")
}
});
});
//regular button
function button1(){
currentvalue = document.getElementById('button1').value;
if(currentvalue == "Off"){
document.getElementById("button1").value="On";
}else{
document.getElementById("button1").value="Off";
}
}
$(document).ready(function(){
$('#button1').on('click', function(){
$(this).toggleClass('on');
if(currentvalue == "Off"){
alert("off")
}
else{
alert("on")
}
});
});
If you want to set all the buttons to a specific state, don't use toggleClass() which, as the name itself suggests, is used to toggle class-names. Instead:
$('#button7').on('click', function(){
// select all the elements by their id:
$('#button1,#button2,#button3')
// remove both classes:
.removeClass('on off')
// add the class that the clicked-button currently represents:
.addClass(this.value)
// whatever Boolean the button currently represents,
// switch to the other option:
.val(this.value === 'On' ? 'Off' : 'On');
});
References:
addClass().
removeClass().
val().
Toggle the class on the button, the check if it has that class and use that to add or remove the class on all the other buttons. Using a boolean value as the second parameter to toggleClass will add or remove the class according to the boolean, not the presence of the class.
$(document).ready(function(){
$('#button7').on('click', function(){
$('#button7').toggleClass('on');
var currentvalue = $('#button7').hasClass('on');
$('#button1').toggleClass('on', curentvalue);
$('#button2').toggleClass('on', curentvalue);
$('#button3').toggleClass('on', curentvalue);
$('#button4').toggleClass('on', curentvalue);
$('#button5').toggleClass('on', curentvalue);
$('#button6').toggleClass('on', curentvalue);
if (currentvalue){
alert("on")
} else {
alert("off")
}
});
});

jQuery - Enable/Disable a button following checkboxes state

I'm using ASP.NET MVC 4 to develop a web app. I have a page which contains a submit button which should be enabled only if one of my two checkboxes (or both of them) is (are) enabled. The thing is, I'm trying to add an "or" operator in the following script but it does not give me what I want. So, here's my script :
The jQuery sample
And this is the part I'd like to improve :
$(document).ready(function() {
the_terms = $("#the-terms");
the_terms2 = $("#the-terms2");
the_terms.click(function() {
if ($(this).is(":checked")){
$("#submitBtn").removeAttr("disabled");
} else {
$("#submitBtn").attr("disabled", "disabled");
}
});
});
And I can't find a way to tell my document "Okay, if one of these 2 checkboxes (or both of them) is (are) checked, we can press on the button. If not, don't allow it".
Any idea guys?
It can be done with:
Fiddle
$('.checkbox').change(function(){
$('#submitBtn').prop('disabled', !$('.checkbox:checked').length > 0)
});
Note:
This find the checkboxes by class name checkbox so it will work with two checkboxes, whereas your original code is looking at a single checkbox via its ID.
Use the change event not click.
Simply use
$(".checkbox").click(function() {
$("#submitBtn").prop("disabled", !$('.checkbox:checked').length);
});
DEMO
$(document).ready(function() {
the_terms = $("#the-terms");
the_terms2 = $("#the-terms2");
$('.checkbox').change(function(){
$("#submitBtn").prop("disabled", !(the_terms.is(":checked") || the_terms2.is(":checked")));
});
});
// Make a function to be called on onload or on click
function checkTerm() {
jQuery('input[type="submit"]').attr('disabled',!jQuery('input.term:checked').length > 0 ) ;
}
// Call the function on load
$(document).ready(checkTerm) ;
// And call it on check change
jQuery(document).on('change','input.term',checkTerm) ;
Try below modified script , please check if it works as you want.
$(document).ready(function() {
the_terms = $("#the-terms");
the_terms2 = $("#the-terms2");
if(the_terms.is(":checked") || the_terms2.is(":checked"))
{
$("#submitBtn").removeAttr("disabled");
}
else
{
$("#submitBtn").attr("disabled", "disabled");
}
the_terms.click(function() {
if ($(this).is(":checked") || the_terms2.is(":checked")){
$("#submitBtn").removeAttr("disabled");
} else {
$("#submitBtn").attr("disabled", "disabled");
}
});
the_terms2.click(function() {
if ($(this).is(":checked") || the_terms.is(":checked") ){
$("#submitBtn").removeAttr("disabled");
} else {
$("#submitBtn").attr("disabled", "disabled");
}
});
});

Trying to set a conditional within a jQuery blur() event

I'm trying to get an input box to perform on blur() either set a value of 0.000 if the value entered is an empty string and if it isn't then perform some function. This is what I have. Help me out here, I don't know the appropriate syntax on how to do this.
jQuery("#10kt-weight").blur(function(){
if(valueOf("#10kt-weight") == "") {
jQuery("#10kt-weight").val("0.000");
} else {
calc_value();
}
});
jQuery("#10kt-weight").blur(function(){
if(jQuery("#10kt-weight").val() === "") {
jQuery("#10kt-weight").val("0.000");
} else {
calc_value();
}
});
Since your function is executed by the .blur() method, using this inside the function will refer to #10kt-weight, you can get the actual value of your element with jQuery(this).val() (or this.value) Try this:
jQuery("#10kt-weight").blur(function(){
if(jQuery(this).val() == "") {
jQuery(this).val("0.000");
} else {
calc_value();
}
});
You can try with jQuery.trim() to trim spaces and .length to check if there are characters after trim the input value
jQuery("#10kt-weight").blur(function(){
if(jQuery.trim(jQuery(this)).length) {
jQuery(this).val("0.000");
} else {
calc_value();
}
});

Categories