Not being able to pre-select desired radio box by default - javascript

I am trying to pre-select premium delivery by default. I was looking on the web and really don't understand why it would not pre-select the second radio-box. Please find link to my JSfiddle
My code is also:
jQuery(document).ready(function() {
waitForDelayedContent('#checkout-shipping-method-load .input-checkout-radio .method-title:contains(Take it to my room)', function() {
jQuery('#checkout-shipping-method-load .input-checkout-radio:not(.mtC) .method-title:contains(Take it to my room)').click();
jQuery('#checkout-shipping-method-load .input-checkout-radio:not(.mtC):has(.method-title:contains(Take it to my room)) .radio').click();
jQuery('#checkout-shipping-method-load .input-checkout-radio:has(.method-title:contains(Take it to my room))').addClass('mtC');
});
});
<div id="checkout-shipping-method-load">
<div class="sp-methods">
<h3 class="title">Delivery Option</h3>
<p>You must select a delivery option.</p>
<ul>
<li class="delivery-method">
<div class="input-checkout-radio">
<input checked="checked" class="input-radio" id="s_method_standard" name="shipping_method" type="radio" value="paragon_customrate_standard">
<label class="radio-label" for="s_method_standard"><span class="radio"></span> <span class="method-title">FREE Take it to
my door</span>
</label>
</div>
</li>
<li class="delivery-method">
<div class="input-checkout-radio">
<input class="input-radio" id="s_method_premium" name="shipping_method" type="radio" value="paragon_customrate_premium">
<label class="radio-label" for="s_method_premium"><span class="radio"></span> <span class="method-title"><span class=
"price"><span class="currency">£</span>39</span>Take it to my room</span>
</label>
</div>
</li>
</ul>
</div>
</div>

It is because the first radio box has checked="check". Move that to the second radio box to make it work. No need for JavaScript. See this updated fiddle: http://jsfiddle.net/n5h65n73/
Or, if you really need to do it with JavaScript:
$("#s_method_premium").prop("checked", true)

The issue is within your HTML. You have the checked="checked" attribute set on the first radio input. So if you remove that attribute and move it to the second one, it'll work as you want.
<div id="checkout-shipping-method-load">
<div class="sp-methods">
<h3 class="title">Delivery Option</h3>
<p>You must select a delivery option.</p>
<ul>
<li class="delivery-method">
<div class="input-checkout-radio">
<input class="input-radio" id="s_method_standard" name="shipping_method" type="radio" value="paragon_customrate_standard">
<label class="radio-label" for="s_method_standard"><span class="radio"></span> <span class="method-title">FREE Take it to
my door</span>
</label>
</div>
</li>
<li class="delivery-method">
<div class="input-checkout-radio">
<input checked class="input-radio" id="s_method_premium" name="shipping_method" type="radio" value="paragon_customrate_premium">
<label class="radio-label" for="s_method_premium"><span class="radio"></span> <span class="method-title"><span class=
"price"><span class="currency">£</span>39</span>Take it to my room</span>
</label>
</div>
To do this using jQuery, here's the code snippet:
$('#s_method_premium').attr('checked', 'true');
The basic explanation is that you are using the attr method of jQuery to modify the property (i.e., the first argument) with the desired value (i.e., the second argument). And then necessity for both lines of code is to remove the first checked before setting the second one.
Does that help?

Related

How to get radio button checked value

I am trying to get the checked values of a radio group in meteor js. So far i have come up with this.
Js
Template.QuizController.events({
'submit .quiz-ans'(event) {
// Prevent default browser form submit
event.preventDefault();
// Get value from form element
console.log(event);
},
});
Html
<template name="QuizQuestion">
<div class="questions">
<h5 class="white-text">{{question}}</h5>
<form action="#" class="quiz-ans">
<ul class="answer-list">
<li class="answer-items animated out ">
<input class="with-gap" name="group1" type="radio" id="{{this.order}}q1" />
<label for="{{this.order}}q1">{{this.q1.value}}</label>
</li>
<li class="answer-items animated out ">
<input class="with-gap" name="group1" type="radio" id="{{this.order}}q2" />
<label for="{{this.order}}q2">{{this.q2.value}}</label>
</li>
<li class="answer-items animated out ">
<input class="with-gap" name="group1" type="radio" id="{{this.order}}q3" />
<label for="{{this.order}}q3">{{this.q3.value}}</label>
</li>
<li class="answer-items animated out ">
<input class="with-gap" name="group1" type="radio" id="{{this.order}}q4" />
<label for="{{this.order}}q4">{{this.q4.value}}</label>
</li>
</ul>
<div class="test-controlls">
<button class="btn waves-effect waves-light right" type="submit" name="action">Next
<i class="material-icons right">send</i>
</button>
<span class="quiz-count right">1/10</span>
</div>
</form>
</div>
</template>
I was looking inside the target data but still can find the checked value. this is probably very obvious but I cant figure it out.So help wound be great.
Thanks
Your event will contain your form element as event.target. That will contain all your inputs so you can query them, e.g. using jQuery.
For example:
const checked = $(event.target).find("input[name='group1']:checked");
If you wanted to get the value attached to that (like "q1") you could then do:
checked[0].id;
or
checked[0].labels[0].innerHTML;
you can get radio button checked value by
const val= $('input[name=group1]:checked').val();

How to dynamically display form fields when a radio button is clicked this way

I have three radio button choices for a question on a form. I want to achieve this effect with jquery: Based on which radio button was clicked, I want to show its associated form fields which are required for that radio button selection.
HTML:
<div class="ss-form-question errorbox-good" role="listitem">
<div dir="ltr" class="ss-item ss-item-required ss-radio">
<div class="ss-form-entry">
<label class="ss-q-item-label" for="entry_594986466">
<div class="ss-q-title">Are you doing this for major requirements or class credit?
<label for="itemView.getDomIdToLabel()" aria-label="(Required field)"></label>
<span class="ss-required-asterisk" aria-hidden="true">*</span>
</div>
<div class="ss-q-help ss-secondary-text" dir="ltr"></div>
</label>
<ul class="ss-choices" role="radiogroup" aria-label="Are you doing this for major requirements or class credit? ">
<li class="ss-choice-item">
<label><span class="ss-choice-item-control goog-inline-block"><input type="radio" name="majorreq" value="Major requirements" id="group_817382212_1" role="radio" class="ss-q-radio" aria-label="Major requirements" required="" aria-required="true"></span>
<span class="ss-choice-label">Major requirements</span>
</label>
</li>
<li class="ss-choice-item">
<label><span class="ss-choice-item-control goog-inline-block"><input type="radio" name="majorreq" value="Class credit" id="group_817382212_2" role="radio" class="ss-q-radio" aria-label="Class credit" required="" aria-required="true"></span>
<span class="ss-choice-label">Class credit</span>
</label>
</li>
<li class="ss-choice-item">
<label><span class="ss-choice-item-control goog-inline-block"><input type="radio" name="majorreq" value="neither, just want to help out!" id="group_817382212_3" role="radio" class="ss-q-radio" aria-label="neither, just want to help out!" required="" aria-required="true"></span>
<span class="ss-choice-label">neither, just want to help out!</span>
</label>
</li>
</ul>
<div id="majorreq_require" style="display:none;color:rgb(196,59,29);">This is a required question</div>
</div>
</div>
</div>
<div class="ss-form-question errorbox-good" role="listitem" id="classnametoggle">
<div dir="ltr" class="ss-item ss-text">
<div class="ss-form-entry">
<label class="ss-q-item-label" for="entry_2016813698">
<div class="ss-q-title">If for class credit, which class is it for?</div>
<div class="ss-q-help ss-secondary-text" dir="ltr">ex HDFS 395C</div>
</label>
<input type="text" name="whichclass" value="" class="ss-q-short" id="whichclass_input" dir="auto" aria-label="If for class credit, what class is it for? ex HDFS 395C Must contain " pattern=".*.*" title="Must contain ">
<div id="whichclass_require" style="display:none;color:rgb(196,59,29);">This is a required question</div>
</div>
</div>
</div>
<div class="ss-form-question errorbox-good" role="listitem" id="classhourstoggle">
<div dir="ltr" class="ss-item ss-text">
<div class="ss-form-entry">
<label class="ss-q-item-label" for="entry_1438442595">
<div class="ss-q-title">And how many hours are required?</div>
<div class="ss-q-help ss-secondary-text" dir="ltr">enter only numbers</div>
</label>
<input type="number" name="classhours" value="" class="ss-q-short" id="classhours_input" dir="auto" aria-label="How many hours are required for you to complete? State it in numbers Must be a number greater than 0" step="any" title="Must be a number greater than 0">
<div id="classhours_valid" style="display:none;color:rgb(196,59,29);">Please enter a number</div>
<div id="classhours_require" style="display:none;color:rgb(196,59,29);">This is a required question</div>
</div>
</div>
</div>
The three radio button choices have an id equal to "majorreq". If the radio button for "Class credit" is selected then it should show the fields with div id's of "classnametoggle" and "classhourstoggle". It should hide these fields when the page initially loads.
How can I do this? I have searched far and wide on google but I am very confused as I am only a beginner to javascript programming. Any help would be greatly appreciated.
I think this is what you want, try put this into your js section script, hope this helpes.
Explanation
- When radio button(Class credit) was clicked, then the div with id classnameotggle and classhourstoggle should appear, right?
<script>
$(document).ready(function(){
$('#classhourstoggle, #classnametoggle').hide();
$('input[type=radio]').on('click', function(){
var radio_value = $(this).val();
if(radio_value=="Class credit")
{
$('#classhourstoggle, #classnametoggle').show();
}
else
{
$('#classhourstoggle, #classnametoggle').hide();
}
});
});
</script>
Try something like this:
$(".radio").on("click", function() {
var target = $(this).data("target");
$(".form-group").hide().filter("[data-target=" + target + "]").show();
});
.form-group {
display: none;
}
<form>
<input type="radio" class="radio" data-target="form1" />
<input type="radio" class="radio" data-target="form2" />
<input type="radio" class="radio" data-target="form3" />
<div class="form-group" data-target="form1">
</div>
<div class="form-group" data-target="form2">
</div>
<div class="form-group" data-target="form3">
</div>
</form>
Basically what you are doing is using the data attribute as a way to manage the relationship between radio button and DOM content. When you click a radio button, it hides all of the forms, only showing the relevant one.
You just need to add data attributes (like I have) or classes on your radio buttons and the wrappers around their related forms.

Jquery special selection

I have the following html code:
<div class="Radios">
<span class="radio">
<input type="radio" value="1"> yes
<input type="radio" value="0"> no
</span>
</div>
<div class="More">hello</div>
<div class="More">hello</div>
<div class="Radios">
<span class="radio">
<input type="radio" value="1"> yes
<input type="radio" value="0"> no
</span>
</div>
<div class="More">hello</div>
<div class="Radios">
<span class="radio">
<input type="radio" value="1"> yes
<input type="radio" value="0"> no
</span>
</div>
<div class="More">hello</div>
<div class="More">hello</div>
<div class="More">hello</div>
By default all the divs with class=more should be hidden. I use $('div.More').hide()
The difficult thing is that when a user clicks in a radio with value '1' all the divs.More next siblings to div.Radios should be shown (but only the inmediate siblings, not all the divs.More).
Until now, i have the parent of an element clicked, but i cannot select the next div.More elements until the next div.Radios.
Could you give me a hand?
Best Regards.
Jose
but i cannot select the next div.More elements until the next div.Radios.
Use nextUntil():
$('input[type=radio][value=1]').click(function () {
$(this).parents('.Radios').nextUntil('.Radios').show();
}
Well first off, the radio inputs that you click on are 2 levels down from the parent you care about, ".Radios".
So you want to be able to get that parent before you do anything else, something like this:
$("[type=radio]").click(function(){
var realParent = $(this).parents(".Radios");
});
Now that you have the parent you can easily get the .next() and .prev() sibling element:
$("[type=radio]").click(function(){
var realParent = $(this).parents(".Radios");
realParent.next().show();
realParent.prev().show();
});

Changing classes on multiple divs when selecting specific radio buttons

Hey everyone I got a javascript problem I can't seem to find a specific solution for on the web. What I want to be able to do is select one of the radio buttons and have that change the class of #home-right to either .rackmount or .shipping and add the class of .displaynone to the type of dimensions I don't want shown.
<div id="home-right" class="rackmount">
<h4 class="helvneuebcn">Case Finder</h4>
<div class="cta-options">
<input type="radio" value="Shipping and Storage" name="" checked> Shipping and Storage<br/>
<input type="radio" value="Rackmount Enclosures" name=""> Rackmount Enclosures<br/>
</div>
<div class="shipping-dimensions displaynone">
<div class="dimensions"><input type="text" class="size"><span class="helvneuemd">H x </span></div>
<div class="dimensions"><input type="text" class="size"><span class="helvneuemd">W x </span></div>
<div class="dimensions"><input type="text" class="size"><span class="helvneuemd">L</span></div>
</div>
<div class="rackmount-dimensions">
<div class="dimensions"><input type="text" class="size"><span class="helvneuemd">U Height x </span></div>
<div class="dimensions"><input type="text" class="size"><span class="helvneuemd">Rack Depth</span></div>
</div>
<div class="clear"></div>
<input type="button" value="Submit" class="findcase">
</div>
Use a onClick handler on your radio buttons to do your stuff. Example:
<input onCLick="..." type="radio" value="Shipping and Storage" name="" checked> Shipping and Storage<br/>
Also use jQuery if you ain't already - it will save you some time and its very easy to do this kind of functionality.

Unknown element in JQUery click

I am having a Html generated using JQUery and its like
<p class="fieldChoices title" style="">
Choices:
<input id="Choice1" value="option1" maxlength="150"/>
<div class="seperator"/>
<p class="deleteChoice1 cutsom_button deleteField"></p>
<div class="seperator"/>
<input id="Choice2" value="option2" maxlength="150"/>
<div class="seperator"/>
<p class="deleteChoice2 cutsom_button deleteField"></p>
<div class="seperator"/>
</p>
I am trying with on click of deleteChoice1 the corresponding Choice1 must be removed from the .fieldChoices using JQuery..
Also i may not know in JQuery whether i am clicking deleteChoice1 /deleteChoice2 ,,
so i dont know how to resolve it using JQuery..please suggest me....
$(".deleteField").click(function(){
$(this).prevAll("input:first").remove();
$(this).prevAll(".seperator").remove();
$(this).remove();
});
Though it'd be easier if you put each choice in a div.
Try the following instead:
<p class="fieldChoices title" style="">
Choices:
<fieldset>
<input id="Choice1" value="option1" maxlength="150"/>
<div class="seperator"/>
<span class="cutsom_button deleteField"></span>
</fieldset>
<fieldset>
<input id="Choice2" value="option2" maxlength="150"/>
<div class="seperator"/>
<span class="cutsom_button deleteField"></span>
</fieldset>
</p>
$("deleteField").bind("click", function(){
$(this).parent().remove();
}
html:
<fieldset class="fieldChoices title">
<legend>Choices</legend>
<ul>
<li>
<input id="Choice1" value="option1" maxlength="150"/>
<span class="deleteChoice cutsom_button deleteField"></span>
</li>
<li>
<input id="Choice2" value="option2" maxlength="150"/>
<span class="deleteChoice cutsom_button deleteField"></span>
</li>
</ul>
</fieldset>
jquery:
$(".fieldChoices li").each(function() {
var choice = $(this);
$(".deleteChoice", this).click(function() {
choice.remove();
});
});

Categories