Change alphabet when select radio button - javascript

When I click one of the alphabet, the selected one shall be displayed and the rest should be hidden.
Somehow, the code doesn't work. I'm using jQuery.
$("#r-learn-more").click(function() {
alert("Handler for .click() called.");
});
$("#r-book-viewing").click(function() {
$("#bb").attr("display", "block");
});
$("#r-closing-price").click(function() {
alert("Handler for .click() called.");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="fieldset-content">
<div class="radio">
<input type="radio" value="one" name="radiogroup1" id="r-learn-more" checked="">
<label for="r-learn-more">a</label>
</div>
<div class="radio">
<input type="radio" value="two" name="radiogroup1" id="r-book-viewing">
<label for="r-book-viewing">b</label>
</div>
<div class="radio">
<input type="radio" value="three" name="radiogroup1" id="r-closing-price">
<label for="r-closing-price">c</label>
</div>
</div>
<div id="aa" style="display: block;">a</div>
<div id="bb" style="display: none;">b</div>
<div style="display: none;">c</div>

In general you tried with $("#bb").attr('display','block'), must be $("#bb").css("display","block");
Maybe the better way is to use something like:
<div class="fieldset-content">
<div class="radio">
<input type="radio" data-show="aa" value="one" name="radiogroup1" id="r-learn-more" checked="">
<label for="r-learn-more">a</label>
</div>
<div class="radio">
<input type="radio" data-show="bb" value="two" name="radiogroup1" id="r-book-viewing">
<label for="r-book-viewing">b</label>
</div>
<div class="radio">
<input type="radio" data-show="cc" value="three" name="radiogroup1" id="r-closing-price">
<label for="r-closing-price">c</label>
</div>
</div>
<div id="aa" class='item' style="display: block;">a</div>
<div id="bb" class='item' style="display: none;">b</div>
<div id="cc" class='item' style="display: none;">c</div>
And JS
var $items = $('.item');
$(':radio').on('change', function () {
var $item = $('#' + this.dataset.show);
$items.not($item).css('display', 'none');
$item.css('display', 'block');
});

Try this
$('.radio input').change(function(event){
$('.alphabet-letter').hide();
$('#'+$(this).data('id')).show();
}).first().prop('checked', true).trigger('change');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="fieldset-content">
<div class="radio">
<input type="radio" value="one" name="radiogroup1" id="r-learn-more" data-id="aa">
<label for="r-learn-more">a</label>
</div>
<div class="radio">
<input type="radio" value="two" name="radiogroup1" id="r-book-viewing" data-id="bb">
<label for="r-book-viewing">b</label>
</div>
<div class="radio">
<input type="radio" value="three" name="radiogroup1" id="r-closing-price" data-id="cc">
<label for="r-closing-price">c</label>
</div>
</div>
<div id="aa" class="alphabet-letter">
a
</div>
<div id="bb" class="alphabet-letter">
b
</div>
<div id="cc" class="alphabet-letter">
c
</div>

Wouldn't even be easier just to have one "result" div?
Something like this
EDIT: For displaying the "a" as default either you just put "a" in the result div, or maybe on load you get the text (in this case you are not using the value) of the radio button option selected as per the edit in the snippet
$('#result').text($('input:radio[name=radiogroup1]:checked').parent().text());
$( ".radio input" ).click(function() {
var label = $("label[for='"+$(this).attr('id')+"']");
console.log(label);
console.log(label.html());
$('#result').text(label.html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="fieldset-content">
<div class="radio">
<input type="radio" value="one" name="radiogroup1" id="r-learn-more" checked="">
<label for="r-learn-more">a</label>
</div>
<div class="radio">
<input type="radio" value="two" name="radiogroup1" id="r-book-viewing">
<label for="r-book-viewing">b</label>
</div>
<div class="radio">
<input type="radio" value="three" name="radiogroup1" id="r-closing-price">
<label for="r-closing-price">c</label>
</div>
</div>
<div id="result" style="display: block;">
<!--Alernative to load the text by jquery you could just put here "a"-->
</div>

Related

How to disable my button based on dynamically generated radio buttons

As you can see my radio button ids are dynamic.
I want to disable input type file button if my value value="0" or value="2" radio buttons without affecting other section.
/*First Section*/
<input type="file" name="files" multiple="multiple" id="Button_select_1" />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input data-val="true" data-val-required="Kindly submit your response" id="10_3" name="AnswerResponse" type="radio" value="1" />
<label>Yes</label>
</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input checked="checked" id="10_4" name="AnswerResponse" type="radio" value="0" />
<label>No</label>
</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input id="10_5" name="AnswerResponse" type="radio" value="2" />
<label>N/A</label>
</label>
</div>
</div>
/*Second Section*/
<input type="file" name="files" multiple="multiple" id="Button_select_1" />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input data-val="true" data-val-required="Kindly submit your response" id="11_3" name="AnswerResponse" type="radio" value="1" />
<label>Yes</label>
</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input checked="checked" id="11_4" name="AnswerResponse" type="radio" value="0" />
<label>No</label>
</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input id="11_5" name="AnswerResponse" type="radio" value="2" />
<label>N/A</label>
</label>
</div>
</div>
/*Third Section*/
<input type="file" name="files" multiple="multiple" id="Button_select_1" />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input data-val="true" data-val-required="Kindly submit your response" id="16_3" name="AnswerResponse" type="radio" value="1" />
<label>Yes</label>
</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input checked="checked" id="16_4" name="AnswerResponse" type="radio" value="0" />
<label>No</label>
</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input id="16_5" name="AnswerResponse" type="radio" value="2" />
<label>N/A</label>
</label>
</div>
</div>
....
/*nth Section*/
<input type="file" name="files" multiple="multiple" id="Button_select_1" />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input data-val="true" data-val-required="Kindly submit your response" id="nth_3" name="AnswerResponse" type="radio" value="1" />
<label>Yes</label>
</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input checked="checked" id="nth_4" name="AnswerResponse" type="radio" value="0" />
<label>No</label>
</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input id="nth_5" name="AnswerResponse" type="radio" value="2" />
<label>N/A</label>
</label>
</div>
</div>
I'm loading my form dynamically so my radio button ids are dynamic well. Each section contain input type file button. My input type file id will have the same id that is "Button_select_1" for some reason.
Assuming that there can be more than 1 checkbox/radio button checked at a time throughout the entire collection of elements you need some means by which to distinguish them as a group, otherwise as they are all called the same thing you will only be able to check one at a time. To that end you can remove ID attributes generally as they often cause issues and use a name[x] type syntax for the radio button names. If there are a unlimited possible number of these, dynamically generated, it becomes easy to assign a number ( or unique string ) within the square braces in whatever code generates the sections.
As mentioned by #mplungian, nesting the elements within a common parent ( a section is perfect ) it becomes very easy to process the checking of radio buttons and the required enable/disable of the file input. A delegated event listener, bound to the page in this case, will work regardless of the number of dynamic elements added to the DOM and some very simple code within the event handler will find the file input and disable it if any radio other than the Yes radio is checked. As that is to be the default behaviour and the No is selected by default it makes sense to disable the file input initially.
The name[x] type syntax can also help when processing a large dataset serverside as that x value acts as a key within the array!
document.addEventListener('change',e=>{
if( e.target instanceof HTMLInputElement && e.target.type=='radio' ){
let bttn=e.target.closest('section').querySelector('[type="file"]');
bttn.disabled=( parseInt( e.target.value )!==1 );
}
})
body{
counter-reset:sections;
}
section:before{
counter-increment:sections;
content:'Section: 'counter(sections)
}
<section>
<input type="file" name="files" multiple="multiple" disabled />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input data-val="true" data-val-required="Kindly submit your response" name="AnswerResponse[1]" type="radio" value="1" />Yes</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input checked="checked" name="AnswerResponse[1]" type="radio" value="0" />No</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input name="AnswerResponse[1]" type="radio" value="2" /> N/A</label>
</div>
</div>
</section>
<section>
<input type="file" name="files" multiple="multiple" disabled />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input data-val="true" data-val-required="Kindly submit your response" name="AnswerResponse[2]" type="radio" value="1" />Yes</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input checked="checked" name="AnswerResponse[2]" type="radio" value="0" />No</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input name="AnswerResponse[2]" type="radio" value="2" />N/A</label>
</div>
</div>
</section>
<section>
<input type="file" name="files" multiple="multiple" disabled />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input data-val="true" data-val-required="Kindly submit your response" name="AnswerResponse[3]" type="radio" value="1" />Yes</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input checked="checked" name="AnswerResponse[3]" type="radio" value="0" />No</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input name="AnswerResponse[3]" type="radio" value="2" />N/A</label>
</div>
</div>
</section>
<section>
<input type="file" name="files" multiple="multiple" disabled />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input data-val="true" data-val-required="Kindly submit your response" name="AnswerResponse[n]" type="radio" value="1" />Yes</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input checked="checked" name="AnswerResponse[n]" type="radio" value="0" />No</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input name="AnswerResponse[n]" type="radio" value="2" />N/A</label>
</div>
</div>
</section>
Here is my suggestion
Find the closest static container of all the sections and delegate from there - I made a div with id="container"
wrap each section in a div with class section to be able to navigate to the input from the related radio
Initialise if needed - if the radios may already have been selected from the server
With this code the IDs of the radios and file elements are not needed.
I also removed the nested label which is not valid HTML but this change is not relevant to the question
document.getElementById("container").addEventListener("click", (e) => {
const tgt = e.target;
if (!tgt.matches("[name=AnswerResponse]")) return; // not a radio
tgt.closest(".section").querySelector("[type=file]").disabled = ["0", "2"].includes(tgt.value)
});
// init:
document.querySelectorAll(".section").forEach(section => {
const selectedRad = section.querySelector("input[name=AnswerResponse]:checked");
if (selectedRad) {
section.querySelector("[type=file]").disabled = ["0", "2"].includes(selectedRad.value);
}
})
.section {
border: 1px solid black;
}
<div id="container">
<div class="section">
/*First Section*/
<input type="file" name="files" multiple="multiple" id="Button_select_1" />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label> <input data-val="true" data-val-required="Kindly submit your response" id="10_3" name="AnswerResponse" type="radio" value="1" />
Yes</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input checked="checked" id="10_4" name="AnswerResponse" type="radio" value="0" />
No</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input id="10_5" name="AnswerResponse" type="radio" value="2" />
N/A</label>
</div>
</div>
</div>
<div class="section">
/*Second Section*/
<input type="file" name="files" multiple="multiple" id="Button_select_1" />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input data-val="true" data-val-required="Kindly submit your response" id="11_3" name="AnswerResponse" type="radio" value="1" />
Yes</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input checked="checked" id="11_4" name="AnswerResponse" type="radio" value="0" />
No</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input id="11_5" name="AnswerResponse" type="radio" value="2" />
N/A</label>
</div>
</div>
</div>
<div class="section">
/*Third Section*/
<input type="file" name="files" multiple="multiple" id="Button_select_1" />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input data-val="true" data-val-required="Kindly submit your response" id="16_3" name="AnswerResponse" type="radio" value="1" />
Yes</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input checked="checked" id="16_4" name="AnswerResponse" type="radio" value="0" />
No</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input id="16_5" name="AnswerResponse" type="radio" value="2" />
N/A</label>
</div>
</div>
</div>
<div class="section">
.... /*nth Section*/
<input type="file" name="files" multiple="multiple" id="Button_select_1" />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input data-val="true" data-val-required="Kindly submit your response" id="nth_3" name="AnswerResponse" type="radio" value="1" />
Yes</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input checked="checked" id="nth_4" name="AnswerResponse" type="radio" value="0" />
No</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input id="nth_5" name="AnswerResponse" type="radio" value="2" />
N/A</label>
</div>
</div>
</div>

How to hide input fields of a form which are not checked and display only checked ones

I have a form with many input fields. On each input change there is a checkbox which get checked. Now i want to show only those fields which are checked on button click and hide others. I am not sure what will be the best way to achieve that behaviour. Later on next button click i will submit only checked fields.
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox"/>
<label for="checkbox-1"></label>
</div>
<div class="field">
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox"/>
<label for="checkbox-2"></label>
</div>
<div class="field">
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox"/>
<label for="checkbox-3"></label>
</div>
<div class="field">
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>
</div>
</div>
<button type="button" >click</button>
Following jQuery function is to check checkbox on input field change
$('.form-group').find('input[type=text], select').on('change', function () {
$(this).closest('.form-group').find('input[type=checkbox]').prop('checked', true);
});
If I understand your question right, it can help you: https://api.jquery.com/has/
Like this:
$('.form-group:not(:has(input:checked))').hide();
Here's a simple example. Alternatively, you might also look at Select2 plugin.
<script>
$(document).ready(function(){
//hide by default
$('#field1').hide();
$('#check1').click(function(e){
if ($('#check1').prop('checked')){
$('#field1').show();
}else{
$(#field1).hide();
}
});
});
</script>
<body>
<form>
<label for="check1">click me</label>
<input id="check1" type="checkbox"/>
<input id="field1" type="text"/>
</form>
</body>
try this one line of js code
<button type="button" id="btn">click</button>
$('#btn').on('click', function () {
$('[type=checkbox]:not(:checked)').closest(".form-group").hide()
});
Here I tried for a solution
$('.form-group').find('input[type=checkbox]').on('change', function() {
//hide input
$(this).closest('.form-group').find('.field').attr('style', 'display:none');
//hide checkbox
$(this).closest('.form-group').find('.checkbox').attr('style', 'display:none');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox" checked='true' />
<label for="checkbox-1"></label>
</div>
<div class="field">
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox" checked='true' />
<label for="checkbox-2"></label>
</div>
<div class="field">
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox" checked='true' />
<label for="checkbox-3"></label>
</div>
<div class="field">
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>
</div>
</div>
<button type="submit">click</button>
Here is a solution for your question.
On button click event you can check the value of each checkbox which is checked or not!
On the basis of is(':checked') hide/show the input field
$('.form-group').find('input[type=text], select').on('change', function () {
$(this).closest('.form-group').find('input[type=checkbox]').prop('checked', true);
});
$("#btn").click(function(){
var count = 0;
$('input[type=checkbox]').each(function(ind,value){
if ($(this).is(':checked')) {
count++;
}
});
//check if atleast one check box is selected
if(count > 0){
$('input[type=checkbox]').each(function(ind,value){
if (!$(this).is(':checked')) {
$(this).parent().hide();
$(this).parent().next().hide();
}
})
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox"/>
<label for="checkbox-1"></label>
</div>
<div class="field">
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox"/>
<label for="checkbox-2"></label>
</div>
<div class="field">
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox"/>
<label for="checkbox-3"></label>
</div>
<div class="field">
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>
</div>
</div>
<button type="button" id="btn">click</button>

I want to dynamically get values of all checked radio buttons in certain div on a click of button

I want to dynamically get values of all checked radio buttons in certain div on a click of button .add
<div class="item">
<title class="name">Espresso</title>
**<div class="option1">**
<fieldset>
<legend>Pick </legend>
<label for="radio-1" >Short</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-1"
value="Short">
<label for="radio-2">Long</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-2" value="Long">
<hr>
<label for="radio-3">In big cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-3" value="In big cup">
<label for="radio-4">Small cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-4"
value="Small cup">
</fieldset>
</div>
<hr>
<button type="submit" class="add">+Add</button>
<span class="price" value="4$">Price:<br>5$</span>
</div>
And here is .js function that should get the values of radio buttons and append it to list, but im not getting any response.
$('.add').click (function(){
$(this).siblings("fieldset").children("input[type=radio]:checked")
.each(function () {
var selectedOptions = $(this).parent().text();
$(".orderOptions").last().append("<li> +selectedOption+ </li>");
});
});
So whole process is: .click (get values of all checked radio buttons from html div) and save it to the list.
In your click event you wrote:
$(this).siblings("fieldset").children("input[type=radio]:checked")
this is wrong because this here is reference to the button not the div which you want to get the input inside it.
so you have to use the div itself :
$('#call1 fieldset input[type=radio]:checked')
then you can simply get the checked value by this.value and append it to any other div.
$('.add').click (function(){
$('#call1 fieldset input[type=radio]:checked')
.each(function () {
$('.orderOptions').append("<li>" +this.value+ "</li>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
<title class="name">Espresso</title>
<div id="call1" class="option1">
<fieldset>
<legend>Pick </legend>
<label for="radio-1" >Short</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-1"
value="Short">
<label for="radio-2">Long</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-2" value="Long">
<hr>
<label for="radio-3">In big cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-3" value="In big cup">
<label for="radio-4">Small cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-4"
value="Small cup">
</fieldset>
</div>
<hr>
<button type="submit" class="add">+Add</button>
<span class="price" value="4$">Price:<br>5$</span>
</div>
<div class='orderOptions'></div>
This is working
$(this).parent().children(".option1").children("fieldset").children("input[type='radio']:checked").each(function (index,element) {
var selectedOptions = $(element).prev("label").text();
$(".orderOptions").last().append("<li>" +selectedOptions+ "</li>");
});
Html
<div class="item">
<title class="name">Espresso</title>
**<div class="option1">**
<fieldset>
<legend>Pick </legend>
<label for="radio-1" >Short</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-1"
value="Short">
<label for="radio-2">Long</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-2" value="Long">
<hr>
<label for="radio-3">In big cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-3" value="In big cup">
<label for="radio-4">Small cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-4"
value="Small cup">
</fieldset>
</div>
<hr>
<button type="submit" class="add">+Add</button>
<span class="price" value="4$">Price:<br>5$</span>
</div>
<ul class="orderOptions">
</ul>
</div>
If you want to address a fieldset relative to your "add" button, then you can use something like this:
$('.add').click (function(){
...
$(this).siblings('div').find(':checked')
...
});
This works, because not your <fieldset> but the <div class="option1"> is the sibling of the pressed button. Once you have found the right div with the fieldset within, the selector for the checked options can be simplified to :checked, since it searches within the <div> ("write less do more ...").
$('.add').click (function(){
$('.orderOptions').append('<hr><ul>'+
$(this).siblings('div').find(':checked')
.map((_,e)=>"<li>"+e.value+"</li>").get().join('')+'</ul>'
)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
<title class="name">Espresso</title>
<div id="call1" class="option1">
<fieldset>
<legend>Pick </legend>
<label for="radio-1" >Short</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-1"
value="Short">
<label for="radio-2">Long</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-2" value="Long">
<hr>
<label for="radio-3">In big cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-3" value="In big cup">
<label for="radio-4">Small cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-4"
value="Small cup">
</fieldset>
</div>
<hr>
<button type="submit" class="add">+Add</button>
<span class="price" value="4$">Price:<br>5$</span>
</div>
<div class='orderOptions'></div>

Get value from radio button

I'm trying to make a multiple select radio but the output to the console is console=on.
That doesnt help at all. I need to know which (none,t,i or ti) that is selected.
Any idea how to do this?
$('#btnSubmit').click(function() {
var data = $('#containerCreationForm').serialize();
console.log(data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="containerCreationForm" method="post">
<div class="content-form">
<label class="col-sm-2 control-label">Console</label>
<div class="col-sm-10">
<div class="col-sm-5">
<div class="radio radio-info">
<input name="console" id="it" class="form-control" type="radio">
<label for="it">Interactive & TTY
<span class="text-blue">(-i -t)</span>
</label>
</div>
<div class="radio radio-info">
<input name="console" id="tty" class="form-control" type="radio">
<label for="tty">TTY
<span class="text-blue">(-t)</span>
</label>
</div>
</div>
<div class="col-sm-5">
<div class="radio radio-info">
<input name="console" id="interactive" class="form-control" type="radio">
<label for="interactive">Interactive
<span class="text-blue">(-i)</span>
</label>
</div>
<div class="radio radio-info">
<input name="console" id="none" class="form-control" type="radio" checked="">
<label for="none">None</label>
</div>
</div>
</div>
<button type="button" id="#btnSubmit">Submit</button>
</div>
Add value attribute in radio button.
Example:
Since,you are using Jquery in your code. I'm using it here:
$(document).ready(function(){
$("input[type='button']").click(function(){
var radioValue = $("input[name='gender']:checked").val();
if(radioValue){
alert("Your are a - " + radioValue);
}
});
});
In HTML:
<label><input type="radio" name="gender" value="male">Male</label>
<label><input type="radio" name="gender" value="female">Female</label>
<p><input type="button" value="Radio Value"></p>
Hope it helps..!
You need to use names and values to identify what your radios mean
eg
$(function() {
$("form").submit(
function(args) {
args.preventDefault();
console.log($(this).serialize());
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<fieldset>
<legend>Gender:</legend>
Male: <input type="radio" name=gender value=m> Female: <input type="radio" name=gender value=f> Other <input type="radio" name=gender value=o>
</fieldset>
<input type=submit>
</form>
this will result in a form value of gender= m | f | o
also note you should be using the forms submit event as this will invoke the forms validation logic which your current code is bypassing

can not get value from radio button using jquery

I try to get value from radio button, here's my code:
var isactive = result.IsActive;
$("input[name='RadioActive']").each(function () {
if ($(this).val() == isactive) {
$(this).attr("checked", "checked");
}
});
and the html :
<section class="col col-lg-2">
<label class="label">Active</label>
<div class="inline-group">
<label class="radio">
<input type="radio" name="RadioActive" class="RadioActive" value="T" />
<i></i>
Yes
</label>
<label class="radio">
<input type="radio" name="RadioActive" class="RadioActive" value="F" />
<i></i>
No
</label>
</div>
</section>
Doesn't work. Do you have any Idea ? What am I Missing ?
To select a radio button using jquery use prop.
In the below snippet expecting the value of result.IsActive to be F & assigning it to isactive
var isactive = "F";
$("input[name='RadioActive']").each(function() {
if ($(this).val() == isactive) {
$(this).prop("checked", "checked");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="col col-lg-2">
<label class="label">Active</label>
<div class="inline-group">
<label class="radio">
<input type="radio" name="RadioActive" class="RadioActive" value="T" />
<i></i>
Yes
</label>
<label class="radio">
<input type="radio" name="RadioActive" class="RadioActive" value="F" />
<i></i>
No
</label>
</div>
</section>
var isActive='F';
$("input[name='RadioActive']").each(function (index,value) {
if( $(value).val()==isActive)
$(value).attr('checked','checked');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="col col-lg-2">
<label class="label">Active</label>
<div class="inline-group">
<label class="radio">
<input type="radio" name="RadioActive" class="RadioActive" value="T" />
<i></i>
Yes
</label>
<label class="radio">
<input type="radio" name="RadioActive" class="RadioActive" value="F" />
<i></i>
No
</label>
</div>
</section>
The problem is that result.IsActive isn't resolving. Simply setting isactive to either T or F will check the radio button for you:
var isactive = "T";
$("input[name='RadioActive']").each(function() {
if ($(this).val() == isactive) {
$(this).attr("checked", "checked");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="col col-lg-2">
<label class="label">Active</label>
<div class="inline-group">
<label class="radio">
<input type="radio" name="RadioActive" class="RadioActive" value="T" />
Yes
</label>
<label class="radio">
<input type="radio" name="RadioActive" class="RadioActive" value="F" />
No
</label>
</div>
</section>
Note that setting it to true or false will not trigger the checked attribute; it needs to equal the value of the radio button exactly (which are T and F respectively).
Ensure that your result.IsActive returns either T or F, and it will work correctly for you.
Hope this helps! :)
You can use something like below
$("input[name='RadioActive']:checked").val()
Here is your JavaScript code:
$(document).ready(function () {
$('#myForm').on('click', function () {
var value = $("[name=RadioActive]:checked").val();
alert("Selected Radio Value is : " + value);
})
});
HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<form id="myForm">
<section class="col col-lg-2">
<label class="label">Active</label>
<div class="inline-group">
<label class="radio">
<input type="radio" name="RadioActive" class="RadioActive" value="T" />
<i></i>
Yes
</label>
<label class="radio">
<input type="radio" name="RadioActive" class="RadioActive" value="F" />
<i></i>
No
</label>
</div>
</section>
</form>
</body>
</html>
and here is a working plunker for the code:
https://plnkr.co/edit/D9UaU43OxHGUg80xxsiS?p=preview

Categories