How to get radio button checked value - javascript

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();

Related

Serializing data of li to send by post method ajax

I have this snippet
<li>
<a href="#demo_point_in_first_quad" class="btn btn-danger show" data-toggle="collapse">
Simple collapsible
</a>
<div id="demo_point_in_first_quad" class="collapse">
<label>tts</label> <input id="tts" type="text" value="10"><br>
<label>topic_level</label> <input id="topic_level" type="text" value="capable"><br>
<label>to_be_shown_individually</label> <input id="to_be_shown_individually" type="checkbox" checked="">
<br>
<label>check_for_geometry</label><input id="check_for_geometry" type="checkbox" checked="">
<br>
</div>
</li>
And similar to it second li
<a href="#demo_point_in_second_quad" class="btn btn-danger show" data-toggle="collapse">
Simple collapsible
</a>
<div id="demo_point_in_second_quad" class="collapse">
<label>tts</label> <input id="tts" type="text" value="10"><br>
<label>topic_level</label> <input id="topic_level" type="text" value="capable"><br>
<label>to_be_shown_individually</label> <input id="to_be_shown_individually" type="checkbox" checked="">
<br>
<label>check_for_geometry</label><input id="check_for_geometry" type="checkbox" checked="">
<br>
</div>
I want the values in the input field to be sent through ajax with there specific div id.
According to your edited question, i would suggest that you add some class to your input elements so that their search becomes easier.
<input class="myitem"></input>
Then, you can get a list of all inputs as:
var list = document.getElementsByClassName("myitem");
Finally you can iterate over the list to get the value of inputs
for(i=0;i<list.length;i++){
inputValue = list[i].value; // Value of input field
parent = list[i].parentElement; // Parent div has the id so extract from here
{/* Save both of them somewhere and use as required */}
}
$.post("url",
{
key: value
},
function(data){
alert("Data: " + data);
});
});

Opcheckout not detecting checkbox

I am building a e-commerce software and got stuck on payment checkout page.
I have decided to use OP Checkout know as Magento Checkout and included all required JS files. The problem is when i click on Continue button it does not detect which checkbox is ticked. When i debuged to the alert message i found this line of code that needs to catch the user interaction.
if ($('login:guest') && $('login:guest').checked) {
HTML CODE:
<div class="col-md-6">
<h3>Checkout as a Guest or Register</h3>
<div class="space10"></div>
<p>Register with us for future convenience:</p>
<div class="cbox">
<input name="checkout_method" id="login:guest" value="guest" class="radio" type="radio"><span for="login:guest">Checkout as Guest</span><br>
<div class="space10"></div>
<input name="checkout_method" id="login:register" value="register" class="radio" type="radio"><span for="login:register">Register</span>
</div>
<div class="space20"></div>
<h4>Register and save time!</h4>
<div class="space10"></div>
<p>Register with us for future convenience:</p>
<ul class="ul">
<li><i class="fa fa-check"></i> Fast and easy check out</li>
<li><i class="fa fa-check"></i> Easy access to your order history and status</li>
</ul>
<div class="space10"></div>
<button id="onepage-guest-register-button" type="button" class="button btn-black" onclick="checkout.setMethod();"><span><span>Continue</span></span></button>
</div>
This above code does not catch the result.
Use # for id selectors and escape : from id (Read Selector docs) like,
if ($('#login\\:guest').is(':checked')) { //escape : by using \\
Another way of using it is,
$('[id="login:guest"]').is(':checked');
Snippet,
$(function() {
$('#btnCheck').on('click', function() {
alert($('#login\\:guest').is(':checked') + ',' + $('[id="login:register"]').is(':checked'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cbox">
<input name="checkout_method" id="login:guest" value="guest" class="radio" type="radio"><span for="login:guest">Checkout as Guest</span><br>
<div class="space10"></div>
<input name="checkout_method" id="login:register" value="register" class="radio" type="radio"><span for="login:register">Register</span>
<button id="btnCheck">Check</button>
</div>
The code worked after i added .prop('checked') instead of is(':checked');
$(function() {
$('#btnCheck').on('click', function() {
alert($('#login\\:guest').prop('checked') + ',' + $('[id="login:register"]').prop('checked'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cbox">
<input name="checkout_method" id="login:guest" value="guest" class="radio" type="radio"><span for="login:guest">Checkout as Guest</span><br>
<div class="space10"></div>
<input name="checkout_method" id="login:register" value="register" class="radio" type="radio"><span for="login:register">Register</span>
<button id="btnCheck">Check</button>
</div>

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

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?

HTML FORMS - Passing values to two different forms on the same page

I am having problems trying to pass values to two different forms on the same page. The page is populated with 16 radio buttons (which I’ve turned into boxes for display reasons) and they all hold a value (e.g. 001). Both of the forms jobs are to somehow grab the active/selected radio button value and post it to a PHP file so database changes can be made. Instead of a submit button, I am using an anchor to pass a JavaScript submit function. I have tried having
both forms cover the whole page but still didn't have any luck.
I’ll post some code below to help you understand.
PS. If you need more code to understand, I can post it to pastebin.
<li>
<form id="form_ready" method="post" action="../backend/screen.php">
<input type="hidden" name="screenid" value="" />
<input type="hidden" name="status" value="" />
<input type="hidden" name="pickupid" value="document.activeElement.value;" />
<a onclick="document.getElementById('form_ready').submit();">READY</a>
</form>
</li>
<li>
<form id="form_c" method="post" action="../backend/screen.php">
<input type="hidden" name="status" value="" />
<input type="hidden" name="pickupid" value="document.activeElement.value;" />
<a onclick="document.getElementById('form_c').submit();">COLLECTED</a>
</form>
</li>
</ul>
<div id="content">
<div id="container">
<div id="table">
<div id="tr1">
<div id="td1">
<input type="radio" name="pickup" id="1" value="001" />
<label for="1"> <span>001</span> </label>
</div>
<div id="td2">
<input type="radio" name="pickup" id="2" value="002" />
<label for="2"> <span>002</span> </label>
</div>
<div id="td3">
<input type="radio" name="pickup" id="3" value="003" />
<label for="3"> <span>003</span> </label>
</div>
<div id="td4">
<input type="radio" name="pickup" id="4" value="004" />
<label for="4"> <span>004</span> </label>
</div>
To answer the suggestion in the comments and use only one form, here's how to grab the value from the selected radio button:
var inputs = document.getElementsByTagName('input');
var valueSelected;
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) valueSelected = inputs[i].value;
}
valueSelected will contain the value of the selected radio.
If you ever need to reduce the type to "radio" only for some reason, you can check an input type with inputs[i]['type'] === 'radio' in the for loop.
The best would probably still be to set a class for your "radio" inputs, it will allow the loop to be more specific, hence a more efficient code, for example:
<input type="radio" class="myRadio">
and in JS: var inputs = document.getElementsByClassName('myRadio');

Trying to get a mouseover event when over a radio button

I am trying to call a function when I mousever a radio button. The function never gets called. The first of my two radio buttons below show my latest attempt.
<form action="#">
<ul>
<li>
<input type="radio" class="button" name="buttonSubGroup" onclick="Door();" onmouseover="mouseOver('doorMouseover')" onmouseout="mouseOff('doorMouseover')" id="button1" checked/>
<label for="button1">Door</label>
</li>
<li>
<input type="radio" class="button" name="buttonSubGroup" onclick="Trim();" id="button2" />
<label for="button2">Trim</label>
</li>
<li>
<input type="radio" class="button" name="buttonSubGroup" onclick="Roof();" onmouseover="mouseOver('roofMouseover');" onmouseout="mouseOff('roofMouseover');" id="button3" />
<label for="button3">Roof</label>
</li>
<li>
<input type="radio" class="button" name="buttonSubGroup" onclick="Siding();" id="button4" />
<label for="button4">Siding</label>
</li>
<li>
<input type="radio" class="button" name="buttonSubGroup" onclick="Stone();" id="button5" />
<label for="button5">Stone</label>
</li>
<li>
<input type="radio" class="button" name="buttonSubGroup" onclick="BB();" id="button6" />
<label for="button6">BB</label>
</li>
</ul>
</form>
EDIT:
Here are my JS functions. I put an alert to notify me if I made it into the function.
function mouseOver(a) {
alert(a)
document.getElementById(a).style.visibility = 'visible';
}
function mouseOff(a) {
alert(a);
document.getElementById(a).style.visibility = 'hidden';
}
Two things I have noticed:
1.Your checked property on your first radio button should be checked="checked"
2.This code seems to work when hovering over the radio buttons. If you would like it to work when hovering over the label, you will want to add onmouseover and onmouseout event handlers to the labels also. For example:
<li>
<input type="radio" class="button" name="buttonSubGroup" onclick="Door();" onmouseover="mouseOver('doorMouseover')" onmouseout="mouseOff('doorMouseover')" id="button1" checked="checked"/>
<label for="button1" onmouseover="mouseOver('doorMouseover')" onmouseout="mouseOff('doorMouseover')>Door</label>
</li>
http://jsfiddle.net/puddinman13/Mh7PZ/
How are you declaring your functions (mouseOver and mouseOff)?
It could be that it isn't declared in the global scope.
I tried your code here, and it seemed to work, except that not all of the radio buttons called mouseOver() or mouseOff().
Try declaring your functions like this:
window['mouseOver']=function(data) {
//do something
};
window['mouseOff'] = function(data) {
//do something else
}

Categories