Firing an event after .slideDown - javascript

I have a nested accordion like so:
<script>
$(document).ready(function(){
var parentDivs = $('#standard div'),
childDivs1 = $('#standard h4').siblings('div');
childDivs2 = $('#standard h5').siblings('div');
$('#standard h3').click(function () {
parentDivs.slideUp();
if ($(this).next().is(':hidden')) {
$(this).next().slideDown({easing:'easeOutQuad', duration:1000});
} else {
$(this).next().slideUp({easing:'easeOutQuad', duration:1000});
}
});
$('#standard h4').click(function () {
childDivs1.slideUp();
if ($(this).next().is(':hidden')) {
$(this).next().slideDown({easing:'easeOutQuad', duration:1000});
} else {
$(this).next().slideUp({easing:'easeOutQuad', duration:1000});
}
});
$('#standard h5').click(function () {
childDivs2.slideUp();
if ($(this).next().is(':hidden')) {
$(this).next().slideDown({easing:'easeOutQuad', duration:1000});
} else {
$(this).next().slideUp({easing:'easeOutQuad', duration:1000});
}
});
});
</script>
The content div's contain radio buttons:
<p class="radioBtn">
<label for="input-1-1">Yes </label> <input id="input-1-1" name="clause" data-completed-id="1" value="1" type="radio" checked/>
</p>
<p class="radioBtn">
<label for="input-1-2">No </label> <input id="input-1-2" name="clause" data-completed-id="1" value="0" type="radio" />
</p>
What I am trying to do is get them to fire on change using the following code:
$('input:radio[name=clause]').change(function() {
alert("Test!");
});
But nothing happens when I change the radio buttons.

Try this
$("input[name='clause']").on('change',function() {
alert("Test!");
});

Your code is OK. Try to put it in a document event, like this...
$(document).ready(function() {
$('input:radio[name=clause]').change(function() {
alert("Test!");
});
})

OK, I've worked it out. I forgot that I was using the jQuery plugin iCheck which has it's own set of callbacks.
Sorry for wasting everyones time.

Related

HTML - How to select one id from a list of ids in querySelector

I am writing the following codes. There are repeating codes for the same function. I wonder if there is a way to include all the ids in one querySelector such that there are no repeats. Only the id in the selector is different.
The code is here:
function refreshMessage() {
courseSocket.send(JSON.stringify({
'message': 1
}));
};
document.querySelector('#next-student').onclick = function(e) {
refreshMessage();
};
document.querySelector('#put-back').onclick = function(e) {
refreshMessage();
};
document.querySelector('#invite').onclick = function(e) {
refreshMessage();
};
document.querySelector('#clear-queue').onclick = function(e) {
refreshMessage();
};
Iterate over all selectors...
const ids = ['next-student', 'put-back', 'invite', 'clear-queue'];
for (const id of ids) {
document.getElementById(id).onclick = refreshMessage;
}
Or use event delegation
document.addEventListener('click', (e) => {
if (e.target.closest('#next-student, #put-back, #invite, #clear-queue')) {
refreshMessage();
}
});
Use querySelectorAll
document.querySelectorAll("#next-student, #put-back, #invite, #clear-queue,[name=rdoGroup]").forEach(function(element) {
element.onclick = function(e) {
refreshMessage();
}
});
function refreshMessage(){
console.log("REFRESHING!");
}
<button id="next-student">Next</button>
<button id="put-back">Put Back</button>
<button id="invite">Invite</button>
<button id="clear-queue">Clear</button>
<label><input type="radio" name="rdoGroup"> Yes</label>
<label><input type="radio" name="rdoGroup"> No</label>
Or better yet, which preserves any existing on click listeners:
let selectors = ["#next-student", "#put-back", "#invite", "#clear-queue", "[name=rdoGroup]"];
document.querySelectorAll(selectors.join(",")).forEach(function(element) {
element.addEventListener("click", refreshMessage);
});
function refreshMessage() {
console.log("REFRESHING!");
}
<button id="next-student">Next</button>
<button id="put-back">Put Back</button>
<button id="invite">Invite</button>
<button id="clear-queue">Clear</button>
<label><input type="radio" name="rdoGroup"> Yes</label>
<label><input type="radio" name="rdoGroup"> No</label>

How to enable button when checbox is checked

I have codes like this
<div class="checkbox">
<input type="checkbox" id="checkme" value ="accept"/>
<label>I have read and agree to the terms and conditions</label>
<p><input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled"/></p>
I was trying to put this Jscript below of codes:
<script>
$(document).ready(function() {
var the_terms = $("#checkme");
the_terms.click(function() {
if ($(this).is(":checked")) {
$("#sub1").removeAttr("disabled");
} else {
$("#sub1").attr("disabled", "disabled");
}
});
});
</script>
However it does not work at all. I already follow all guides on internet. Anyone can help what part i did wrong? Is there any additional codes beside these?'
Oh and this on php format
EDIT:
Done this too
<script>
var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('sub1');
checker.onchange = function() {
sendbtn.disabled = !!this.checked;
};
</script>
But how do i change to disable when unchecked?
Simply use jquery change event like this :
$(document).ready(function() {
$('#checkme').change(function() {
if ($(this).is(":checked")) {
$("#sub1").removeAttr("disabled");
} else {
$("#sub1").attr("disabled", "disabled");
}
});
});
$(function() {
$('#id_of_your_checkbox').click(function() {
if ($(this).is(':checked')) {
$('#id_of_your_button').attr('disabled', 'disabled');
} else {
$('#id_of_your_button').removeAttr('disabled');
}
});
});

JQuery actions depending on which radio button is selected - if/else

I believe that this should be quite simple, and I thought that I was on to something, but its just not working. Forgive me, as Javascript is not my forte.
I just want the main button (Get Your New Rate) to do one of two things, based on whether the user selects YES or NO to the last of the 3 questions (these are styled radio buttons).
Thanks in advance for your time!
Here is the page in progress:
http://atomcrayon.com/mediaforce/refinance_go_v3.1/go.html
<div class="radioSelection">
<input type="radio" id="radioLicenseYes" name="radioLicense"><label for="radioLicenseYes" class="radioYes">YES</label>
<input type="radio" id="radioLicenseNo" name="radioLicense"><label for="radioLicenseNo" class="radioNo">NO</label>
</div>
<button class="getRate">Get Your New Rate</button>
<script type='text/javascript'>
function CheckLicense() {
var licenseYes = document.getElementById("radioLicenseYes");
var licenseNo = document.getElementById("radioLicenseNo");
if(licenseYes.checked) {
$(".getRate").click(function() {
$("#questions").fadeOut(500);
$("#loadingAnim").delay(500).fadeIn(1).delay(7000).fadeOut(500);
$("#loading1").delay(500).fadeIn(500).delay(1500).fadeOut(500);
$("#loading2").delay(3000).fadeIn(500).delay(1500).fadeOut(500);
$("#loading3").delay(5500).fadeIn(500).delay(1500).fadeOut(500);
$("#qualify").delay(8000).fadeIn(500);
$("#redirecting").delay(8800).fadeIn(1);
$("#loadingAnim2").delay(8800).fadeIn(1);
});
}
else if(licenseNo.checked) {
$(".getRate").click(function() {
$("#questions").fadeOut(500);
$("#noQualify").delay(500).fadeIn(500);
});
}
}
Here a working sample:
$(function() {
$(".getRate").click(function() {
var licenseYes = document.getElementById("radioLicenseYes");
var licenseNo = document.getElementById("radioLicenseNo");
if (licenseYes.checked) {
console.log("yes hello");
} else if (licenseNo.checked) {
console.log("no hello");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="radioSelection">
<input type="radio" id="radioLicenseYes" name="radioLicense"><label for="radioLicenseYes" class="radioYes">YES</label>
<input type="radio" id="radioLicenseNo" name="radioLicense"><label for="radioLicenseNo" class="radioNo">NO</label>
</div>
<button class="getRate">Get Your New Rate</button>
With jQuery you can easily add an event listener and run your if statements. What is wrong with your code: You have created a javascript function, but you never call it! In your function, you have a bit of jquery that will do the trick just fine (with a few modifications). You don't need to make a named function like: function getBla(). jQuery does that for you. I have simplified the code for demonstration purposes.
try:
function CheckLicense() {
if ($('input[name=radioLicense]:checked').length !=0 ) {
if ($('input[name="radioLicense"]:checked').val() == "YES"){
$(".getRate").click(function() {
$("#questions").fadeOut(500);
$("#loadingAnim").delay(500).fadeIn(1).delay(7000).fadeOut(500);
$("#loading1").delay(500).fadeIn(500).delay(1500).fadeOut(500);
$("#loading2").delay(3000).fadeIn(500).delay(1500).fadeOut(500);
$("#loading3").delay(5500).fadeIn(500).delay(1500).fadeOut(500);
$("#qualify").delay(8000).fadeIn(500);
$("#redirecting").delay(8800).fadeIn(1);
$("#loadingAnim2").delay(8800).fadeIn(1);
});
} else {
$(".getRate").click(function() {
$("#questions").fadeOut(500);
$("#noQualify").delay(500).fadeIn(500);
});
}
}
}
$('.getRate').click(function() {
CheckLicense();
}

button is not being enabled if checkbox is on

I want to enable button only if checkbox is on. What I am doing wrong here ? Thanks in advance..
index.html
<p><input id="agree" type="checkbox" /> I agree</p>
<input id="continue" value="continue" type="button" disabled="disabled" />
custom.js
$( document ).ready(function () {
$('#agree').change(function () {
var state = $(this).attr('value');
if (state == 'on') {
$('#continue').removeAttr('disabled')
} else if (state == '') {
$('#continue').attr('disabled','disabled');
}
});
});
You could simplify it to the following:
Example Here
$('#agree').on('change', function () {
$('#continue').attr('disabled', !this.checked);
});
$('#agree').on('change', function () {
$('#continue').attr('disabled', !this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><input id="agree" type="checkbox" />I agree</p>
<input id="continue" value="continue" type="button" disabled="disabled" />
The reason your code wasn't working was because you were using .attr(). Since there is no value attribute, you needed to use .prop(). This still wouldn't work though because the value will always return on. You need to get the checked property accessing this.checked or .prop('checked') - working example using your original snippet.
$('#agree').on('change', function () {
if (this.checked) {
$('#continue').removeAttr('disabled')
} else {
$('#continue').attr('disabled', 'disabled');
}
});
Try this:
$( document ).ready(function() {
$('#agree').change(function() {
if(this.checked) {
$('#continue').removeAttr('disabled')
} else {
$('#continue').attr('disabled','disabled');
}
});
});
If you want to check if input has checked :
state = $(this).prop( "checked" );
this returns boolean value (true if checked or false if unchecked).

I got a annoying bug in storing input value using localStorage

I want to do is to store the current inputs even if the user refresh or close the browser.
My problem is if i click Yes in the radio button and refresh the page or close the browser and reopen it the No button is checked and the Yes button is unchecked.
testing link: http://jsfiddle.net/5kcsn/124/
current script:
$(document).ready(function () {
$('#employed_v1, #employed_v0, #test').on("change", function () {
debugger;
localStorage.setItem($(this).attr("id"), $(this).val())
});
$('#employed_v1, #employed_v0, #test').each(function (ind, val) {
debugger;
if ($(val).attr("id") != "employed_v1") {
$(val).val(localStorage.getItem($(val).attr("id")))
}
if ($(val).attr("id") != "employed_v0") {
$(val).val(localStorage.getItem($(val).attr("id")))
}
else {
if (localStorage.getItem($(val).attr("id")) == "Yes"){
$("#employed_v1[value=Yes]").prop("checked", true);}
if (localStorage.getItem($(val).attr("id")) == "No"){
$("#employed_v0[value=No]").prop("checked", true);}
}
});
$('[id="employed_v0"]').on('click', function(){
$('#test').val('');
$('#test').prop('disabled', true);
});
$('[id="employed_v1"]').on('click', function(){
$('#test').prop('disabled', false);
});
});
To store the check state you should use the checked attribute.
However, here is a modified version :
$(document).ready(function () {
$('#employed_v1, #employed_v0').on("change", function () {
localStorage.setItem('employed', $(this).attr("id"))
});
$('#' + localStorage.getItem('employed')).attr('checked', true);
});
There are many things to consider here. First, the change-event is only fired on the one radiobutton that is clicked, and you are storing the value of the radiobutton to localstorage. But that information is the same that is already present in the HTML, so it really doesn't serve the purpose. The radiobuttons are grouped by the name-attribute, so you could store only one variable that tells which value of the radiobuttons is the selected one, here is an example:
Html:
<input type="radio" name="employed" id="employed_v1" value="Yes" required="required" class="js-store" />Yes
<br />
<input type="radio" name="employed" id="employed_v0" value="No" required="required" class="js-store" />No
<br>
<input type="text" name="test" id="test" class="js-store" />
Javascript:
<script type="text/javascript">
$(document).ready(function () {
$('.js-store').on("change", function () {
if ($(this).is(":radio")) {
localStorage.setItem($(this).attr("name"), $(this).val());
}
else {
localStorage.setItem($(this).attr("id"), $(this).val());
}
});
$(".js-store").each(function() {
if ($(this).is(":radio")) {
var value = localStorage.getItem($(this).attr("name"));
if (value) { $(this).prop("checked", value === $(this).val()); };
}
else {
var value = localStorage.getItem($(this).attr("id"));
if (value) {$(this).val(value);}
}
});
});
</script>

Categories