We Keep Coding

Populating a form with names from a .txt file

I am trying to populate a dropdown list with a bunch of names that are stored in a .txt in the same directory as the HTML code. Each name is on a new line of this file and"names" is the id of the dropdown that will store the names.
Upon loading the page, the list is not populated at all. Any guidance would be awesome.
<script type = "text/javascript">
window.onload = function () {
var select = document.getElementById("names");
var textFile = "/names.txt";
jQuery.get(textFile, function(textFileData) {
var EachLineInTextFile = textFileData.responseText.split(",");
for (var i = 0, len = EachLineInTextFile.length; i < len; i++) {
var option = document.createElement('option');
option.text = option.value = EachLineInTextFile[i];
select.add(option, 0);
};
};
};
</script>
Thanks!

It looks like the major issue was that I needed a better version of jquery. Thank you everyone for your help!
<script type = "text/javascript">
window.onload = function () {
var select = document.getElementById("names");
var textFile = "/names.txt";
jQuery.get(textFile, function(textFileData) {
window.alert(textFileData);
var EachName= textFileData.split("\n");
for (var i = 0, len = EachName.length; i < len; i++) {
var option = document.createElement('option');
option.text = option.value = EachName[i];
select.add(option, 0);
};
});
};
</script>

Use associative Javascript arrays to populate dropdown, then fill text box

I'm new to Javascript (but fairly proficient in php) and I'm trying to use a set of associative arrays to perform two tasks.
First: Populate a dropdown menu (this part is working)
var select = document.getElementById('FName');
var options = fNames;
for(var i = 0; i < (options.length-1); i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
The 'fNames' variable is an array with a list of strings which I've taken from a php array. I have another array, called 'fDesc' which is indexed to match the 'fNames' array. Something like this:
var fNames = ["aName", "bName", "cName"]
var fDesc = ["aDesc", "bDesc,", "cDesc"]
They're currently separate arrays, not a single multidimensional one.
How can I make "aDesc" appear in a text box when "aName" is selected from the pulldown menu?

First of all, the for element is population less elements, you should remove the -1 of (options.length-1)
Then you need to asociate a handler event for select.onchange and use index of to retrieve the index of the array.
HTML:
<select id='FName'></select>
<input id='AName' type='text'/>
JS:
var fNames = ["aName", "bName", "cName"];
var fDesc = ["aDesc", "bDesc,", "cDesc"];
var select = document.getElementById('FName');
var options = fNames;
for(var i = 0; i < (options.length); i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
select.onchange = function(){
var textbox = document.getElementById('AName');
textbox.value = fDesc[fNames.indexOf(select.value)];
}
JsFiddle:
http://jsfiddle.net/dBtUz/

better put aName as text and aDesc as value.
HTML
<select id='FName' onchange='fillText()'></select>
<input id='Fdesc' type='text'/>
Javascript
window.onload = function(){
var fNames = ["aName", "bName", "cName"]
var fDesc = ["aDesc", "bDesc", "cDesc"]
var select = document.getElementById('FName');
for(var i = 0; i < (fNames.length); i++) {
var el = document.createElement("option");
el.textContent = fNames[i];
el.value = fDesc[i];
select.appendChild(el);
}
select.selectedIndex = -1;
}
function fillText(){
document.getElementById('Fdesc').value = document.getElementById('FName').value;
}

You need to search the index of the selected value and then you get with that index the same position in your search array.
Updated Solution also with manual fill:
<script>
document.addEventListener('DOMContentLoaded', onDomContentLoaded);
// data
var fNames = ["aName", "bName", "cName"];
var fDesc = ["aDesc", "bDesc", "cDesc"];
function onDomContentLoaded() {
var mySelect = document.getElementById("mySelect");
fillSelect(mySelect);
mySelect.addEventListener('change', onSelectChange);
}
function fillSelect(mySelect) {
for(var i = 0; i < (fNames.length); i++) {
var opt = fNames[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
mySelect.appendChild(el);
}
}
function onSelectChange(){
var selectedValue = this.options[this.selectedIndex].value;
//console.log('selected value', selectedValue);
var selectedValueIndexInArray = fNames.indexOf(selectedValue);
var fieldOutput = document.getElementById("output");
fieldOutput.innerHTML = fDesc[selectedValueIndexInArray];
}
</script>
<select id="mySelect"></select>
<div id="output"></div>
Working Example
http://jsfiddle.net/x92ka/4/

hr tag in javascript

I am working on phonegap and I am new to it. I want to draw a line using hr under the menu items which are displayed. but unfortunately I am unable to do so.
if somebody can help in this regard. Thanks in advance.
here is the code snippet
{
success:function(res,code) {
entries = [];
var xml = $(res);
var items = xml.find("item");
$.each(items, function(i, v) {
category1.push($(v).find("category").text());
/* $("#status").append("menu_type <b>"+menu_type+"</b><br/>"); */
console.log( "PRICE" + ": " + $(v).find("menu_type").text() );
});
var category = category1.unique();
var select = document.getElementById("selectNumber");
for(var i = 0; i < category.length; i++) {
var el1 = document.createElement("li");
var opt = category[i];
var el = document.createElement("a");
el.textContent = opt;
el.value = opt;
el1.appendChild(el);
select.appendChild(el1);
}
}

Try adding something like this
document.getElementById("ElementBelowWhichHRShouldCome").appendChild(document.createElement('hr'));

Try innerHTML. Here is an example:
http://jsfiddle.net/Wxv6n/
var doc = document;
var get = function(id){return doc.getElementById(id);};
get("foo").innerHTML = '<hr/>';
..and don't forget to cache your references to document

After Every Menu Item,you can use this.Its pretty simple.
$("#menu_item").after('<hr/>');
after() in jquery
DEMO FIDDLE

How to add the muliple date in the combox box

Using Asp.Net and Java Script
from Datatime control i am picking mulitple data which should add the combo box.
Java Script
function closed(cal) {
$("#txtIndividualDays").val("");
var noDays = 0;
var ddlDate = document.getElementById("sIndividualDays");
var opt;
ddlDate.options.length = 0;
MA.length = 0;
var countDays = 0;
for (var i in cal.multiple) {
countDays++;
}
var arrDays = new Array(countDays);
countDays = 0;
if (arrDays.length == 0) {
opt.text = "Select Date";
opt.value = "-1";
$("#txtIndividualDays").val($("#txtIndividualDays").val() + opt.text + ";");
}
for (var i in cal.multiple) {
arrDays[countDays] = i;
countDays++;
}
for (var i in arrDays.sort()) {
var d = cal.multiple[arrDays[i]];
var isWeekend = false;
var isHoliday = false;
if (d) {
var _date;
_date = d.print("%m/%d/%Y");
opt.text = d.print("%m/%d/%Y");
opt.value = d.print("%m/%d/%Y");
MA[MA.length] = d;
document.getElementById("txtIndividualDays").value += opt.text + ";";
}
}
document.getElementById("txtWorkingDays").value = noDays;
var control = $("#sIndividualDays");
var itemCount = $("#sIndividualDays option").length;
cal.hide();
return true;
};
The above script is showing error, while selecting a single date. What wrong in my script.
Need scrip help

I am not sure that these lines are correct:
var opt;
..............
opt.text = "Select Date";
opt.value = "-1";
...........
I suggest you change to: var opt = new Object();

How do I populate a select box automatically with values from a IndexedDB objectStore?

I would like to iterate over a IndexedDB objectStore, get the results and populate this select box.
This is my HTML
<tr>
<td>
<select id="opt" name="opt"></select>
</td>
</tr>
This is my JavaScript
function populateOptions() {
var options = [ "1", "2", "3", "4", "5"];
var opt = document.getElementById("opt");
for (var i = 0; i < options.length; i++) {
var option = document.createElement("option");
option.value = options[i];
var optionText = document.createTextNode(options[i]);
option.appendChild(optionText);
opt.appendChild(option);
}
}
populateOptions();

Try the following:
var dbreq = indexeddb.open("db");
dbreq.onsuccess = function (conn){
var trans = dbreq.result.transaction(["objectstore"]);
var obj = trans.objectStore("objectstore");
var cursor = obj.openCursor();
cursor.onsuccess = function (e) {
if (!cursor.result) {
var opt = document.getElementById("opt");
var option = document.createElement("option");
option.value = cursor.result.value;
var optionText = document.createTextNode(cursor.result.value);
option.appendChild(optionText);
opt.appendChild(option);
cursor["continue"]()
} else {
// cursor ended
}
}
Or use my linq2indexeddb library and do it like this:
var db = linq2indexedDB("db");
db.linq.from("objectstore").select.then(null, null, function(e){
var opt = document.getElementById("opt");
var option = document.createElement("option");
option.value = e.data;
var optionText = document.createTextNode(e.data);
option.appendChild(optionText);
opt.appendChild(option);
});
for more information about indexeddb I can reffer to my blog. Here I frequently post information about the indexedDB API.

In html :
<body onload="load()">
In javascript :
function load(){
populateOptions();
}
or shortly :
<body onload="populateOptions()">