I've been trying to use the jquery parentsUntil method to hide a button until a radio box is selected, but I can't seem to get it to work. It's probably something obvious, but it's been bugging me for a couple of days now. Can anyone see what I'm doing wrong.
(function($) {
$(function(){
$('.last-item').change(function() {
if( $(this).val() != '' ) {
$(this).parentsUntil('.step').find('.button-next').removeClass('hide');
$(this).parentsUntil('.step').find('.button-next').addClass('show');
console.log("changing the last item");
}
});
});
})(jQuery);
.hide {
display: none;
}
.show {
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="step">
<h1>Step 3 - Personal</h1>
<div class="input-wrapper radio no-feedback">
<div class="row no-gutter content-position-outer">
<div class="col-md-6 content-center-inner">
<label for="gender">What gender are you? <sup>*</sup></label>
</div>
<div class="col-md-6 content-center-inner">
<div class="row">
<div class="col-md-5 col-md-offset-2">
<label class="radio-sex" for="gender_male">
<input class="sr-only last-item" type="radio" placeholder="Male" name="gender" value="Male" id="gender_male" required="required" />
<div class="radio-img radio-img-sex-male"></div>
Male
</label>
</div>
<div class="col-md-5">
<label class="radio-sex" for="gender_female">
<input class="sr-only last-item" type="radio" placeholder="Female" name="gender" value="Female" id="gender_female" required="required" />
<div class="radio-img radio-img-sex-female"></div>
Female
</label>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
Previous
</div>
<div class="col-md-3 col-md-push-6">
Next
</div>
</div>
</div>
JS Fiddle
.parentsUntil() gets "the ancestors of each element in the current set of matched elements, up to but not including the element matched by the selector,".
Try .closest() instead
This is likely what you meant?
No need to hide if value is empty since you cannot deselect a radio.
If you want to hide when some value is empty, use .toggle($(this).val()!="")
(function($) {
$(function() {
$('.last-item').on("click",function() { // click assumes radio as last item
$(this).closest("div.step").find('.button-next').show();
});
});
})(jQuery);
.button-next { display:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="step">
<h1>Step 3 - Personal</h1>
<div class="input-wrapper radio no-feedback">
<div class="row no-gutter content-position-outer">
<div class="col-md-6 content-center-inner">
<label for="gender">What gender are you? <sup>*</sup>
</label>
</div>
<div class="col-md-6 content-center-inner">
<div class="row">
<div class="col-md-5 col-md-offset-2">
<label class="radio-sex" for="gender_male">
<input class="sr-only last-item" type="radio" placeholder="Male" name="gender" value="Male" id="gender_male" required="required" />
<div class="radio-img radio-img-sex-male"></div>
Male
</label>
</div>
<div class="col-md-5">
<label class="radio-sex" for="gender_female">
<input class="sr-only last-item" type="radio" placeholder="Female" name="gender" value="Female" id="gender_female" required="required" />
<div class="radio-img radio-img-sex-female"></div>
Female
</label>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
Previous
</div>
<div class="col-md-3 col-md-push-6">
Next
</div>
</div>
</div>
Try this snippet. I hope it will work
Note:remove hide class from -> class="button-next hide"
$(function(){
$('.button-next').hide();
$('input[type="radio"]').click(function() {
if($(this).prop('checked') == true) {
$('.button-next').show();
}
else {
$('.button-next').hide();
}
});
});
All good sensible answers, guys, but none of them worked for me. In the end I had to use
$(this).closest('.step-3').find('.button-next').css('display','block');
Related
I have two fields, where there are two items to choose from, two checkboxes. And I'd like when I click the option Yes, it automatically selects Yes in the other checkbox.
For example: when I click Yes here : Guarantee or other security given by custom Single automatically selects Yes here : Guarantee or other security given by customer :
This is my jQuery code, HTML markup and source code :
<div class="row gutters">
<div class="col col-2">
<label data-timtranslationlabel="MXGuranteeOrOther" for="guranteereqeust_single">Guarantee or other security given by custome Single</label>
</div>
<div class="col col-1">
<div class="form-item form-checkboxes">
<input type="radio" id="DeliveryYesSingle" name="deliveryCredit" value="yes"/>
<label data-timtranslationlabel="Hyes" for="deliveryCredit_Yes" class="checkbox">Yes</label>
</div>
</div>
<div class="col col-1">
<div class="form-item form-checkboxes">
<input type="radio" id="DeliveryNoSingle" name="deliveryCredit" value="no"/>
<label data-timtranslationlabel="Hno" for="deliveryCredit_No" class="checkbox">No</label>
</div>
</div>
</div>
<div class="row gutters">
<div class="col col-2">
<label data-timtranslationlabel="MXGuranteeOrOther" for="guranteereqeust_singleBoard">Guarantee or other security given by customer</label>
</div>
<div class="col col-1">
<div class="form-item form-checkboxes">
<input type="radio" id="deliveryYesSingleBoard" name="deliverySingle" value="yes"/>
<label data-timtranslationlabel="Hyes" for="deliveryYesSingleBoard" class="checkbox">Yes</label>
</div>
</div>
<div class="col col-1">
<div class="form-item form-checkboxes">
<input type="radio" id="DeliveryNoSingleBoard" name="deliverySingle" value="no"/>
<label data-timtranslationlabel="Hno" for="DeliveryNoSingleBoard" class="checkbox">No</label>
</div>
</div>
</div>
jQuery
$('[id="DeliveryYesSingle"]').on('change', () => {
$('[id="deliveryYesSingleBoard"]').prop('checked', true);
});
$('[id="DeliveryNoSingle"]').on('change', () => {
$('[id="DeliveryNoSingleBoard"]').prop('checked', true);
});
JSfiddle: https://jsfiddle.net/Palucci92/pouw6q3t/1/
Make sure you imported jQuery. I have just added jQuery tag in your Jsfiddle it's just working fine
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
also i have just added some script to the process vice-versa
I have just attaching edited JSfiddle : https://jsfiddle.net/p5thmwab/
It is working.
Possible problem is that you didn't include the Jquery library in your fiddle.
Try out the snippet I made.
$('[id="DeliveryYesSingle"]').on('change', () => {
$('[id="deliveryYesSingleBoard"]').prop('checked', true);
});
$('[id="DeliveryNoSingle"]').on('change', () => {
$('[id="DeliveryNoSingleBoard"]').prop('checked', true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/js/bootstrap.min.js"></script>
<div class="row gutters">
<div class="col col-2"><label data-timtranslationlabel="MXGuranteeOrOther" for="guranteereqeust_single">Guarantee or other security given by custome Single</label></div>
<div class="col col-1">
<div class="form-item form-checkboxes">
<input type="radio" id="DeliveryYesSingle" name="deliveryCredit" value="yes"/><label data-timtranslationlabel="Hyes" for="deliveryCredit_Yes" class="checkbox">Yes</label>
</div>
</div>
<div class="col col-1">
<div class="form-item form-checkboxes">
<input type="radio" id="DeliveryNoSingle" name="deliveryCredit" value="no"/><label data-timtranslationlabel="Hno" for="deliveryCredit_No" class="checkbox">No</label>
</div>
</div>
</div>
<div class="row gutters">
<div class="col col-2">
<label data-timtranslationlabel="MXGuranteeOrOther" for="guranteereqeust_singleBoard">Guarantee or other security given by customer</label></div>
<div class="col col-1">
<div class="form-item form-checkboxes">
<input type="radio" id="deliveryYesSingleBoard" name="deliverySingle" value="yes"/>
<label data-timtranslationlabel="Hyes" for="deliveryYesSingleBoard" class="checkbox">Yes</label>
</div>
</div>
<div class="col col-1">
<div class="form-item form-checkboxes">
<input type="radio" id="DeliveryNoSingleBoard" name="deliverySingle" value="no"/>
<label data-timtranslationlabel="Hno" for="DeliveryNoSingleBoard"
class="checkbox">No</label>
</div>
</div>
</div>
</div>
I have the following code:
JavaScript:
jQuery(".cbChild").on("change", function () {
//go to parent checkbox to see if it's check. If not, check it.
var parentElement = jQuery(this).closest('cbParentContainer');
//I've also tried
//var parentElement = jQuery(this).parentsUntil('cbParentContainer');
//And
//var parentElement = jQuery(this).parentsUntil('row');
if (jQuery(this).find('input[type=checkbox]').prop("checked")) {
parentElement.prop("checked", true);
}
});
HTML:
<div class="cbEventsContainer">
<div class="row">
<span class="col-sm-4 cbParent"><input name="p$lt$ctl03$pageplaceholder$p$lt$ctl01$VirtualTourEventRegistration$rptEventList$ctl03$ctl00" id="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_ctl00" type="checkbox">
<label for="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_ctl00">Connect with Digital Services</label>
</span>
</div>
<div class="cbChildContainer">
<div class="row">
<div class="col-xs-1">
</div>
<span class="checkbox col-sm-11 cbChild">
<input name="p$lt$ctl03$pageplaceholder$p$lt$ctl01$VirtualTourEventRegistration$rptEventList$ctl03$rptEventRegistrationDetails$ctl00$ctl00" id="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl00_ctl00" type="checkbox">
<label for="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl00_ctl00">Event 1</label>
</span>
</div>
<div class="row">
<div class="col-xs-1">
</div>
<span class="checkbox col-sm-11 cbChild">
<input name="p$lt$ctl03$pageplaceholder$p$lt$ctl01$VirtualTourEventRegistration$rptEventList$ctl03$rptEventRegistrationDetails$ctl01$ctl00" id="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl01_ctl00" type="checkbox">
<label for="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl01_ctl00">Event 2</label>
</span>
</div>
</div>
When one of the child checkboxes (class='cbChild') gets checked, I want to force the parent (class='cbParent') checkbox to also be checked. However, I'm unable to access the parent for some reason. The call to parentElement.prop("checked", true) fails because parentElement isn't the parent checkbox. To further clarify the issue, there are multiple cbEventsConainers with more parent/child checkboxes. I only included one for this post.
We are not dealing with a child-parent relationship here but the following will check the "parent" checkbox when at least one of the children is checked and will uncheck it otherwise.
$(function(){
$("body").on("change",".cbChild input",function(){
var cc=$(this).closest(".cbChildContainer"),p=cc.prev("div").find(".cbParent input");
p.prop("checked",$(".cbChild input:checked",cc).length>0);
});
});
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div class="cbEventsContainer">
<div class="row">
<span class="col-sm-4 cbParent"><input name="p$lt$ctl03$pageplaceholder$p$lt$ctl01$VirtualTourEventRegistration$rptEventList$ctl03$ctl00" id="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_ctl00" type="checkbox">
<label for="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_ctl00">Connect with Digital Services</label>
</span>
</div>
<div class="cbChildContainer">
<div class="row">
<div class="col-xs-1">
</div>
<span class="checkbox col-sm-11 cbChild">
<input name="p$lt$ctl03$pageplaceholder$p$lt$ctl01$VirtualTourEventRegistration$rptEventList$ctl03$rptEventRegistrationDetails$ctl00$ctl00" id="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl00_ctl00" type="checkbox">
<label for="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl00_ctl00">Event 1</label>
</span>
</div>
<div class="row">
<div class="col-xs-1">
</div>
<span class="checkbox col-sm-11 cbChild">
<input name="p$lt$ctl03$pageplaceholder$p$lt$ctl01$VirtualTourEventRegistration$rptEventList$ctl03$rptEventRegistrationDetails$ctl01$ctl00" id="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl01_ctl00" type="checkbox">
<label for="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl01_ctl00">Event 2</label>
</span>
</div>
</div>
My javascript code doesnt seem to run when i use this codes to validate the radio button is clicked. Its suppose to dropdown the inputs when the card radio button is clicked and it is suppose to slide up the inputs when the paypal button is clicked.1st code javascript. 2nd code html.
if (document.getElementById('paypal').checked) {
//Paypal radio button is checked
$(".input-fields").slideDown("slow");
} else if (document.getElementById('card').checked) {
//Card radio button is checked
$(".input-fields").slideUp("slow");
};
<div class="panel-body">
<h2 class="title">Checkout</h2>
<div class="bar">
<div class="step active"></div>
<div class="step active"></div>
<div class="step"></div>
<div class="step"></div>
</div>
<div class="payment-method">
<label for="card" class="method card">
<div class="card-logos">
<img src="img/visa_logo.png" />
<img src="img/mastercard_logo.png" />
</div>
<div class="radio-input">
<input id="card" type="radio" name="payment"> Pay $<%= total %> with credit card
</div>
</label>
<label for="paypal" class="method paypal">
<img src="img/paypal_logo.png" />
<div class="radio-input">
<input id="paypal" type="radio" name="payment"> Pay $<%= total %> with PayPal
</div>
</label>
</div>
<div class="input-fields">
<div class="column-1">
<label for="cardholder">Cardholder's Name</label>
<input type="text" id="cardholder" />
<div class="small-inputs">
<div>
<label for="date">Valid thru</label>
<input type="text" id="date" placeholder="MM / YY" />
</div>
<div>
<label for="verification">CVV / CVC *</label>
<input type="password" id="verification" />
</div>
</div>
</div>
<div class="column-2">
<label for="cardnumber">Card Number</label>
<input type="password" id="cardnumber" />
<span class="info">* CVV or CVC is the card security code, unique three digits number on the back of your card separate from its number.</span>
</div>
</div>
</div>
All you missed was to add the logic inside a function and add it to an event using addEventListener() for value change.
We use document.getElementById() to get both the input elements by ID and then add the event listener to fire on change of value.
document.getElementById("card").addEventListener("change", validate);
document.getElementById("paypal").addEventListener("change", validate);
function validate() {
if (document.getElementById('paypal').checked) {
//Paypal radio button is checked
$(".input-fields").slideDown("slow");
} else if (document.getElementById('card').checked) {
//Card radio button is checked
$(".input-fields").slideUp("slow");
};
}
document.getElementById("card").addEventListener("change", validate);
document.getElementById("paypal").addEventListener("change", validate);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body">
<h2 class="title">Checkout</h2>
<div class="bar">
<div class="step active"></div>
<div class="step active"></div>
<div class="step"></div>
<div class="step"></div>
</div>
<div class="payment-method">
<label for="card" class="method card">
<div class="card-logos">
<img src="img/visa_logo.png" />
<img src="img/mastercard_logo.png" />
</div>
<div class="radio-input">
<input id="card" type="radio" name="payment"> Pay $<%= total %> with credit card
</div>
</label>
<label for="paypal" class="method paypal">
<img src="img/paypal_logo.png" />
<div class="radio-input">
<input id="paypal" type="radio" name="payment"> Pay $<%= total %> with PayPal
</div>
</label>
</div>
<div class="input-fields">
<div class="column-1">
<label for="cardholder">Cardholder's Name</label>
<input type="text" id="cardholder" />
<div class="small-inputs">
<div>
<label for="date">Valid thru</label>
<input type="text" id="date" placeholder="MM / YY" />
</div>
<div>
<label for="verification">CVV / CVC *</label>
<input type="password" id="verification" />
</div>
</div>
</div>
<div class="column-2">
<label for="cardnumber">Card Number</label>
<input type="password" id="cardnumber" />
<span class="info">* CVV or CVC is the card security code, unique three digits number on the back of your card separate from its number.</span>
</div>
</div>
</div>
References:
Event Listeners
You need to add your javascript inside an event listener. For Example
$("input[name='payment']").click(function ()
{
if (document.getElementById('paypal').checked)
{
//Paypal radio button is checked
$(".input-fields").slideDown("slow");
}
else if (document.getElementById('card').checked)
{
//Card radio button is checked
$(".input-fields").slideUp("slow");
}
;
});
I'm trying to change what text areas are visible depending on what radio button is checked.
I have followed various guides on google and none have worked.
This is what I currently have, using the click function but still nothing.
HTML:
<div class="row col-md-12">
<!-- Header Delimitation input settings -->
<div class="form-group col-md-4">
<label class="control-label" for="header_delimitation">Header delimitation</label>
<div class="col-md-12">
<div class="radio">
<label for="header_delimitation-0">
<input type="radio" name="header_delimitation" id="header_delimitation-0" value="0">
Fixed Column Width</label>
</div>
<div class="radio">
<label for="header_delimitation-1">
<input type="radio" name="header_delimitation" id="header_delimitation-1" value="1">
Character delimiter
</label>
</div>
</div>
<!-- Text input-->
<div class="form-group" id="header_col_form">
<label class="control-label" for="header_columns_num">Number of Columns</label>
<div class="">
<input id="header_columns_num" name="header_columns_num" type="text" placeholder="number" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group" id="header_delim_form">
<label class=" control-label" for="header_delim">Header delimiter</label>
<div class="">
<input id="header_delim" name="header_delim" type="text" placeholder="delimiter" class="form-control input-md">
</div>
</div>
</div>
JS:
$(document).ready(function () {
$('#header_col_form').hide('fast');
$('#header_delim_form').hide('fast');
$('#header_delimitation-0').click(function () {
$('#header_col_form').show('fast');
$('#header_delim_form').hide('fast');
});
$('#header_delimitation-1').click(function () {
$('#header_delim_form').show('fast');
$('#header_col_form').hide('fast');
});
});
How it looks like now
So functionality wise, it should when header_delimitation_0 is selected, show header_col_form and hide header_delim_form. I will then add the reverse for when header_delimitation_1 is selected.
There is most likely a far simpler and cleaner way of completing this task, if so, any help would be greatly appreciated.
I have a checkbox with ID GlandularFever and on click (which checks it) I can get it to show another DIV with data-field name="GlandularDetails". Though on un-check, how do I get it to hide that div again? If data-field name="GlandularDetails hidden = true then show, else if data-field name="GlandularDetails hidden = false then hide.
<script>
$(document).ready(function(){
$("#GlandularFever").click(function(){
$(document.querySelectorAll('[data-field name="GlandularDetails"]')).show(100);
hidden = false;
});
});
</script>
<div class="col-md-12">
<div class="funkyradio">
<div class="funkyradio-primary col-md-4">
<input value="Yes" type="checkbox" name="GlandularFever" id="GlandularFever"/>
<label for="GlandularFever">Glandular Fever</label>
</div>
</div>
</div>
<div class="form-group col-md-12" data-field-name="GlandularDetails">
<label class="control-label">Details</label>
<textarea rows="3" id="GlandularDetails" name="GlandularDetails" maxlength="100" class="form-control" placeholder=""></textarea>
</div>
Thank you
Try this:
$(document).ready(function () {
$('#GlandularFever').click(function () {
if ($(this).prop('checked')) {
$('[data-field name="GlandularDetails"]').show(100);
} else {
$('[data-field name="GlandularDetails"]').hide(100);
}
});
});
You can use the JQuery method .toggle( [duration ] [, complete ] )
var glandularDetails = $('[data-field-name="GlandularDetails"]');
glandularDetails.hide();
$("#GlandularFever").click(function() {
glandularDetails.toggle(500);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
<div class="funkyradio">
<div class="funkyradio-primary col-md-4">
<input value="Yes" type="checkbox" name="GlandularFever" id="GlandularFever" />
<label for="GlandularFever">Glandular Fever</label>
</div>
</div>
</div>
<div class="form-group col-md-12" data-field-name="GlandularDetails">
<label class="control-label">Details</label>
<textarea rows="3" id="GlandularDetails" name="GlandularDetails" maxlength="100" class="form-control" placeholder=""></textarea>
</div>
Use toggle to alternate between hidden and visible.
Also, avoid document.querySelectorAll when using jQuery. jQuery automatically handles that:
$("#GlandularFever").click(function() {
$('[data-field-name="GlandularDetails"]').toggle(100);
});
div.form-group {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
<div class="funkyradio">
<div class="funkyradio-primary col-md-4">
<input value="Yes" type="checkbox" name="GlandularFever" id="GlandularFever" />
<label for="GlandularFever">Glandular Fever</label>
</div>
</div>
</div>
<div class="form-group col-md-12" data-field-name="GlandularDetails">
<label class="control-label">Details</label>
<textarea rows="3" id="GlandularDetails" name="GlandularDetails" maxlength="100" class="form-control" placeholder=""></textarea>
</div>
check this code and run
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div[data-field-name=GlandularDetails]").hide();
$("#GlandularFever").click(function(){
if($(this).is(':checked'))
{
$("div[data-field-name=GlandularDetails]").show();
}
else
{
$("div[data-field-name=GlandularDetails]").hide();
}
});
});
</script>
<div class="col-md-12">
<div class="funkyradio">
<div class="funkyradio-primary col-md-4">
<input value="Yes" type="checkbox" name="GlandularFever" id="GlandularFever"/>
<label for="GlandularFever">Glandular Fever</label>
</div>
</div>
</div>
<div class="form-group col-md-12" data-field-name="GlandularDetails">
<label class="control-label">Details</label>
<textarea rows="3" id="GlandularDetails" name="GlandularDetails" maxlength="100" class="form-control" placeholder=""></textarea>
</div>
.