We Keep Coding

Toggle click function

Okay, so i successfully toggled a bool and some other options.
But whenever i make another click function for another button to toggle the bool to false, it doesn't work.
My code:
let managementbool = false;
$("#management").on('click', function(){
managementbool = true;
if(managementbool)
{
$(".dot1").hide();
$(".dot2").hide();
$(".topbar").hide();
$(".boostingtext").hide();
$(".mainbar").hide();
$("#container").hide();
$(".dot11").show();
$(".dot22").show();
$(".topbar1").show();
$(".boostingtext1").show();
$(".mainbar1").show();
}
});
$("#contracts").click(function () {
managementbool = false;
$(".dot11").hide();
$(".dot22").hide();
$(".topbar1").hide();
$(".boostingtext1").hide();
$(".mainbar1").hide();
$(".dot1").show();
$(".dot2").show();
$(".topbar").show();
$(".boostingtext").show();
$(".mainbar").show();
$("#container").hide();
});
First button to toggle it to true works, but whenever i click the button that sets it to false. Nothing happens.

You didn't add your function correctly. $("#contracts").on('click', function() { ... }); should work.
Also take a look at whether you really need your managementbool variable. When I click on #management you set it to true and thus always execute the code in your if-statement, making the if-statement redundant. In the code segment you show, it seems you never actually do anything based on the value of managementbool.
$("#show").on('click', function() {
$("#some_element").show();
});
$("#hide").on('click', function() {
$("#some_element").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="show">Show</button>
<button id="hide">Hide</button>
<div id="some_element">Test</div>

jquery change event validation stop other actions

Not sure if this has been answered elsewhere, (apologies if so!)
But...
I have an edit field which is validated on the .change() event.
what I want to do is this:
if the user has mouse-pressed the save button directly after typing, .change() fires first, then the button .click() fires after - I want to prevent the .click() event firing if the entered value doesn't get validated, once the popup has been cleared.
This is an example of what it is doing now, but this still allows other buttons to be pressed.
validateRetention(e) {
if (someCondition) {
return true;
} else {
return false;
}
}
$('input[type="number"]').change(function () {
if (!validateRetention(this)) {
alert("bad data entered");
}
}

You need to prevent default action:
$('form').on('submit', function(event) {
if(isNotValidForm) {
event.preventDefault();
// make validation balloons
}
});

Prevent click after focus event

When user clicks on input field, two consecutive events are being executed: focus and click.
focus always gets executed first and shows the notice. But click which runs immediately after focus hides the notice. I only have this problem when input field is not focused and both events get executed consecutively.
I'm looking for the clean solution which can help me to implement such functionality (without any timeouts or weird hacks).
HTML:
<label for="example">Example input: </label>
<input type="text" id="example" name="example" />
<p id="notice" class="hide">This text could show when focus, hide when blur and toggle show/hide when click.</p>
JavaScript:
$('#example').on('focus', _onFocus)
.on('blur', _onBlur)
.on('click', _onClick);
function _onFocus(e) {
console.log('focus');
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
$('#notice').removeClass('hide');
}
function _onClick(e) {
console.log('click');
$('#notice').toggleClass('hide');
}
function _onBlur(e) {
console.log('blur');
$('#notice').addClass('hide');
}
UPDATED Fiddle is here:

I think you jumbled up the toggles. No need to prevent propagation and all that. Just check if the notice is already visible when click fires.
Demo: http://jsfiddle.net/3Bev4/13/
Code:
var $notice = $('#notice'); // cache the notice
function _onFocus(e) {
console.log('focus');
$notice.removeClass('hide'); // on focus show it
}
function _onClick(e) {
console.log('click');
if ($notice.is('hidden')) { // on click check if already visible
$notice.removeClass('hide'); // if not then show it
}
}
function _onBlur(e) {
console.log('blur');
$notice.addClass('hide'); // on blur hide it
}
Hope that helps.
Update: based on OP's clarification on click toggling:
Just cache the focus event in a state variable and then based on the state either show the notice or toggle the class.
Demo 2: http://jsfiddle.net/3Bev4/19/
Updated code:
var $notice = $('#notice'), isfocus = false;
function _onFocus(e) {
isFocus = true; // cache the state of focus
$notice.removeClass('hide');
}
function _onClick(e) {
if (isFocus) { // if focus was fired, show/hide based on visibility
if ($notice.is('hidden')) { $notice.removeClass('hide'); }
isFocus = false; // reset the cached state for future
} else {
$notice.toggleClass('hide'); // toggle if there is only click while focussed
}
}
Update 2: based on OP's observation on first click after tab focus:
On second thought, can you just bind the mousedown or mouseup instead of click? That will not fire the focus.
Demo 3: http://jsfiddle.net/3Bev4/24/
Updated code:
$('#example').on('focus', _onFocus)
.on('blur', _onBlur)
.on('mousedown', _onClick);
var $notice = $('#notice');
function _onFocus(e) { $notice.removeClass('hide'); }
function _onClick(e) { $notice.toggleClass('hide'); }
function _onBlur(e) { $notice.addClass('hide'); }
Does that work for you?

Setting a variable for "focus" seems to do the trick : http://jsfiddle.net/3Bev4/9/
Javascript:
$('#example').on('focus', _onFocus)
.on('click', _onClick)
.on('blur', _onBlur);
focus = false;
function _onFocus(e) {
console.log('focus');
$('#notice').removeClass('hide');
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
focus = true;
}
function _onClick(e) {
console.log('click');
if (!focus) {
$('#notice').toggleClass('hide');
} else {
focus = false;
}
}
function _onBlur(e) {
console.log('blur');
$('#notice').addClass('hide');
}

If you want to hide the notice onBlur, surely it needs to be:
function _onBlur(e) {
console.log('blur');
$('#notice').addClass('hide'); // Add the hidden class, not remove it
}
When doing this in the fiddle, it seemed to fix it.

The code you have written is correct, except that you have to replae $('#notice').removeClass('hide'); with $('#notice').addClass('hide');
Because onBlur you want to hide so add hide class, instead you are removing the "hide" calss.
I hope this is what the mistake you have done.
Correct if I am wrong, Because I don't know JQuery much, I just know JavaScript.

you can use many jQuery methods rather than add or move class:
Update: add a params to deal with the click function
http://jsfiddle.net/3Bev4/23/
var showNotice = false;
$('#example').focus(function(){
$('#notice').show();
showNotice = true;
}).click(function(){
if(showNotice){
$('#notice').show();
showNotice = false;
}else{
showNotice = true;
$('#notice').hide();
}
}).blur(function(){
$('#notice').hide();
});

problems in checking the form input values before submitting using JQUERY

my code is as follows
$(document).ready(function() {
// this is a button to add the form to the DOM tree.
$("#submitPara").click(function() {
$("body").append('<form id = "dimensionAndObjects" action = "#"></form>');
some code to add some input fields, omitted...
$('#dimensionAndObjects').append('<p><input id = "submitDO" type = "submit" value = "submit"></input></p>');
return true;
});
$('#dimensionAndObjects').submit(function() {
alert("haahhhahhaha");
return false;
});
});
it seems that the submit function doesn't work because the alert info doesn't appear.
if i put the submit function inside the click function, it doesn't work either.
what's wrong? I am a totally freshman to jQuery, thanks in Advance!

since the form is created dynamically you need to use event delegation
$(document).on('submit', '#dimensionAndObjects', function() {
alert("haahhhahhaha");
return false;
});

$('#dimensionAndObjects').live('click',function(e) {
e.preventdefault();
alert("haahhhahhaha");
return false;// for not submit the form
return true ;// for submit the form
});

How can I unobtrusively disable submit buttons with Javascript and Prototype?

So I found this recommendation, but I can't quite seem to figure out how.
This is the code I originally started with:
function greySubmits(e) {
var value = e.srcElement.defaultValue;
// This doesn't work, but it needs to
$(e).insert('<input type="hidden" name="commit" value="' + value + '" />');
// This causes IE to not submit at all
$$("input[type='submit']").each(function(v) {v.disabled = true;})
}
// This works fine
Event.observe(window, 'load', function() {
$$("input[type='submit']").each(function(e) {
Event.observe(e, 'click', greySubmits);
});
});
Anyway, I am pretty close, but I can't seem to get any further.
Thanks for any help at all!
Update: Sorry, I guess I wasn't entirely clear. I'd like to disable all of the submit buttons when someone clicks a submit button. But I do need to send along the value of the submit button so the server knows which button I clicked, hence the insert call. (Note: insert does not create a child of the element you call it on.) And then after disabling the submit buttons I need to call the containing form of the submit buttons submit call, as IE will not submit after you disable the button. Does that make sense?

You need to do exactly what the answer says :
"Do not disable the button in its "onclick", but save it, and do it in form's onsubmit."
So in greySubmits() keep the line that sets the hidden value, but remove the line that disables all the submit buttons.
Then add another event handler in your online - to the form, not the submit buttons - that does the disabling.
function reallyGreySubmits(e) {
// This causes IE to not submit at all
$$("input[type='submit']").each(function(v) {v.disabled = true;})
}
Event.observe(window, 'load', function() {
$$("input[type='submit']").each(function(e) {
Event.observe(e, 'click', greySubmits);
});
$$("form").each(function(e) {
Event.observe(e, 'submit', reallyGreySubmits);
});
});
Another option, which I've used is to not disable the submits but to swap visibility between two elements. On click, mark the submits hidden, and then make visible a div or some other element that displays as "disabled" in their place.

I finally got it to work. Ryan helped so I'll upvote him :-) Here's the code:
function replaceSubmit(e) {
var el = e.element();
Element.insert(el, { 'before': '<input type="hidden" name="' + el.name + '" value="' + el.value +'" />'});
}
function greySubmits(e) {
// Don't disable the submit if the submit was stopped with a return(false)
if (e.returnValue) {
$$("input[type='submit']").each(function(v) {v.disabled = true;})
}
}
function fixButtons() {
$$("input[type='submit']").each(function(v) {
if (Element.hasClassName(v, 'disabled')) {
v.disabled = true;
} else {
v.disabled = false;
}
});
}
Event.observe(window, 'load', function() {
fixButtons();
$$("input[type='submit']").each(function(e) {
Event.observe(e, 'click', replaceSubmit);
});
$$("form").each(function(e) {
Event.observe(e, 'submit', greySubmits);
});
});
The fixButtons is so that when people click the back button the page will fix all the buttons. And if you want to disable a button and have it not re-enable on a back you just give it a class of disabled.

document.observe("dom:loaded", function(){
$$('form').find(function(thisForm) {
Event.observe(thisForm, 'submit', function(event) {
$$('input[type="submit"]').find(function(input) {
input.value = 'Please wait ...';
input.setAttribute('disabled',true);
});
});
});
});

Here's what I came up with, which is adapted from above. Fixed so that it detects a cancelled event propagation using Prototype's stopped attribute.
Other changes include using longer variable names (I always get confused about whether e is event or element), and a function that removed the replacement inputs if the form submission is cancelled. In my implementation pressing back on the browser doesn't show the page as it was when the user left it, instead it seems to be refetched (I'm using Rails), so I've removed that part too.
I'm using buttons rather than inputs in my application so that part has changed also.
function replaceSubmit(event) {
var element = event.element();
Element.insert(element, { 'before': '<input type="hidden" name="' + element.name + '" value="' + element.value +'" class="button_replacement">'});
}
function removeReplacementSubmits() {
$$('input.button_replacement').each(function(button) {
button.remove();
});
}
function greySubmits(event) {
// Don't disable the submit if the submit was stopped with a return(false)
if (event.stopped === true) {
removeReplacementSubmits();
} else {
$$('button[type="submit"]').each(function(button) {
button.disabled = true;
button.innerHTML += '…';
});
}
}
Event.observe(window, 'load', function() {
$$("button[type='submit']").each(function(element) {
Event.observe(element, 'click', replaceSubmit);
});
$$("form").each(function(element) {
Event.observe(element, 'submit', greySubmits);
});
});