We Keep Coding

Javascript event to change its child to checked

I want an event in which when i click the list tag so the radio button gets checked.
<li class="morning-time">
<div class="morning-icon"></div>
<div class="timeTxt">Morning <span>7am - 12am</span></div>
<div class="checkBox">
<label>
<input type="radio" class="option-input checkbox" id="rbt_Time1" name="rbt_Time" value="1" data-text="Morning 7am - 12am">
<span></span>
</label>
</div>
<div class="clear"></div>
</li>

You will have to include jquery for using the following code:
$(function() {
$('.morning-time').on('click', function(){
$('.option-input', $(this)).prop("checked", true);
});
});
Here, on li(class='morning-time'), the radio(class='option-input') is searched inside(the li tag) and set checked.

You need setAttribute to do so AND to explain the code, radio styled input have a checked attribute. Just set it to true and the input get check.
Here the code :
function CheckMe()
{
var radioInput = document.getElementById("rbt_Time1");
radioInput.setAttribute("checked", "true");
}

Accessing the content value from within 3 classes in Javascript

So I have a dropdown box with values "No" and "Yes" but it will not property display it when selected. It just comes up as blank. No matter what I choose, I want it to display what I have chosen, either "Yes" or "No".
So I got the class names for everything that I need.
For the selected value that is being displayed in the dropdown box is:
<a class="select2-choice" tabindex="-1" onclick="return false;" href="javascript:void(0)">
<span class="select2-chosen">No</span>
<abbr class="select2-search-choice-close"></abbr>
.....
</a>
The dropdown box html code is:
<ul class="select2-results">
<li class="select2-results-dept-0 select2-result select2-result-selectable">
<div class="select2-result-label">No</div>
</li>
<li class="select2-results-dept-0 select2-result select2-result-selectable select2-highlighted">
<div class="select2-result-label">Yes</div>
</li>
</ul>
So I want to access the values of select2-result-label and set them to the select2-chosen content value. I tried doing it, but it's giving me an error in FireBug.
Here's what I did so far... What am I doing wrong?
function testFunc() {
var x = document.getElementsByClassName("select2-chosen");
var y = document.getElementsByClassName("select2-results-dept-0 select2-result select2-result-selectable select2-highlighted")
.getElementsByClassName("select2-result-label");
x[0].innerHTML = y;
}

You are using getElementsByClassName in the wrong context. This function merely returns all elements that have any of the specified class names.
As select2-highlighted is only assigned to a selected element, it's the only class you should care about. Making these changes should help:
function testFunc() {
var x = document.getElementsByClassName("select2-chosen");
var y = document.getElementsByClassName("select2-highlighted")[0].getElementsByClassName("select2-result-label");
x[0].innerHTML = y[0].innerHTML;
}

It should work with
x[0].innerHTML = y[0].innerHTML;
But why did you make it so f=difficult for yourself? Why didn't you use radio buttons, for instance? And why didn't you use id's?

EDIT
replace
"var y = document.get..."
with
"var y = document.getElementsByClassName("select2-results-dept-0 select2-result select2-result-selectable select2-highlighted")[0].children[0].innerHTML;"
=========================================================================
Try something like this to make use of radio buttons, as Sylvia suggested:
window.setAnswer = function(dom) {
var els = document.getElementsByTagName('input');
for (el in els)
{
if (els[el].checked)
{
document.getElementsByTagName('h1')[0].innerHTML = els[el].nextSibling.nodeValue;
break;
}
}
}
<input type="radio" name="radio" onclick="setAnswer()">Yes</input><br>
<input type="radio" name="radio" onclick="setAnswer()">No</input><br>
<h1></h1>

Assigning checkbox values to variables

I've got a list of possible checkboxes and the user can select up to three options. What I'm struggling with is how to recognize which boxes are checked, and then assign them to variables (to send in a later ajax call). So far the code I've written seems to just take the first three checkbox values regardless of whether they are checked or not and use those in my ajax call. Please help me figure out where I've gone wrong.
Here's my HTML:
<ul id="Names" class="stateNames">
<li>Alabama
<ul class="airports">
<li><input type="checkbox" class="destination"/> Birmingham, AL</li>
<li><input type="checkbox" class="destination"/> Huntsville, AL</li>
</ul>
<li>Alaska
<ul class="airports">
<li><input type="checkbox" class="destination"/> Anchorage, AK</li>
<li><input type="checkbox" class="destination"/> Fairbanks, AK</li>
<li><input type="checkbox" class="destination"/> Juneau, AK</li>
</ul>
</li>
</ul>
<input type="button" onclick="clickHandler()" value="Submit" />
Here's my javascript/jquery:
function clickHandler() {
endLocDest1 = "";
endLocDest2 = "";
endLocDest3 = "";
for(i = 0; i < document.getElementsByClassName('destination').length; i++) {
if (document.getElementsByClassName('destination')[i].checked) {
endLocDest1 = document.getElementsByClassName('destination')[0].value;
endLocDest2 = document.getElementsByClassName('destination')[1].value;
endLocDest3 = document.getElementsByClassName('destination')[2].value;
}
alert(endLocDest1 + endLocDest2 + endLocDest3);
};
}
I've also put this code into a fiddle http://jsfiddle.net/6ywm1n6h/3/ (which currently doesn't return anything).
Thanks in advance!

In your jsfiddle, you had jQuery turned on, assuming that, try using ...
$(".destination:checked")
Which will return all checked; you can use this as an array and determine which are clicked.
EDIT:
You can assign this to a variable, say ...
var checked_values = $(".destination:checked");
... then loop through and do what you need.
for (var i=0,len=checked_values.length; i<len; i++) {
console.log(checked_values[i].attr("id"));
}

If your code is wrapped in <form> and </form> then checked inputs will be sent automatically when form is submitted (normaly or AJAX'ed). Your mistake is that you do not set names nor values to your checkboxes. Try:
<input type="checkbox" name="airport[alabama][]" value="Birmingham">
<input type="checkbox" name="airport[alabama][]" value="Huntsville">
<input type="checkbox" name="airport[alaska][]" value="Anchorage">
<input type="checkbox" name="airport[alaska][]" value="Fairbanks">
and see print_r($_POST) or print_r($_GET) (depending on your form method) in page which receives form submission.

copy label text to input

I have tried several ways to achieve this, but somehow nothing works for this.
How can I copy the "label text" of respective Radio Button, which is selected by user into the input field (Result Box) in real time?
HTML -
<ul class="gfield_radio" id="input_4_4">
Radio Buttons:
<br />
<li class="gchoice_4_0">
<input name="input_4" type="radio" value="2" id="choice_4_0" class="radio_s" tabindex="4">
<label for="choice_4_0">Hi</label>
</li>
<li class="gchoice_4_1">
<input name="input_4" type="radio" value="4" id="choice_4_1" class="radio_s" tabindex="5">
<label for="choice_4_1">Hello</label>
</li>
<li class="gchoice_4_2">
<input name="input_4" type="radio" value="3" id="choice_4_2" class="radio_s" tabindex="6">
<label for="choice_4_2">Aloha</label>
</li>
</ul>
<br />
<div class="ginput_container">
Result Box:
<br />
<input name="input_3" id="input_4_3" type="text" value="" class="medium" tabindex="3">
</div>
My attempts:
$('input').change(function() {
if (this.checked) {
var response = $('label[for="' + this.id + '"]').html();
alert(response);
}
// also this:
// if ($("input[type='radio'].radio_s").is(':checked')) {
// var card_type = $("input[type='radio'].radio_s:checked").val();
// alert('card_type');
// }
});

You need to traverse the DOM from the radio which was clicked to find the nearest label element.
$('.radio_s').change(function() {
$('#input_4_3').val($(this).closest('li').find('label').text());
});
Example fiddle
You could also use $(this).next('label') however, that relies on the position of the label element not changing. My first example means the label can be anywhere within the same li as the radio button and it will work.

Try this:
$('.radio_s').click(function() {
$("#input_4_3").val($("input:checked" ).next().text());
});
Demo: http://jsfiddle.net/WQyEw/3/

This is a slightly tricky question to answer well. The structure of your HTML implies that there may be more than one of these structures on the page. So you may have more than one set of radio buttons with a corresponding checkbox.
I have put some working code into a jsFiddle.
I made one change: all the code you had in your question is now in <div class="container">. You would need as many of these as you had groups of radio buttons and checkboxes.
You can then have jQuery code like this:
$('ul.gfield_radio').on('change', 'input[type="radio"]', function () {
var label = $('label[for="' + this.id + '"]');
$(this).closest('.container').find('input.medium').val(label.text());
});
This code is not tied to the id values in this particular bit of HTML, but would work as many times as necessary throughout the page.

Why to depend on third party library when you can achieve it with plain javascript:
<script>
document.addEventListener('DOMContentLoaded', function () {
var a = document.getElementsByName('input_4');
for (var i = 0; i < a.length; i++) {
document.getElementsByName('input_4')[i].addEventListener('change', function () {
showValue(this);
}, false);
}
}, false);
function showValue(element) {
alert(element.parentNode.getElementsByTagName('label')[0].innerHTML)
}
</script>

How to loop over nested input forms with jquery

I have the following html form, which is generated dynamically:
<ul class="precursorList">
<li>
Precursor Name: <input name="precursorName" type="text">
<ul class="portList">
<li>Portname of precursor: <input name="precursorPort" type="text">
Portname of this: <input name="thisPort" type="text">
</li>
</ul>
</li>
<li>
<li>
Precursor Name: <input name="precursorName" type="text">
<ul class="portList">
<li>Portname of precursor: <input name="precursorPort" type="text">
Portname of this: <input name="thisPort" type="text">
</li>
</ul>
</li>
<li>
</ul>
I want to get the values using jquery, therefore I have defined this loop:
ports = [];
$(".precursorList :input").each(function() {
if(this.name == "precursorName") {
var precursorName_ = this.value
$(".portList :input ").each(function() {
if(this.name == "precursorPort") {
precursorPort_ = this.value;
} else if(this.name == "thisPort") {
ports.push({
filterName : precursorName_,
portNameOfFilter : precursorPort_,
portNameOfThis : this.value
});
}
});
}
});
Unfortunately this function does not work like I want it to work. The following loop $(".portList :input ").each( will always only loop over all elements in portList in the html document. How can I achieve that this loop will only loop over the corresponding portList, for each precursor?
UPDATE: The structure of the html element will stay the same only, the number of inputs will change. But there will only be a portList if a PrecursorElement exist.

id must be a unique field, instead use class to select multiple elements. Also use .live() for dynamically added elements.
EDIT:
If you are using Jquery > 1.7 use .on() instead of .live().
I tried following and it seems that its working
$(".precursorPort").each(function() {
temp = this.name;
$(this).parents(".portList").each(function() {
$(this).parents(".precursorList").each(function() {
alert(temp);
// use temp var and save it in ports
});
});
});
Check this fiddle : http://jsfiddle.net/Ajinkya_Parakh/DR233/
It may not be the best/most efficient but it is one of the working alternative.

An id must be unique in a document. If you want to create a group of similar things, then use a class instead.

I'd do something like this:
<ul id="precursorList">
<li>
Precursor Name1: <input class="precursor" name="precursorName1" id="precursorName1" type="text">
<ul id="portList1">
<li>Portname of precursor1: <input class="precursorPort" name="precursorPort1" id="precursorPort1" type="text">
Portname of this1: <input class="thisPort" name="thisPort1" id="thisPort1" type="text">
</li>
</ul>
</li>
<li>
Precursor Name2: <input class="precursor" name="precursorName2" id="precursorName2" type="text">
<ul id="portList2">
<li>Portname of precursor2 <input class="precursorPort" name="precursorPort2" id="precursorPort2" type="text">
Portname of this2: <input class="thisPort" name="thisPort2" id="thisPort2" type="text">
</li>
</ul>
</li>
</ul>
and then:
ports = [];
$("#precursorList > li").each(function()
{
precursor = $(this).find(".precursor")[0];
precursorPort = $(this).find(".precursorPort")[0];
thisPort = $(this).find(".thisPort")[0];
ports.push({filterName: precursor.value, portNameOfFilter: precursorPort.value, portNameOfThis: thisPort.value});
});

Step back a minute, I think you're overthinking this a bit.
Wrap your dynamic form in <form> tags. Then do a $('form').serialize() No need for crazy loops. Serialize is essentially a built-in, one line version of what you're already trying to do. Of course, serialize works on names so you'll have to have distinct ones (even if it's just name1, name2,etc) ID's must be unique too, so either fix that or drop them.
Simplicity always trumps crazy technical genius.
Fiddle for proof