PDA

View Full Version : Create Options Dropdown from Text File



LupNo
11-16-2010, 01:48 PM
I have a simple dropdown form I would like to populate with the contents of a simple text file via javascript/jquery. Most solutions I've read either involve .php or are on .asp net forums and really can't be adapted because they're either way over what I'm trying to accomplish (chained selects) or rely on a server side language.

I have a couple simple text files:

colors.txt that reads like:
red
green
blue
pink
etc....

sizes.txt that reads like:
small
medium
large
etc....

I have a plain old HTML page with two forms (this is really stripped down for example purposes):



<form id="someform">
<select name="colors">
<option value="">...</option>
<option value="">...</option>
etc.
</select>

<select name="sizes">
<option value="">...</option>
<option value="">...</option>
etc.
</select>
</form>

I'd like to be able to read those plain text files into the option values with javascript/jquery rather than hard coding them. As much as I've looked, I can't find anything that simple. Is there a problem doing it this way, or do I need some other helper application to assist?

My apologies, but I did search the forum and could not find an answer with the search words I used.

Any assistance is greatly appreciated. I've been scouring forums for a couple days with no joy.

Nile
11-17-2010, 01:56 AM
Hmm - I dont suggest this. But if you really needed to do this, I would take a look at some file_get_contents functions for javascript, such as:
http://phpjs.org/functions/file_get_contents:400 or http://forums.tizag.com/showthread.php?t=3496

I'm assuming the rest would be easier, you could use something like split() - http://www.w3schools.com/jsref/jsref_split.asp.

Good luck!

LupNo
11-17-2010, 03:07 PM
@Nile

Not sure what you mean by I shouldn't do this. Is this a terrible idea? I thought it made sense to have a couple easily updated text files that could be called wherever, or not, and then piped through via javascript. To me, it's as simple as document write, with a wrapper of <option value="$value">$value</option> but it needs to read the file, first.

Reading the file and writing the wrapper is what I can't totally put together, because I really don't know the simplest way to do it. I would think it's a fairly common idea, though.

Nile
11-18-2010, 10:46 PM
I read somewhere that it was a bad idea and I've stuck by that (lol). But still - using javascript to do a task like this is not something I would recommend. If your server does support PHP, I would use it - and I'm assuming it does (because of your $value variable). I read above that you really don't want to use PHP because it's a chain selection - can you tell me exactly what you're trying to do?

Thanks

LupNo
11-19-2010, 12:08 PM
I read somewhere that it was a bad idea and I've stuck by that (lol). But still - using javascript to do a task like this is not something I would recommend. If your server does support PHP, I would use it - and I'm assuming it does (because of your $value variable). I read above that you really don't want to use PHP because it's a chain selection - can you tell me exactly what you're trying to do?

Thanks
This is an HTML page that uses SSI (Perl) in places. While I could easily write a little routine to read the text file in Perl and write it line-by-line wrapped as so <option value="$value">$value</option> and make it another SSI include, I wanted to just call a javascript to do it. I can't turn around and make these PHP pages, is the problem. There are too many conflicts.

So far, I haven't found a solution despite searching numerous forums. It seems like it would be so easy: read a text file line by line, do a document write line by line using each line's "value" to propagate a drop down box. (This is not a chained select. Just a couple different drop-down boxes.) That's as fancy as I'm trying to get, which isn't very fancy, I admit.

Nile
11-19-2010, 12:46 PM
If you use the open() function, split() function, and foreach statement, you shouldn't have to write line by line. For split, split by \n.

vwphillips
11-19-2010, 02:33 PM
the text file


red green blue pink

example


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
</head>

<body>

<select id="tst" ></select>

<script type="text/javascript">
/*<![CDATA[*/

function Populate(id,txt){
this.obj=document.getElementById(id);
this.ajax(txt);
}

Populate.prototype={

populate:function(txt){
txt=txt.split(' ');
for (var z0=0;z0<txt.length;z0++){
if (txt[z0]){
this.obj[this.obj.options.length]=new Option(txt[z0],txt[z0]);
}
}

},

ajax:function(url){
var txt=false,oop=this;
if (window.ActiveXObject){
try {
txt=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try {
txt=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
}
}
}
else if (window.XMLHttpRequest){
txt=new XMLHttpRequest();
}
else {
return false;
}
txt.onreadystatechange=function(){
if (txt.readyState==4&&(txt.status==200||window.location.href.indexOf("http")==-1)){
oop.populate(txt.responseText);
}
}
txt.open('GET',url+'?'+new Date().getTime(),true);
try {
txt.send(null);
}
catch (e){
}
}

}

new Populate('tst','colors.txt');
/*]]>*/
</script>

</body>

</html>

LupNo
11-19-2010, 02:53 PM
Thanks, and that sounds logical. Do you know of any examples? I haven't found any that don't deal with XML files or jQuery, and most of those are chained selects. I'm looking for something a lot more vanilla.

Nile
11-19-2010, 09:25 PM
Does Vic's code satisfy your needs? If not, I'll try to make a Perl working code.

LupNo
11-20-2010, 03:14 PM
the text file


red green blue pink

example


populate:function(txt){
//txt=txt.split(' ');
txt=txt.split('\n');
for (var z0=0;z0<txt.length;z0++){
if (txt[z0]){
this.obj[this.obj.options.length]=new Option(txt[z0],txt[z0]);
}
}

},


I split the text string as ('\n') instead of (' ') because the .txt files are written line-by-line as so.

red
green
blue
royal blue
black

Is there are reason this isn't a document ready function and is written beneath everything else? I'm just curious (and not too bright). If I wanted to pull two separate .txt files for two different select boxes, each with their own select ID, somehow I need to make this a reusable function.

LupNo
11-20-2010, 03:27 PM
Does Vic's code satisfy your needs? If not, I'll try to make a Perl working code.

Thanks for the offer, but this would be far easier for me to do in Perl than javascript. Unfortunately, this is a place I think javascript/jQuery would be the simplest, since the .txt files change from time to time, and I don't want to have to read them into Perl if I don't have to. I'm trying to pare this mess down.

Hawk1e
02-03-2013, 03:17 PM
Hi guys,

I know that this is an old thread, but this is exactly the script I've been looking for.

I wanted to ask, is there any way to load this (or something similar) in the <Head> and have it populate many <select id="?"> in one page, without loading the script for each dropdown list?