Load from .txt File 1

[dakoz]

i have the following script which selects from a drop down list an image name and at the same time makes a preview.

<SCRIPT LANGUAGE=&quot;JavaScript&quot;>
<!--
function imgchange()
{
var si = document.frm.selbox.selectedIndex;
var fname = document.frm.selbox.options[si].value
document.img.src = fname
}
//-->
</SCRIPT>

<FORM name=&quot;frm&quot;>
<SELECT NAME=&quot;selbox&quot; size=1&quot; onchange=imgchange()>
<OPTION VALUE=&quot;

http://abc.com/1.gif&quot;>Image

1 (12/4/2002)
<OPTION VALUE=&quot;

http://abc.com/2.gif&quot;>Image

2 (19/5/2002)
<OPTION VALUE=&quot;

http://abc.com/3.gif&quot;>Image

3 (22/5/2003)
</SELECT>
</FORM>
<IMG SRC=&quot;1.gif&quot; NAME=&quot;img&quot;>

all good until here.


How can make this script load the name and the url from a text file and generate the form above?

the file has the following format

Image 1 -

http://abc.com/1.gif

Image 2 -

http://abc.com/2.gif

Image 3 -

http://abc.com/3.gif

etc.

 

[vbkris]

u cannot do that with javascript. use ASP/PHP.....

Known is handfull, Unknown is worldfull

 

[dakoz]

well i did it with php, but i use it a phpbb forum into a .tpl file which cannot support php. So i look if i can do it with javascript. Any other suggestion?

 

[dwarfthrower]

Is there any reason why your file extension needs to be .TXT?

Why not put that information into a .js file in the format:

var Image_1 = '[URL unfurl="true"]http://abc.com/1.gif';[/URL]
var Image_2 = '[URL unfurl="true"]http://abc.com/2.gif';[/URL]
var Image_3 = '[URL unfurl="true"]http://abc.com/3.gif';[/URL]

link your js file into your HTML page and assign the values to your image as per:

document.getElementById('myImage').src = Image_1;

 

[dakoz]

You mean to include a .js file. Good idea.
i dont want &quot;Image_1&quot; it could be &quot;image 1&quot;

and how will then generate the form? I dont know how many records my .js file has! This will be dynamic could have 3 could have 40



(I dont know much of javascript so if this seems very easy... )

 

[dwarfthrower]

First point, Spaces aren't allowed in javascript variable names.

But to address your issue's I'd suggest maintaining an array containing the information you need about your images like:

var myimages = new Array(
 new Array('Image 1', '[URL unfurl="true"]http://abc.com/1.gif',[/URL] '(12/4/2002)'),
 new Array('Image 2', '[URL unfurl="true"]http://abc.com/2.gif',[/URL] '(19/5/2002)'),
 new Array('Image 3', '[URL unfurl="true"]http://abc.com/3.gif',[/URL] '(22/5/2003)')
);

Then on your page you can use a function to generate the form based on the arrays like this:

// function to draw form based on image array
function drawform(){
 // start of form html
 formHTML = '<form name=&quot;frm&quot;>' +
            '<select name=&quot;selbox&quot; size=&quot;1&quot; onChange=&quot;imgchange(this)&quot;>';
 // create option tag for each element of image array
 for(x=0; x<myimages.length; x++){
  formHTML = formHTML + '<option value=&quot;' + myimages[x][1] + '&quot;>' + myimages[x][0] + ' ' + myimages[x][2];
 }
 //end of form html
 formHTML = formHTML + '</select></form>' + '<img src=&quot;' + myimages[0][1] + '&quot; name=&quot;img&quot;>';
 document.write(formHTML);
}

Since we now call our imgchange() function with a reference to the 'this' object, our image changing code is simpler:

// function to change image source based on select change
function imgchange(obj){ 
 var si =  obj.selectedIndex; 
 var fname = myimages[si][1]; 
 document.getElementById('img').src = fname ;
}

Then wherever you want the form to appear, just call the drawform function as per:

<script>
drawform();
</script>

 

[dakoz]

!! THANK YOU. THIS WAS VERY VERY HELPFULL!!

 

[dakoz]

and something else that came up.

after drawing the table

<script language=&quot;javascript&quot; src=&quot;

http://linux/aus/forum/xml/js/mypics.js&quot;></script>

<script language=&quot;javascript&quot; src=&quot;

http://linux/aus/forum/xml/js/drawform.js&quot;></script>

<script>drawform();</script>

EVERYTHING WORKS FINE AND ALL

i want to make to the following

<a href=&quot;javascript:emoticon('

')&quot;>Link</a>


Inside the

i want according to the users selection to change
ex. the user selects from the drop down the image 1 i want to appear there

..etc

how can i take from the draw.js file this paramater and pass it in this html file?

 

[adam0101]

dwarfthrower,
Actually, variable names can have spaces.
See faq216-3858

Adam
while(woman.width>woman.height && wallet.value>0){beer++;vision.blur()};

 

[dakoz]

thanx man for the info... my main problem at the moment

is that i

want to make to the following

<a href=&quot;javascript:emoticon('

')&quot;>Link</a>


Inside the

i want according to the users selection to change
ex. the user selects from the drop down the image 1 i want to appear there

..etc

how can i take from the draw.js file this paramater and pass it in this html file?

 

[dwarfthrower]

Adam... All due respect mate, but field names can have spaces, variable names cannot. Contrast this:

<input type=&quot;text&quot; id=&quot;my field&quot; value=&quot;field text&quot;>
<script>
alert(document.getElementById('my field').value);
</script>
[b]Output: field text[/b]

With this:

<script>
var my message = 'message text';
alert(my message);
</script>
[b]Output: JavaScript Error ; expected[/b]

 

[dwarfthrower]

Inside the

i want according to the users selection to change
ex. the user selects from the drop down the image 1 i want to appear there

..etc

how can i take from the draw.js file this paramater and pass it in this html file?

Simply modify the javascript above... I presume you want to then be able to copy & paste your code, so why don't we put it into a text field for easy access.

Modified drawform function
[tt]
// function to draw form based on image array
function drawform(){
// start of form html
formHTML = '<form name=&quot;frm&quot;>' +
'<select name=&quot;selbox&quot; size=&quot;1&quot; onChange=&quot;imgchange(this)&quot;>';
// create option tag for each element of image array
for(x=0; x<myimages.length; x++){
formHTML = formHTML + '<option value=&quot;' + myimages[x][1] + '&quot;>' + myimages[x][0] + ' ' + myimages[x][2];
}
//end of form html
formHTML = formHTML + '</select>';

[COLOR=blue]//Add a text field here
formHTML = formHTML + '<input type=&quot;text&quot; id=&quot;text1&quot; value=&quot;';
formHTML = formHTML + '<a href=&quot;javascript:emoticon(\'[img]';
formHTML = formHTML + myimages[0][1] + '\')&quot;>Link</a>';
formHTML = formHTML + '&quot;>';
[/color]
formHTML = formHTML + '</form>' + '<img src=&quot;' + myimages[0][1] + '&quot; name=&quot;img&quot;>';
document.write(formHTML);
}
[/tt]
Then modify the imgchange function to set the value of the text field as well:
[tt]
// function to change image source based on select change
function imgchange(obj){
var si = obj.selectedIndex;
var fname = myimages[si][1];
document.getElementById('img').src = fname ;
//Change text field here
document.getElementByID('text1').value = '<a href=&quot;javascript:emoticon(\'' +
myimages[0][1] + '\')&quot;>Link</a>';

}
[/tt]

 

[adam0101]

dwarfthrower,
As noted in the FAQ I posted earlier, you can have spaces in a variable name by doing this:

window[&quot;my message&quot;] = 'message text';

Adam
while(woman.width>woman.height && wallet.value>0){beer++;vision.blur()};

 

[dakoz]

i want actually just the link to change...
so replaced the input id=&quot;text1&quot; with name=text inside the href... but didnt work...