Develop Reference

Iterating through Array of Objects to fill input fields

I am currently working on a workaround for Google Forms which will be able to store all inputs in cookies so a user can proceed the survey at a different time.
At the moment I am able to store all questions (a Question is a object that contains: id of the surrounding div, required, userinput in a cookie by using JSON.stringify(). I am also able to read and parse the cookie which gets me an array of all question objects.
Now I want to fill all fields or check all radio buttons which have a value.
My problem is, that the inner for loop does only 2 iterations but it should do 18. Do you have any idea what could be wrong?
function restoreInputs() {
// number of stored cookies
var countCookies = 27;
console.log(countCookies);
// iterate through all cookies
for (var i = 1; i < countCookies + 1; i++) {
var cookiename = "answer" + i;
// get content of cookie (is array of objects)
var answer = checkCookie(cookiename);
// iterate through content
for (var j = 0; j < answer.length; j++) {
// get value of object
var val = answer[j].value;
// get the input field (textarea or radio button)
var x = document.getElementById(answer[j].n).getElementsByTagName('input');
// if input is radio, then check the one at position stored in value of object
if (x[j].type === "radio") {
x[val].checked = true;
// if textarea set its value to the one stored in object value
} else {
x[j].value = val;
}
console.log("j: " + j);
}
}
console.log(i);
}

I found the solution. The problem was that I forgot a for loop, since var x = document.getElementById(answer[j].n).getElementsByTagName('input'); may return more than one element. So here is the solution:
function restoreInputs() {
// number of stored cookies
var countCookies = 27;
console.log(countCookies);
// iterate through all cookies
for (var i = 1; i < countCookies + 1; i++) {
var cookiename = "answer" + i;
// get content of cookie (is array of objects)
var answer = checkCookie(cookiename);
// iterate through content
for (var j = 0; j < answer.length; j++) {
// get value of object
var val = answer[j].value;
// get the input field (textarea or radio button)
var x = document.getElementById(answer[j].n).getElementsByTagName('input');
// if input is radio, then check the one at position stored in value of object
for (var k = 0; k < x.length; k++) {
if (x[k].type === "radio") {
x[val].checked = true;
// if textarea set its value to the one stored in object value
} else {
x[k].value = val;
}
}
console.log("j: " + j);
}
}
console.log(i);
}

Looping through and updating the values in a select list

I'm trying to update the options of ALL select lists on a page and implemented a solution found on Get list of all `input` objects using JavaScript, without accessing a `form` object and other pages.
This works to an extent but only the select lists which occur AFTER the one which is triggering the javascript are updated whereas I need them ALL done, regardless of their position relative to the triggering select.
Here's a simplified version of what I have:
function chooseBon(id, value) {
var bonbonsAmount = 12;
var bonbonsCurrent = 0;
var bonbonsCount = 4;
var inputs, index;
// get all the select lists
inputs = document.getElementsByTagName('select');
// loop through all the lists
for (index = 0; index < inputs.length; ++index) {
// First disable all options
for (j = 0; j<=bonbonsAmount; ++j) {
inputs[index].options[j].disabled="disabled";
}
// Then re-enable the ones we still need
for (j = 0; j<=(bonbonsAmount - bonbonsCurrent); ++j) {
inputs[index].options[j].disabled="";
}
// add up the no of chocs selected so we know how many options to re-enabled above
bonbonsCurrent += inputs[index].selectedIndex;
}
I'm an admitted newbie and am adapting a script from one ecommerce platform for another so am hamstrung in certain areas so feel free to make other suggestions.

here is one of possible solutions and the fiddle:
function chooseBon() {
var bonbonsAmount = 12;
var bonbonsCurrent = 0;
var bonbonsRemaining; //max. is bonbonsAmount
var inputs, i, j;
inputs = document.getElementsByTagName('select');
for (i = 0; i < inputs.length; i++) {
bonbonsCurrent += parseInt(inputs[i].value, 10);
}
bonbonsRemaining = bonbonsAmount - bonbonsCurrent;
for (i = 0; i < inputs.length; i++) {
for (j = 0; j <= bonbonsAmount; j++) {
inputs[i].options[j].disabled = (j < bonbonsRemaining + parseInt(inputs[i].value, 10) + 1) ? false : true;
}
}
}

Javascript fill select box

[Code]
$.ajax
({
'method': 'GET',
'source': '/bpv-registratie/periods/show_period_list_by_year.html',
'charge': function ()
{
},
'finish': function (xmlHttp)
{
var options = new Array();
var response = eval('(' + xmlHttp.responseText + ')');
var child = document.createElement('option');
child.setAttribute('value', 'none');
child.setAttribute('checked', 'checked');
child.innerHTML = '&nbsp';
options.push(child);
for (var c = 0; c < response.length; c++)
{
var child = document.createElement('option');
child.setAttribute('value', response.data[c].periode_id);
child.innerHTML = response.data[c].periode_naam +
' (' +
response.data[c].periode_startdatum +
' t/m ' +
response.data[c].periode_einddatum +
' )';
options.push(child);
}
for (var a = 0; a < obj.childNodes.length; a++)
{
var e = obj.childNodes[a].getElementsByTagName("select");
for (var f = 0; f < e.length; f++)
{
e[f].length=0;
for (var o = 0; o < options.length; o++)
{
e[f].appendChild(options[o]);
}
}
alert('test');
}
}
});
[Problem]
Running the code above with the alert, it shows that all the select boxes do get filled with the options I want them to. However as soon as it starts filling the next select box, the previous is being cleared again.
Does anyone know why?
[Situation]
I have a bunch of select boxes generated from about the same code. These represent a class a person can be in. The class should be selected from the selectbox. However if the teacher wishes to change the person to a different period, that would most likely mean that there are different classes available in that period so what I'm trying to do is fill the select boxes with the classes from the new period.

I think your problem is that a single option object can only be in one <select> at a time. Your first trip through the loop fills the first select, then your second trip through the loop moves the options from the first <select> to the second. Rinse and repeat until your final <select> ends up with all the options.
The solution is to create the options when you're about to add them to the <select>. Your first loop should just build an array to hold the values and labels, then expand that simple data to option DOM elements and hand them over to the <select>. This will create a unique set of option objects for each <select>.
Here's a simple example that you can play with to see what's going on:
http://jsfiddle.net/ambiguous/9WuQC/
I'll include the fiddle inline for future reference; the HTML:
<select id="a"></select>
<select id="b"></select>
<button id="c">fill first</button>
<button id="d">fill second</button>
And JavaScript:
var options = [ ];
var option;
for(var i = 0; i < 10; ++i) {
option = document.createElement('option');
option.setAttribute('value', i);
option.innerHTML = i;
options.push(option);
}
$('#c').click(function() {
var s = document.getElementById('a');
for(var i = 0; i < options.length; ++i)
s.appendChild(options[i]);
});
$('#d').click(function() {
var s = document.getElementById('b');
for(var i = 0; i < options.length; ++i)
s.appendChild(options[i]);
});

I'm not sure what obj actually is, but in my mind, this is what is happening (denoted by the comments):
//loop round all the child nodes of obj (not just immediate children)
for (var a = 0; a < obj.childNodes.length; a++)
{
//get all <select> elements under the current child (a) of obj
var e = obj.childNodes[a].getElementsByTagName("select");
//loop round our selects under the current child node
for (var f = 0; f < e.length; f++)
{
e[f].length=0;
for (var o = 0; o < options.length; o++)
{
e[f].appendChild(options[o]);
}
}
alert('test');
}
The comment 'not just immediate' is pertintent here. Say you have a structure
<div id="a">
<div id="b">
<div id="c">
<select id="d"></select>
</div>
</div>
</div>
When you loop through the children of 'a' you get ALL the children, i.e. b,c,d. Next time around your child iteration you are looking at 'b' itself, so you get 'c' and 'd'.
In each of these loops, you populate the select box.
The short answer is that you have probably made a false assumption about the childNodes property.

javascript equivalent of jquery code

Can someone help what's the javascript equivalent of below jquery line.
$("#abc option[value='1']").text();
abc is the id of selectbox

var options = document.getElementById("abc").options;
for (var i = 0, j = options.length; i < j; i++) {
if (options[i].value == "1") {
alert(options[i].text);
}
}
The value and text attributes are available on the HTMLOptionElement per DOM Level 2.
(demo)
UPDATE
Updated demo with combined text, cf. comments:
var options = document.getElementById("abc").options,
text = "";
for (var i = 0, j = options.length; i < j; i++) {
if (options[i].value == "1") {
text += options[i].text;
}
}

This would be 100% equivalent to the selector:
var options = document.getElementById('abc').getElementsByTagName('option'),
text = "";
for(var i = 0, l = options.length; i < l; i++) {
var option = options[i];
if(option.value === '1') {
text += option.text;
}
}
Or if querySelectorAll is available:
var options = document.querySelectorAll('#abc option[value="1"]'),
text = "";
for(var i = 0, l = options.length; i < l; i++) {
text += options[i].text;
}
That said, you can make improvements depending on the HTML structure (e.g. if #abc is the select element etc).

In modern browsers it can be:
var option = document.querySelector('#abc option[value="1"]').textContent

The statement doesn't make sense. It gets the text from an option, and then just throws it away. I assume that you want to do something with the text, like assigning it to a variable.
// A variable for the result
var text = null;
// Get the options from the select element
var options = document.getElementById('abc').options;
// Find the option with the value "1"
for (var i = 0; i < options.length; i++) {
if (options[i].value == '1') {
// Get the text from the option
text = options[i].text;
// Exit from the loop
break;
}
}
Note: The original code would get the text from all options with the specified value, but this code only gets the text from the first option found. Having more than one option with the same value is pretty useless, so that feature of the original code is most likely unintended.

This Will Work.
document.querySelector(".producer option[value='1']").text;

How can I rewrite this without using JQuery library just with JavaScript?

I have a couple of lines of code in JQuery:
var central = $('#townid option:contains("Central")');
if (central.length){
central.insertAfter('select option:first-child');
}
How can I rewrite it without using JQuery library just with JavaScript?

A correct translation would be something like:
var selects = document.getElementsByTagName('select'),
options = document.getElementById('townid').getElementsByTagName('option'),
options = Array.prototype.slice.call(options), //2 lines only for readability
tmp = document.createDocumentFragment();
for(var i = 0, l = options.length; i < l; i++) {
var option = options[i],
text = option.innerText || option.textContent;
if(text.indexOf('Central') > -1) {
tmp.appendChild(option);
}
}
for(var i = 0, l = selects.length; i < l; i++) {
var select = selects[i],
opts = select.getElementsByTagName('option');
if(opts.length > 1) {
select.insertBefore(tmp.cloneNode(true), opts[1]);
}
else {
select.appendChild(tmp.cloneNode(true));
}
}
DEMO
This could be simplified a lot depending on the markup (and optimized depending on the browser (e.g. support for querySelectorAll)). E.g. if you know that there will always only be one option that contains "Central" and whether there exists only one select element or not.
Here is a stripped down version for one select element, known size of the list (i.e. > 1) and only one option that contains Central. So basically just reordering the option:
var options = document.getElementById('townid').getElementsByTagName('option');
for (var i = 0, l = options.length; i < l; i++) {
var option = options[i],
text = option.innerText || option.textContent;
if (text.indexOf('Central') > -1) {
if (i > 1) {
option.parentNode.insertBefore(option, options[1]);
}
break;
}
}
DEMO
Update:
If the option's text should be exactly Central, compare the text normally:
if(text === 'Central')