Hello everyone so I want to show and hide a button using jQuery, but only if a variable is true for example.
Ex:
var st1wch1 = false;
$(document).ready(function(){
$("#choice1").click(function(){
var st1wch1 = true
state1_1warrior()
});
});
$(document).ready(function(){
if(st1wch1 == false){
$("button#choice1").show()
}
else if(st1wch1 == true){
$("button#choice1").hide()
}
})
But for some reason it never hides, any ideas??? Thanks in Advance.
The most simple way to do it may be this:
$(document).ready(function(){
$("#choice1").click(function(){
$("button#choice1").toggle()
});
});
The logic you've implemented to show or hide the element is defined within the document ready event, which is raised before the user has a chance to click on the button and raise the event handler which toggles your global variable.
You probably wanted to hide and show when the element is clicked?
$("#choice1").click(function(){
$(this).toggle();
});
After changing the variable, you code does not go through the if else conditions. Put that show and hide condition inside a function like below
function toggleButton(){
if(st1wch1 == false){
$("button#choice1").show()
}
else if(st1wch1 == true){
$("button#choice1").hide()
}
}
and then call this function everytime you change the variable's value.
You must place your code inside the click handler.
I think you want to add at least 2 buttons later, and you want to toggle just a part of them or something like this.
var st1wch1 = false;
$(document).ready(function(){
$("#choice1").click(function(){
if(st1wch1 == false){
st1wch1 = true;
$("button#choice1").show()
}
else if(st1wch1 == true){
st1wch1 = false;
$("button#choice1").hide()
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="choice1">choice1</button>
You can use toggle:
var st1wch1 = true;
$('#choice1').toggle(condition);
Side note: Don't use things like
if (st1wch1 === true)
Do:
if (st1wch1)
and (for the == false / === false case):
if (!st1wch1)
document.ready() is only called when the page initially loads, so it evaluates the if/else statement when you load the page and then never again. Clicking the element doesn't rerun the if else statement.
To get the behavior you want you can either do
$("#choice1").click(function(){
$(this).toggle();
});
or
$("#choice1").click(function(){
evaluateBoolean();
});
function evaluateBoolean(){
if(st1wch1 == false){
$("button#choice1").show()
}
else if(st1wch1 == true){
$("button#choice1").hide()
}
}
You can use toggleClass.
$('#button').toggleClass('hidden', condition);
Created css class with display: none;
Related
sorry for this very basic question but it's makes me crazy, I don't understand what is not working on this very simple Jquery code.
I just want to change my "abc" boolean from false to true when clicking on my document and launch an alert when "abc" is true (just for exemple).
$(document).ready(function(){
var abc = false;
$(document).click(function(){
abc = true;
});
if (abc == true){
alert("ALERT");
//do some other things
}
});
Somebody to help ? Thanks
This is caused by JavaScript using an event model. This is your piece of code with detailed explanations:
var abc = false;
$(document).click(function() {
// Note that this function is attached to the `click` event
// It will be triggered only when the `click` event is triggered
// This means that the code inside it is not executed at the moment
abc = true;
});
// abc is false at the moment so the if statement won't execute
if (abc == true) {
alert("ALERT");
//do some other things
}
To fix this, just put the if statement inside the click handler and it will work fine.
$(document).ready(function() {
var abc = false;
$(document).click(function(){
abc = true;
if (abc == true){
alert("ALERT");
//do some other things
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Your alert won't launch because it is not inside the click handler. It executes only once when document loaded and stays calm. You should move your checking inside click
$(document).click(function(){
abc = true;
if (abc == true){
alert("ALERT");
//do some other things
}
});
moreover, for boolean values you can directly write the varaible name inside if condition as if expect a boolean anyway
if (abc == true){
can be shorten to
if (abc){
So, after putting all your pieces together,
$(document).ready(function() {
var abc = false;
$(document).click(function() {
abc = true;
if (abc) {
alert("ALERT");
//do some other things
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I have a flip toggle button().I am writing a function on change of toggle button,on change I am declaring js confirm box ,if confirms true the button remains in changed state,else it will revert in its previous state.My issue is the function is getting iterating(looping).Please suggest
To me it looks quite ok. Maybe you just forgot to encapsulate your code in $(document).ready - this is necessary because otherwise your Javascript function will be loaded before the HTML DOM has been loaded - so your function will fail to access the DOM elements.
$(document).ready(function() {
$("#btn").on("change", function() {
var txt;
var btnStatus = $("#btn").val();
console.log("btnstataus>>>>>" + btnStatus);
var r = confirm("Are you sure to change?");
if (r == true) {
if (btnStatus == "on") {
$("#btn").val("on");
} else {
$("#btn").val("off");
}
} else {
if (btnStatus == "on") {
$("#btn").val("off");
} else {
$("#btn").val("on");
}
}
});
});
Here is a working sample of your code:
https://plnkr.co/edit/AdzcN04F1fsLe9xw454j?p=preview
I have form that has input fields that are required, I point this out with made up class name.
I have piece of code that kind of works. If I focus on required input and then press submit, that input will become red, if empty (which I want). But it only works only on one at a time and if I have focus on the input.
My code is as follows:
function checkIfEmpty(){
$('#register-form input.gv-form-required').blur(function(){
if( !$(this).val()){
$(this).parent().parent().addClass("has-error");
return false;
}else{
return true;
}
});
}
I am almost certain that the blur() method is not suitable for my situation.
So help a man out here, please.
Try this : You have to use .each() to check every input inside form and put removeClass in else condition.
function checkIfEmpty(){
var empty = false;
$('#register-form input.gv-form-required').each(function(){
if($(this).val().trim()==""){
empty = true;
$(this).parent().parent().addClass("has-error");
}else{
$(this).parent().parent().removeClass("has-error");
}
});
return empty;
}
The blur event indeed doesn't seem right in your situation. What I would do is that I would itterate through each field and checked whether it is filled or not. If it is, remove (if any) has-error class. If it isn't filled, give it the has-error class
function checkIfEmpty(){
$('#register-form input.gv-form-required').each(function(){
if($(this).val() === ""){
$(this).parent().parent().addClass("has-error");
}else{
$(this).parent().parent().removeClass("has-error");
}
});
}
change your code to the following:
function checkIfEmpty(){
$('#register-form input.gv-form-required').each(function(){
if( !$(this).is(':empty')){
$(this).parent().parent().addClass("has-error");
}else{
$(this).parent().parent().removeClass("has-error");
}
});
}
try
in else condition
$(this).parent().parent().removeClass("has-error");
js code
if( !$(this).val()){
$(this).parent().parent().addClass("has-error");
}else{
$(this).parent().parent().removeClass("has-error");
}
<script>
function no_email_confirm() {
if (document.getElementsByName("no_email")[0].checked == false) {
return true;
} else {
var box= confirm("Sure?");
if (box==true)
return true;
else
document.getElementsByName("no_email")[0].checked == false;
}
}
</script>
And here is my HTML for the checkbox:
<input type="checkbox" id="no_email" name="no_email" onchange="no_email_confirm()"></input>
For some reason, this gives me the confirm pop up the first time I check the box, but not for any click after that. Also, even if I click "Cancel" it still checks the check box. I've searched on here and for some reason, no matter what I try, I can't get it to work properly.
It should confirm if they really want to check the box, if they select "Yes" then it checks it, if not, then it doesn't check it. I can get it to work without the name no_email, but I can't change that..
Anyone have any ideas?
Looks like you've got several errors in there, most notably using == when you probably meant =. Instead, add an event listener and make sure the assignment works:
var box = document.querySelector('#no_email');
box.addEventListener('change', function no_email_confirm() {
if (this.checked == false) {
return true;
} else {
var confirmation= confirm("This means that the VENDOR will NOT RECEIVE ANY communication!!!!");
if (confirmation)
return true;
else
box.checked = false;
}
});
http://jsfiddle.net/A3VGg/1/
I am trying to prevent a radio button not to be checked if a false is returned from the onclick.
Following is the jsbin link for the code I am using.
http://jsbin.com/oruliz/2/
Is there anything I am missing; BTW, I am trying to use JS with no framework.
However, if pure js has this issue is there a workaround for prototyoe.js ?
Try this
function propertyDamageType_click(elem) {
if(yourconditionfails){ // or if(yourconditionfails && !elem.checked)
elem.checked = false;
alert('Please select an incident type');
}
}
Demo
You should user return propertyDamageType_click() .
See the http://jsbin.com/uvopek/1/edit
You can use a flag and return false whenever the pre codition is not met....
var IsIncidenntTypeSelected = 0; // flag - sets to 1 when pre condition is met
$("input[type='radio']").click(function()
{
if(IsIncidenntTypeSelected == 0)
return false;
}