i'm using Uikit radio input (https://altair-html.tzdthemes.com/forms_regular.html).
The problem is the radio input is transforming between code and on site display
After load my form with Ajax, i want to alert value for radio choice after each change.
Here my code :
HTML :
<div class="uk-width-medium-1-2">
<h5>Radio set 1</h5>
<div class="uk-grid" data-uk-grid-margin>
<span class="icheck-inline">
<input type="radio" name="radio_opt" id="radio_opt_1" value="Yes" data-md-icheck />
<label for="radio_opt_1" class="inline-label">Oui</label>
</span>
<span class="icheck-inline">
<input type="radio" name="radio_opt" id="radio_opt_2" value="Non" data-md-icheck />
<label for="radio_opt_2" class="inline-label">No</label>
</span>
</div>
</div>
<div class="uk-width-medium-1-2">
<h5>Radio set 2</h5>
<div class="uk-grid" data-uk-grid-margin>
<span class="icheck-inline">
<input type="radio" name="radio_opt_second" id="radio_opt_3" value="Yes" data-md-icheck />
<label for="radio_opt_3" class="inline-label">Oui</label>
</span>
<span class="icheck-inline">
<input type="radio" name="radio_opt_second" id="radio_opt_4" value="Non" data-md-icheck />
<label for="radio_opt_4" class="inline-label">No</label>
</span>
</div>
</div>
Then here my JS (doesnt' work)
$(document).on('change', 'input:radio', function () {
alert('test');
});
That theme is using iCheck and according to the docs you should use:
$('input:radio').on('ifChecked', function(event) {
alert('test');
});
Related
I am currently working on a filter that displays products categories through Radio Button selection:
<div class="round" id="r-group">x
<label for="r2" class="label-filter">
<input type="radio" id="r1" name="club-selection" value="club-selection">
<span class="label-text">The Club Selection</span>
</label>
<label for="r2" class="label-filter">
<input type="radio" id="r2" name="upholstery" value="upholstery">
<span class="label-text">All Upholstery</span>
</label>
<label for="r3" class="label-filter">
<input type="radio" id="r3" name="casegoods" value="casegoods">
<span class="label-text">All Casegoods</span>
</label>
<label for="r3" class="label-filter">
<input type="radio" id="r4" name="tables" value="tables">
<span class="label-text">All Tables</span>
</label>
<label for="r3" class="label-filter">
<input type="radio" id="r5" name="lighting" value="lighting">
<span class="label-text">All Lighting</span>
</label>
</div>
I want to be able show each category as I select the radio buttons. For example: If I select All Casegoods, I want to only show the div with data-category="casegoods". If I select Tables and Lighting I want to show the div with data-category="tables" and data-category="lighting". These are the basic structure of the divs per category:
<div class="product" data-category="club-selection">
<h4>The Club Selection</h4>
</div>
<div class="product" data-category="upholstery">
<h4>Upholstery</h4>
</div>
<div class="product" data-category="casegoods">
<h4>Casegoods</h4>
</div>
<div class="product" data-category="tables">
<h4>All Tables</h4>
</div>
<div class="product" data-category="lighting">
<h4>Lighting</h4>
</div>
So far, I am able to store the value of the selected radio buttons into an array (selectedValues), but I am not sure what to do next to be able to display only the divs of the categories selected.This is the code that store the values:
$(function(){
var items = $("[data-category]");//get all the elements that has data-categories attribute
items.show(); //show all of the elements we found above
$("input[type=radio]").on("change",function(ev){ //bind onchange event
var selectedValues = []; //this array will hold all of the current categories
$("input:checked").each(function(idx, checkedRadio){//get all of the input radio buttons that are checked and add the value of each of them to the selectedValues array we created above
selectedValues.push($(checkedRadio).val().toLowerCase());
//THIS IS WHERE I´M STUCK. What do I do with the values stored in the array?
});
});
});
EDIT:fixed the ids on the inputs.
You can do something like this:
var elems = $("[data-category]").filter(function() {
return selectedValues.indexOf($(this).data("category")) > -1;
});
elems.show();
I believe you want to use checkbox and not radio, since you cant deselect them again. Else you have to use the same name so you cant select more than one.
Also please note that many of your inputs have the same id, ID should always be unique.
Demo
$(function() {
var items = $("[data-category]"); //get all the elements that has data-categories attribute
items.show(); //show all of the elements we found above
$("input[type=checkbox]").on("change", function(ev) { //bind onchange event
$("[data-category]").hide()
var selectedValues = []; //this array will hold all of the current categories
$("input:checked").each(function(idx, checkedRadio) { //get all of the input radio buttons that are checked and add the value of each of them to the selectedValues array we created above
selectedValues.push($(checkedRadio).val().toLowerCase());
});
var elems = $("[data-category]").filter(function() {
return selectedValues.indexOf($(this).data("category")) > -1;
});
elems.show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="round" id="r-group">
<label for="r2" class="label-filter">
<input type="checkbox" id="r2" name="club-selection" value="club-selection">
<span class="label-text">The Club Selection</span>
</label>
<label for="r2" class="label-filter">
<input type="checkbox" id="r2" name="upholstery" value="upholstery">
<span class="label-text">All Upholstery</span>
</label>
<label for="r3" class="label-filter">
<input type="checkbox" id="r3" name="casegoods" value="casegoods">
<span class="label-text">All Casegoods</span>
</label>
<label for="r3" class="label-filter">
<input type="checkbox" id="r3" name="tables" value="tables">
<span class="label-text">All Tables</span>
</label>
<label for="r3" class="label-filter">
<input type="checkbox" id="r3" name="lighting" value="lighting">
<span class="label-text">All Lighting</span>
</label>
</div>
<div class="product" data-category="club-selection">
<h4>The Club Selection</h4>
</div>
<div class="product" data-category="upholstery">
<h4>Upholstery</h4>
</div>
<div class="product" data-category="casegoods">
<h4>Casegoods</h4>
</div>
<div class="product" data-category="tables">
<h4>All Tables</h4>
</div>
<div class="product" data-category="lighting">
<h4>Lighting</h4>
</div>
I am trying to trigger a click on radio buttons. I have done this successfully on another project so I cannot see why it is not working in this case.
Here is my HTML (taken from Contact form 7):
<span class="wpcf7-list-item first">
<label>
<span class="wpcf7-list-item-label">Yes</span>
<input type="radio" name="example-name" value="Yes" checked="checked">
</label>
</span>
<span class="wpcf7-list-item last">
<label>
<span class="wpcf7-list-item-label">No</span>
<input type="radio" name="example-name" value="No">
</label>
</span>
And here is my jQuery:
jQuery(document).ready(function () {
jQuery("#yes-btn").click(function () {
jQuery(this).addClass('checked');
jQuery("input[value='Yes']").trigger('click').addClass("working");
});
jQuery("#no-btn").click(function () {
jQuery(this).addClass('checked');
jQuery("input[value='No']").trigger('click').addClass("working");
});
});
I know the selector is working correctly because the .addClass() works just fine.
I have also tried .prop("checked", true) instead of trigger("click") without success.
I am using jQuery 3.3.1.
How to fix this?
It works when you change the 'single quotes' from around yes and no to "double quotes". Also works with no quotes around the Yes and No, must not like single quotes in the selector.
jQuery(document).ready(function() {
jQuery("#yes-btn").click(function() {
jQuery(this).addClass('checked');
jQuery('input[value="Yes"]').trigger('click').addClass("working");
});
jQuery("#no-btn").click(function() {
jQuery(this).addClass('checked');
jQuery('input[value="No"]').trigger('click').addClass("working");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="wpcf7-list-item first">
<label>
<span class="wpcf7-list-item-label">Yes</span>
<input type="radio" name="example-name" value="Yes" checked="checked">
</label>
</span>
<span class="wpcf7-list-item last">
<label>
<span class="wpcf7-list-item-label">No</span>
<input type="radio" name="example-name" value="No">
</label>
</span>
<button id="yes-btn">Yes</button>
<button id="no-btn">No</button>
Using Jquery with Ruby on Rails and the Simple Form Gem I can successfully show / hide a div on changing a radio button, however despite numerous attempts I can't get this to work on page load - divs are always showing, whether the radio button is true or false. Any help would be great thanks.
jQuery(document).ready(function() {
jQuery('[name="user[nurse_attributes][qualified]"]').on('change', function() {
if (jQuery(this).val() == 'true' ) {
jQuery('#denied-quote-one').hide();
} else {
jQuery('#denied-quote-one').show();
}
});
});
UPDATE - HTML OUTPUT OF RADIO BUTTONS:
<div class="form-group radio_buttons optional user_nurse_qualified">
<input type="hidden" name="user[nurse_attributes][qualified]" value="">
<span class="radio">
<label for="user_nurse_attributes_qualified_true">
<input class="radio_buttons optional" type="radio" value="true" checked="checked" name="user[nurse_attributes][qualified]" id="user_nurse_attributes_qualified_true">Yes
</label>
</span>
<span class="radio">
<label for="user_nurse_attributes_qualified_false">
<input class="radio_buttons optional" readonly="readonly" type="radio" value="false" name="user[nurse_attributes][qualified]" id="user_nurse_attributes_qualified_false">No
</label>
</span>
</div>
<div id="denied-quote-one" style="display: block;">
<p class="p-red">Unfortunately we cannot give you a quote if your answer to this question is no. You will not be able to move forward.
</p>
</div>
Your code above adds an event handler for the change event on the radio button. Aside from that, you need to check the value of the :checked radio button on page load, and show/hide based on that.
Note: To prevent flickering, give the element an initial style of display: none.
jQuery(document).ready(function() {
if ( jQuery('[name="user[nurse_attributes][qualified]"]:checked').val() !== 'true' ) {
jQuery('#denied-quote-one').show();
}
jQuery('[name="user[nurse_attributes][qualified]"]').on('change', function() {
if (jQuery(this).val() == 'true' ) {
jQuery('#denied-quote-one').hide();
} else {
jQuery('#denied-quote-one').show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group radio_buttons optional user_nurse_qualified">
<input type="hidden" name="user[nurse_attributes][qualified]" value="">
<span class="radio">
<label for="user_nurse_attributes_qualified_true">
<input class="radio_buttons optional" type="radio" value="true" checked="checked" name="user[nurse_attributes][qualified]" id="user_nurse_attributes_qualified_true">Yes
</label>
</span>
<span class="radio">
<label for="user_nurse_attributes_qualified_false">
<input class="radio_buttons optional" readonly="readonly" type="radio" value="false" name="user[nurse_attributes][qualified]" id="user_nurse_attributes_qualified_false">No
</label>
</span>
</div>
<div id="denied-quote-one" style="display: none;">
<p class="p-red">Unfortunately we cannot give you a quote if your answer to this question is no. You will not be able to move forward.
</p>
</div>
I am using parsley.js to validate my form. When trying to validate my checkbox by using data-mincheck, noting happens.
here is my code snippet:
<form data-validate="parsley">
<p>Pick atleast 2 items:</p>
<div id="custom-salad">
<div class="sub-step">
<p>Base:</p>
<div class="checkbox">
<label class="checkbox-custom">
<input type="checkbox" data-group="salad-dish" name="salad-custom" data-mincheck="2" value="pasta"> <i class="icon-unchecked"></i> Pasta
</label>
</div>
<div class="checkbox">
<label class="checkbox-custom">
<input type="checkbox" data-group="salad-dish" name="salad-custom" value="Cabage"> <i class="icon-unchecked"></i> Cabage
</label>
</div>
</div>
</div>
</form>
On the Parsley.js Website it says, he only uses the parsley-namespace for his values. I evaluated this quickly with the current version of Parsley.js.
Its seems that it doesnt work anymore with data- attributes, however this is what i got out of you code to get it working:
<form action="success.html" parsley-validate method="post">
<p>Pick atleast 2 items:</p>
<div id="custom-salad">
<div class="sub-step">
<p>Base:</p>
<div class="checkbox">
<label class="checkbox-custom">
<input type="checkbox" parsley-group="salad-test" name="salad-custom" parsley-mincheck="2" value="pasta"> <i class="icon-unchecked"></i> Pasta
</label>
</div>
<div class="checkbox">
<label class="checkbox-custom">
<input type="checkbox" parsley-group="salad-test" name="salad-custom" value="Cabage"> <i class="icon-unchecked"></i> Cabage
</label>
</div>
</div>
</div>
<input type="submit" value="Senden"> </input>
</form>
Make sure you add Jquery before Parsley. I simply added the now recommendet Parsley attributes like "parsley-validate" on the Form and "parsley-group" and "parsley-mincheck" for the Field.
The "parsley-group" always has to be the same for each Checkbox to be affected. But isnt limited to the "name" attribute.
Hope this helps.
I am trying get something as described in the subject, when the submit or order now button is clicked, it should go to URL based on the radio button selection. But this below form is appending ?rr=on which creating issues with my urls.
The form is:
<form id="account2">
<p>
<input type="radio" id="r20" name="rr" onclick="document.getElementById('account2').action='http://seomagz.com/';"/>
<label for="r20" class="rating"><span1></span1><span class="one_month">36 mo</span> <span class="one_month2">Rs.530</span><span class="one_month">/mo</span> </label>
<p>
<input type="radio" id="r21" name="rr" onclick="document.getElementById('account2').action='http://www.google.com/';"/>
<label for="r21"><span1></span1><span class="one_month">24 mo</span> <span class="one_month2">Rs.533</span><span class="one_month">/mo</span> </label>
<p>
<input type="radio" id="r22" name="rr" onclick="document.getElementById('account2').action='http://www.google.com/';"/>
<label for="r22"><span1></span1><span class="one_month">12 mo</span> <span class="one_month2">Rs.541</span><span class="one_month">/mo</span> </label>
<p>
<input type="radio" id="r23" name="rr" onclick="document.getElementById('account2').action='http://www.googlefg.com/';" />
<label for="r23"><span1></span1><span class="one_month">3 mo</span> <span class="one_month2">Rs.549</span><span class="one_month">/mo</span> </label>
</div>
<button type="submit" class="ordernow1" style="margin-top:63px;"><p>Order Now</p></button></form>
<form id="account2" method="post">
You should also be closing your <p> tags, makes good practice
Cannot be reproduced here
try using action='post'
here's the fiddle
http://jsfiddle.net/hAGPr/