jQuery set value of nth-child input field? - javascript

I have the following html and I want to set the value of the second radio button in the list to be checked. I know I can do this using the id attribute but how can I do the same
by using the class selector as below and chaining the input field to be checked?
<ul class="myOptionList">
<li>
<input id="1" type="radio" value="1" name="options">
<label >one</label>
</li>
<li>
<input id="2" type="radio" value="2" name="options">
<label >two</label>
</li>
...
</ul>
$(".myOptionList li:nth-child(2)"); // how do i chain input field and set it as checked


Below code may help you.
HTML
<ul class="myOptionList">
<li>
<input id="1" type="radio" value="1" name="options">
<label >one</label>
</li>
<li>
<input id="2" type="radio" value="2" name="options">
<label >two</label>
</li>
jQuery
$(".myOptionList li:nth-child(2)").find('input:radio').prop('checked',true);
For versions of jQuery prior to 1.6, use:
$(".myOptionList li:nth-child(2)").find('input:radio').attr('checked', 'checked');


$(document).ready(function(){
$(".radio1 li:nth-child(4)").find('input:radio').prop('checked',true);
$(".radio2 li:nth-child(2)").find('input:radio').prop('checked',true);
$(".radio li:nth-child(1)").find('input:radio').prop('checked',true);
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
Fourth child selected:
<ul class="radio1">
<li>
<input id="1" type="radio" value="1" name="option1">
<label >one</label>
</li>
<li>
<input id="2" type="radio" value="2" name="option1">
<label >two</label>
</li>
<li>
<input id="3" type="radio" value="3" name="option1">
<label >three</label>
</li>
<li>
<input id="4" type="radio" value="4" name="option1">
<label >four</label>
</li>
</ul>
Second child selected:
<ul class="radio2">
<li>
<input id="1" type="radio" value="1" name="option2">
<label >one</label>
</li>
<li>
<input id="2" type="radio" value="2" name="option2">
<label >two</label>
</li>
<li>
<input id="3" type="radio" value="3" name="option2">
<label >three</label>
</li>
<li>
<input id="4" type="radio" value="4" name="option2">
<label >four</label>
</li>
</ul>
First child selected:
<ul class="radio">
<li>
<input id="1" type="radio" value="1" name="option">
<label >one</label>
</li>
<li>
<input id="2" type="radio" value="2" name="option">
<label >two</label>
</li>
</ul>
First child selected:(same class name)
<ul class="radio">
<li>
<input id="1" type="radio" value="1" name="option4">
<label >one</label>
</li>
<li>
<input id="2" type="radio" value="2" name="option4">
<label >two</label>
</li>
</ul>
</body>
</html>


Even the use of:
$(".myOptionList li:nth-child(2)").find('input:radio').prop('checked',true);
Works apparently, it is just for a case.
It set the checked on all the radio until the last one, that it is set just because it is the last.
A more meaning solution would be to use the .last() to go directly on the radio option you want to set:
$(function(){
// Set the last checked radio
$('.myOptionList li > input[name="options"]').last().prop('checked', true)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="myOptionList">
<li>
<input id="1" type="radio" value="1" checked name="options">
<label >one</label>
</li>
<li>
<input id="2" type="radio" value="2" name="options">
<label >two</label>
</li>
...
</ul>
To ensure it's working properly I set the first radio checked.
But I suggest to change your code in a way that you select the radio on the value attribute.
The benefit of this is that your code will be more clear and easy to understand and change, and more if the order of radios change it will still works.

Related

jQuery manipulate DOM

this is my default HTML-Markup from the Wordpress-Plugin:
<ul class="gfield_checkbox" id="input_2_21">
<li class="gchoice_2_21_1">
<input name="input_21.1" type="checkbox" value="Option One" id="choice_2_21_1">
<label for="choice_2_21_1" id="label_2_21_1">Option One</label>
</li>
<li class="gchoice_2_21_2">
<input name="input_21.2" type="checkbox" value="Option Two" id="choice_2_21_2">
<label for="choice_2_21_2" id="label_2_21_2">Option Two</label>
</li>
</ul>
After the document is ready I want to change the HTML-Markup to this:
<ul class="gfield_checkbox" id="input_2_21">
<li class="gchoice_2_21_1 checkbox checkbox-styled">
<label for="choice_2_21_1" id="label_2_21_1">
<input name="input_21.1" type="checkbox" value="Option One" id="choice_2_21_1">
<span>Option One</span>
</label>
</li>
<li class="gchoice_2_21_2 checkbox checkbox-styled">
<label for="choice_2_21_2" id="label_2_21_2">
<input name="input_21.2" type="checkbox" value="Option Two" id="choice_2_21_2">
<span>Option Two</span>
</label>
</li>
</ul>
Thats what I actually did:
$('.gfield_checkbox > li').addClass('checkbox checkbox-styled');
But how do I change the other parts of the code?

To change the html, there is a few ways to do it. One way is to wrap the text inside with the span, and than select the sibling and add it inside of the label.
$("li")
.addClass("checkbox checkbox-styled")
.find("label")
.wrapInner("<span/>")
.each(function(){
label = $(this)
label.prepend(label.prev())
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="gfield_checkbox" id="input_2_21">
<li class="gchoice_2_21_1">
<input name="input_21.1" type="checkbox" value="Option One" id="choice_2_21_1">
<label for="choice_2_21_1" id="label_2_21_1">Option One</label>
</li>
<li class="gchoice_2_21_2">
<input name="input_21.2" type="checkbox" value="Option Two" id="choice_2_21_2">
<label for="choice_2_21_2" id="label_2_21_2">Option Two</label>
</li>
</ul>

Details are commented in demo.
Demo
/*
On each <li>...
- ...add class .checkbox and .checkbox-styled
- Find each <label> and <input> nested in each <li>
- Remove the text from the <label>...
- ...append the <input> to <label>...
- ...append a <span> to <label>...
- ...insert the value of <input> as the text of the <span>
*/
$('li').each(function(i) {
$(this).addClass('checkbox checkbox-styled');
var label = $(this).find('label');
var input = $(this).find('input');
label.text('').append(input).append(`<span>${input.val()}</span>`);
});
<ul class="gfield_checkbox" id="input_2_21">
<li class="gchoice_2_21_1">
<input name="input_21.1" type="checkbox" value="Option One" id="choice_2_21_1">
<label for="choice_2_21_1" id="label_2_21_1">Option One</label>
</li>
<li class="gchoice_2_21_2">
<input name="input_21.2" type="checkbox" value="Option Two" id="choice_2_21_2">
<label for="choice_2_21_2" id="label_2_21_2">Option Two</label>
</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

how to reuse function in javascript

I wrote a function in javascript. It works perfectly to show and hide list items on click action. I have other 5 lists items that I want to use this function for them also. However, When I tried to generalize the function by passing parameters as IDs it did not work.
the following part of the html:
function toggle_att_menu() {
var att_list = document.getElementById("att-list");
var plus = document.getElementById("plus");
var minus = document.getElementById("minus");
att_list.style.display=
((att_list.style.display!='block')?'block':'none');
plus.style.display=
((plus.style.display!='none')?'none':'inline');
minus.style.display=
((minus.style.display!='inline')?'inline':'none');
}
// what I want to do is passing parameter as following:
function toggle_att_menu(x,y,z) {
var att_list = document.getElementById(x);
var plus = document.getElementById(y);
var minus = document.getElementById(z);
att_list.style.display=
((att_list.style.display!='block')?'block':'none');
plus.style.display=
((plus.style.display!='none')?'none':'inline');
minus.style.display=
((minus.style.display!='inline')?'inline':'none');
}
//and use the function five times with different IDs each time as following:
toggle_att_menu('att-list-1','plus-1','minus-1')
toggle_att_menu('att-list-2','plus-2','minus-2')
toggle_att_menu('att-list-3','plus-3','minus-3')
toggle_att_menu('att-list-4','plus-4','minus-4')
toggle_att_menu('att-list-5','plus-5','minus-5')
<div class="title linklike">
<span id="plus-1" class="plus" >▸</span><span id="minus-1" class="minus">▾</span> <a id="linklike" onclick="toggle_att_menu()" href="#"> condition </a>
</div>
<ul id= "att-list-1" class="att-list">
<li class="checkbox ">
<label>
<input id="condition_1" name="condition" class="multi_checkbox" value="1" type="checkbox"
/>
new
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_2" name="condition" class="multi_checkbox" value="2" type="checkbox"
/>
like new
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_3" name="condition" class="multi_checkbox" value="3" type="checkbox"
/>
excellent
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_4" name="condition" class="multi_checkbox" value="4" type="checkbox"
/>
good
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_5" name="condition" class="multi_checkbox" value="5" type="checkbox"
/>
fair
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_6" name="condition" class="multi_checkbox" value="6" type="checkbox"
/>
damegaed
</label>
</li>
</ul>
</div>
<div class="search-attribute hide-list" data-attr="condition">
<div class="title linklike">
<span id="plus-2" class="plus" >▸</span><span id="minus-2" class="minus">▾</span> <a id="link" onclick="toggle_att_menu()" href="#">condition</a>
</div>
<ul id= "att-list-2" class="att-list">
<li class="checkbox ">
<label>
<input id="condition_1" name="condition" class="multi_checkbox" value="1" type="checkbox"
/>
new
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_2" name="condition" class="multi_checkbox" value="2" type="checkbox"
/>
like new
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_3" name="condition" class="multi_checkbox" value="3" type="checkbox"
/>
excellent
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_4" name="condition" class="multi_checkbox" value="4" type="checkbox"
/>
good
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_5" name="condition" class="multi_checkbox" value="5" type="checkbox"
/>
fair
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_6" name="condition" class="multi_checkbox" value="6" type="checkbox"
/>
damaged
</label>
</li>
</ul>
</div>
any idea or solution will be highly appreciated.I am not so familiar with jQuery. so please I need help using only pure java script.

Try it like this:
https://jsfiddle.net/bertdireins/dtmdod15/6/
function toggle_att_menu(elem) {
var container = elem.parentElement.parentElement;
var att_list = container.querySelector(".att-list");
var plus = container.querySelector(".plus");
var minus = container.querySelector(".minus");
att_list.style.display = ((att_list.style.display!='block')?'block':'none');
plus.style.display =((plus.style.display!='none')?'none':'inline');
minus.style.display = ((minus.style.display!='inline')?'inline':'none');
}
You first have to get the parent parent's container of your anker and then you can query the underlying elements.
Your ankers should then look like this:
<div class="title linklike">
<span id="plus" class="plus">▸</span>
<span id="minus" class="minus">▾</span>
<a id="linklike" onclick="toggle_att_menu(this)" href="#"> condition </a>
</div>
<ul id="att-list" class="att-list"> ... </ul>
Please be aware the fiddle is missing the initial CSS, so it looks little weird.
Query would make life much easier here.

The reason for this is your function calls, and your element IDs. You have no elements with id "att-list-1", "att-list-2" etc. You have two elements with the same id: "att-list". Two elements should never have the same id. Switch the ids to "att-list-1", "att-list-2" and so forth, and it probably should work. The same goes for "plus-1" ... and "minus-1" ..., you have no elements with those IDs in HTML, you use the same IDs "minus" and "plus" for several elements.

You are not using unique IDs for your elements - it's better to use classes for repeated elements. Anyway, you probably want something like that:
/*
function toggle_att_menu(x,y,z) {
var att_list = document.getElementById(x);
var plus = document.getElementById(y);
var minus = document.getElementById(z);
att_list.style.display = ((att_list.style.display!='block')?'block':'none');
plus.style.display = ((plus.style.display!='none')?'none':'inline');
minus.style.display = ((minus.style.display!='inline')?'inline':'none');
}
*/
function toggle_att_menu(element) {
var parent = element.parentElement.parentElement;
var att_list = parent.querySelector(".att-list");
var plus = parent.querySelector(".plus");
var minus = parent.querySelector(".minus");
att_list.style.display = ((att_list.style.display!='block')?'block':'none');
plus.style.display = ((plus.style.display!='none')?'none':'inline');
minus.style.display = ((minus.style.display!='inline')?'inline':'none');
}
<div class="search-attribute hide-list" data-attr="condition">
<div class="title linklike">
<span id="plus-1" class="plus">▸</span><span id="minus-1" class="minus">▾</span><a id="link-1" onclick="toggle_att_menu(this)" href="#"> condition </a>
</div>
<ul id="att-list-1" class="att-list">
<li class="checkbox ">
<label>
<input id="condition_1_1" name="condition" class="multi_checkbox" value="1" type="checkbox"/>
new
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_1_2" name="condition" class="multi_checkbox" value="2" type="checkbox"/>
like new
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_1_3" name="condition" class="multi_checkbox" value="3" type="checkbox"/>
excellent
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_1_4" name="condition" class="multi_checkbox" value="4" type="checkbox"/>
good
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_1_5" name="condition" class="multi_checkbox" value="5" type="checkbox"/>
fair
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_1_6" name="condition" class="multi_checkbox" value="6" type="checkbox"/>
damegaed
</label>
</li>
</ul>
</div>
<div class="search-attribute hide-list" data-attr="condition">
<div class="title linklike">
<span id="plus-2" class="plus" >▸</span><span id="minus-2" class="minus">▾</span> <a id="link-2" onclick="toggle_att_menu(this)" href="#">condition</a>
</div>
<ul id="att-list-2" class="att-list">
<li class="checkbox ">
<label>
<input id="condition_2_1" name="condition" class="multi_checkbox" value="1" type="checkbox"/>
new
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_2_2" name="condition" class="multi_checkbox" value="2" type="checkbox"/>
like new
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_2_3" name="condition" class="multi_checkbox" value="3" type="checkbox"/>
excellent
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_2_4" name="condition" class="multi_checkbox" value="4" type="checkbox"/>
good
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_2_5" name="condition" class="multi_checkbox" value="5" type="checkbox"/>
fair
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_2_6" name="condition" class="multi_checkbox" value="6" type="checkbox"/>
damaged
</label>
</li>
</ul>
</div>

As a general piece of advice, try:
not using the same id multiple times, because that's not how the id is supposed to work. Ids ought to be unique, otherwise, you're going to have problems with CSS and JavaScript in particular.
getting your elements by class, or some other non-unique selector, instead of id, using a function that can do that, such as getElementsByClassName orquerySelectorAll so that you can use your function just once.
using window.getComputedStyle(el).getPropertyValue as a fallback, when getting the current display to check against, in case the style is not defined yet (if you don't the first click will do nothing).
Now, regarding your problem, since you can't use jQuery, getting the elements will get kind of ugly and will depend vastly on how you position them relatively to each other. Since, you are using inline JavaScript to call your function, be sure to pass this as an argument to be able to use the link to get the required elements.
Snippet:
/* ----- JavaScript ----- */
function toggle_att_menu(a) {
var
/* Cache all desired elements. */
elements = {
att_list: a.parentElement.nextElementSibling.children[0],
plus: a.previousElementSibling.previousElementSibling,
minus: a.previousElementSibling
},
/* Store the wanted displays for each element type. */
displays = {
att_list: {from: "block", to: "none"},
plus: {from: "inline", to: "none"},
minus: {from: "none", to: "inline"}
};
/* Iterate over every property of the elements object. */
for (var type in elements) {
var
/* Cache the current element. */
element = elements[type],
/* Get the current display of the element. */
d = element.style.display ||
getComputedStyle(element, null).getPropertyValue("display");
/* Set the element's display to the appropriate one. */
element.style.display = (d != displays[type].from)
? displays[type].from
: displays[type].to;
}
}
/* ----- CSS ----- */
.plus { display: inline }
.minus { display: none }
<!----- HTML ----->
<div class="title linklike">
<span class="plus">▸</span>
<span class="minus">▾</span>
<a class="linklike" onclick="toggle_att_menu(this)" href="#">condition</a>
</div>
<div class="search-attribute hide-list" data-attr="condition">
<ul class="att-list">
<li class="checkbox">
<label>
<input name="condition" class="multi_checkbox" value="1" type="checkbox"/>
new
</label>
</li>
<li class="checkbox">
<label>
<input name="condition" class="multi_checkbox" value="2" type="checkbox"/>
like new
</label>
</li>
<li class="checkbox">
<label>
<input name="condition" class="multi_checkbox" value="3" type="checkbox"/>
excellent
</label>
</li>
<li class="checkbox">
<label>
<input name="condition" class="multi_checkbox" value="4" type="checkbox"/>
good
</label>
</li>
<li class="checkbox">
<label>
<input name="condition" class="multi_checkbox" value="5" type="checkbox"/>
fair
</label>
</li>
<li class="checkbox">
<label>
<input name="condition" class="multi_checkbox" value="6" type="checkbox"/>
damaged
</label>
</li>
</ul>
</div>
<div class="title linklike">
<span class="plus">▸</span>
<span class="minus">▾</span>
<a class="linklike" onclick="toggle_att_menu(this)" href="#">condition</a>
</div>
<div class="search-attribute hide-list" data-attr="condition">
<ul class="att-list">
<li class="checkbox">
<label>
<input name="condition" class="multi_checkbox" value="1" type="checkbox"/>
new
</label>
</li>
<li class="checkbox">
<label>
<input name="condition" class="multi_checkbox" value="2" type="checkbox"/>
like new
</label>
</li>
<li class="checkbox">
<label>
<input name="condition" class="multi_checkbox" value="3" type="checkbox"/>
excellent
</label>
</li>
<li class="checkbox">
<label>
<input name="condition" class="multi_checkbox" value="4" type="checkbox"/>
good
</label>
</li>
<li class="checkbox">
<label>
<input name="condition" class="multi_checkbox" value="5" type="checkbox"/>
fair
</label>
</li>
<li class="checkbox">
<label>
<input name="condition" class="multi_checkbox" value="6" type="checkbox"/>
damaged
</label>
</li>
</ul>
</div>

How to unbind event only from one item in a list

I have a list with 3 input elements. Every element have name attribute with the same value "shipping_method" and have different id values.
<ul>
<li>
<input type="radio" name="shipping_method" id="shipping_method_1" class="shipping_method" checked="checked">
<label for="shipping_method_1">Method 1</label>
</li>
<li>
<input type="radio" name="shipping_method" id="shipping_method_2" class="shipping_method">
<label for="shipping_method_1">Method 2</label>
</li>
<li>
<input type="radio" name="shipping_method" id="shipping_method_3" class="shipping_method">
<label for="shipping_method_1">Method 3</label>
</li>
</ul>
To each element using jquery .on() event bound
$(document).on("change", "input[name^=shipping_method]", shipping_method_selected)
I can't change the code which binds the event! I have to decouple event from the second input element. I have tried to use jquery .off(), but in this case, it unbinds the events of the three elements. What are the options of unbinding events in such situations?

Instead of using off you can specify which element to exclude from a selector, I've used :eq selector to deselect the second element.
$('input[name^=shipping_method]:not(:eq(1))').on("change", shipping_method_selected)
function shipping_method_selected() {
console.log('called');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<input type="radio" name="shipping_method" id="shipping_method_1" class="shipping_method" checked="checked">
<label for="shipping_method_1">Method 1</label>
</li>
<li>
<input type="radio" name="shipping_method" id="shipping_method_2" class="shipping_method">
<label for="shipping_method_1">Method 2</label>
</li>
<li>
<input type="radio" name="shipping_method" id="shipping_method_3" class="shipping_method">
<label for="shipping_method_1">Method 3</label>
</li>
</ul>

You can do this: Exclude second input from event binding by using :not and the id of the second input.
$(document).on("change", "input[name^=shipping_method]:not(#shipping_method_2)", shipping_method_selected);
function shipping_method_selected() {
console.log('selected');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<input type="radio" name="shipping_method" id="shipping_method_1" class="shipping_method" checked="checked">
<label for="shipping_method_1">Method 1</label>
</li>
<li>
<input type="radio" name="shipping_method" id="shipping_method_2" class="shipping_method">
<label for="shipping_method_1">Method 2</label>
</li>
<li>
<input type="radio" name="shipping_method" id="shipping_method_3" class="shipping_method">
<label for="shipping_method_1">Method 3</label>
</li>
</ul>

How to get last selected radio button id

I have two UL lists with some radio buttons. Now I want to get last selected radio button ID attribute form their UL.
For example:
If I selected radio button from first UL then return selected radio ID.
If I selected radio button from second UL then return seledted radio ID.
I have tried bellow code but not working properly. If you try with selecting first radio button from first UL you will get alert with selected ID, but when you selected radio button from second UL you will get alert from first UL and that I dont want. :(
I want to get last checked radio button ID from that UL.
Any idea how to do this?
Can you please check with this way:
First select 20 from first UL you will get 20.
Second select 80 from second UL you will get 80.
Now again change radio button from first UL and that changed radio ID I want.
Here is my JSFiddle.
Thanks.
$("#update_cart").click(function() {
var radioID = $("input[type='radio']:checked").attr("id");
if (radioID) {
alert(radioID);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<ul class="one">
<li>
<label for="1" class="label_check">
<input type="radio" id="1" name="one" value="10">10
</label>
</li>
<li>
<label for="2" class="label_check">
<input type="radio" id="2" name="one" value="20">20
</label>
</li>
<li>
<label for="3" class="label_check">
<input type="radio" id="3" name="one" value="30">30
</label>
</li>
<li>
<label for="4" class="label_check">
<input type="radio" id="4" name="one" value="40">40
</label>
</li>
<li>
<label for="5" class="label_check">
<input type="radio" id="5" name="one" value="50">50
</label>
</li>
</ul>
<ul class="two">
<li>
<label for="6" class="label_check">
<input type="radio" id="6" name="two" value="40">60
</label>
</li>
<li>
<label for="7" class="label_check">
<input type="radio" id="7" name="two" value="70">70
</label>
</li>
<li>
<label for="8" class="label_check">
<input type="radio" id="8" name="two" value="100">80
</label>
</li>
<li>
<label for="9" class="label_check">
<input type="radio" id="9" name="two" value="120">90
</label>
</li>
<li>
<label for="10" class="label_check">
<input type="radio" id="10" name="two" value="120">100
</label>
</li>
</ul>
<input type="button" id="update_cart" class="update_cart" value="Update Cart">

Use
$("#update_cart").click(function () {
var radioID = $("input[type='radio'].active").attr("id");
if (radioID) {
alert(radioID);
}
});
$("input[type='radio']").click(function(){
$('.active').removeClass('active');
$(this).addClass('active');
});
Working Demo

How to show selected value of type="radio" on populate?

On clicking on the Populate Values button the div below the button should populate the values of the selected radio buttons of the preferred and home locations respectively
I want to do it unobtrusively without inline JavaScript
<div id="form_block">
<div class="home-location">
<ul>
<li>Home Location</li>
<li>
<input type="radio" name="home-location" value="india" class="radio" id="home-india" /><label
for="home-india">India</label></li>
<li>
<input type="radio" name="home-location" value="usa" class="radio" id="home-usa" /><label
for="home-usa">USA</label></li>
</ul>
</div>
<div class="prefer-location">
<ul>
<li>Preferred Location</li>
<li>
<input type="radio" name="home-preferred" value="india" class="radio" id="preferred-india" /><label
for="preferred-india">India</label></li>
<li>
<input type="radio" name="home-preferred" value="usa" class="radio" id="preferred-usa" /><label
for="preferred-usa">USA</label></li>
</ul>
</div>
<div class="result">
My Home Location is: <span class="home-location-result"></span>and my preferred
location is: <span class="home-location-result"></span>
</div>
<input type="submit" value="Populate Values" id="ss" class="submit" />

Modified your HTML. Provided an id attribute for your result spans
$(function(){
$("#ss").click(function(){
// Find all input elements with type radio which are descendants of element with id `form`
var filt = $("#form_block input:radio");
// Apply a filter to the above object with `name='home-location'` and checked and get the value
var homeVal = filt.filter("[name='home-location']:checked").val();
// same as above
var preferredVal = filt.filter("[name='home-preferred']:checked").val();
// Set the text of the element width id `home-location-result' with the computed value
$("#home-location-result").text(homeVal);
// same as above
$("#preferred-location-result").text(preferredVal);
return false;
});
});
See a working demo

use this it's works for me
<script>
function test()
{
var home= $('input:radio[name=home-location]:checked').val();
document.getElementById("h1").innerHTML=home;
var preferred= $('input:radio[name=home-preferred]:checked').val();
document.getElementById("h2").innerHTML=preferred;
return false;
}
</script>
<form onsubmit="return test();">
<div id="form_block">
<div class="home-location">
<ul>
<li>Home Location</li>
<li>
<input type="radio" name="home-location" value="india" class="radio" id="home-india" /><label
for="home-india">India</label></li>
<li>
<input type="radio" name="home-location" value="usa" class="radio" id="home-usa" /><label
for="home-usa">USA</label></li>
</ul>
</div>
<div class="prefer-location">
<ul>
<li>Preferred Location</li>
<li>
<input type="radio" name="home-preferred" value="india" class="radio" id="preferred-india" /><label
for="preferred-india">India</label></li>
<li>
<input type="radio" name="home-preferred" value="usa" class="radio" id="preferred-usa" /><label
for="preferred-usa">USA</label></li>
</ul>
</div>
<div class="result">
My Home Location is: <span class="home-location-result" id="h1"></span>and my preferred
location is: <span class="home-location-result" id='h2'></span>
</div>
<input type="submit" value="Populate Values" id="ss" class="submit" />
</form>

Categories

Resources