Need to reference outside this script. 1

[GulfImages]

I just learning Javascript from snippets of script here and there and am adapting a cart system I found to my website: I've seperated the areas I have questions on with red. I've tested this script and it works great as is, I just need to change some things dynamically. Thanks in advance for any help.


document.writeln (
'<table>',
'<td class="padit">',
'<img id="imgborder" src="1771.jpg" width="450" height="300" alt="Picture 1771">',

Above, I would like to feed 1771.jpg to the script from each HTML document. I can get around this one if
it's not possible, but I think it may be.

'</td>',
'<td>',

'<br />',
'<form action = "javascript: void 0;"',
' method = "post"',
' onsubmit = "SetDesc (\'Print\');',
' SetWt (3.5);',
' SetCode (\'EPrt\');',
' SetQtyD (2, 15, 5, 20, 10, 25);',

//I would like to get the above function seperated
//from this script so I can adjust these numbers,
//but need it to run at this time.

' SetImg (\'1771thm.jpg\');',

//I need to feed 1771thm.jpg to this function from
//each HTML page.

' SetFixed (0,\'\');',
' SetQT (1);',
' if (ReadForm (this))',
' CallView ();',
' ClearAll ();',
' return false;">',
'Select Print Size: ',


' <select>',
' <option value = "5 x 7 s/n-1771 @10.00">5 x 7 @10.00</option>',
' <option value = "8 x 10 s/n-1771 @15.00">8 x 10 @15.00</option>',
' <option value = "11 x 14 s/n-1771 @25.00">11 x 14 @25.00</option>',
' <option value = "13 x 19 s/n-1771 @40.00">13 x 19 @40.00</option>',
' <option value = "16 x 20 s/n-1771 @60.00">16 x 20 @60.00</option>',
' <option value = "20 x 24 s/n-1771 @80.00">20 x 24 @80.00</option>',
' </select>',
I need to get this entire select statement into a
seperate script so I can change/add to it once,
and all the html pages will be updated

Is all this enough to ask for?.

'<br />','<br />',
'Quantity: ',
' <input type = "text"',
' name = "qty"',
' value = "1"',
' size = "4" />',
'<br />','<br />',
' <input type = "radio"',
' checked = "checked"',
' value = "Without Event Logo"',
' name = "r1" /> Without Event Logo.',
'<br />','<br />',
' <input type = "radio"',
' value = "With Event Logo +2.50"',
' name = "r1" /> With Event Logo. (+2.50 extra)',
'<br />','<br />',
' <input type = "submit"',
' name = "submit"',
' value = "Add to Cart" />',

'&nbsp;',
' <input type = "button" ',
' value = "View Cart"',
' onclick = "CallView ();',
' return false;" />',
'&nbsp;',
' <input type = "button" ',
' value = "Reset Form"',
' onclick = "ClearAll ();',
' this.form.reset();" />',
'<p class="twoul">',
'Quantity Discount (Duplicates of same picture)</p>',
'<p class="two">',
'2-4 = 15% off &nbsp;&nbsp; 5-9 = 20% off',
'&nbsp;', '&nbsp;', '10+ = 25% off',
'</p>',
'</form>',
'</td>',
'</table>');

 

[BillyRayPreachersSon]

To replace the strings within the JS document.write command, you can simply end the string, concatenate your variable, and resume the string again. For example, you could change this:

'<img id="imgborder" src="1771.jpg" width="450" height="300" alt="Picture 1771">',

to this:

'<img id="imgborder" src="' + imageSrc + '" width="450" height="300" alt="Picture 1771">',

So if the JS variable "imageSrc" contained the string "1771.jpg", that would have the same effect as hard-coding it.

It is the same technique you can use for all othe above items where you need to feed different things into the document.write method.

Hope this helps,
Dan

 

[GulfImages]

Thanks Dan, sorry about the multiple thread, I thought it was less confusing to do it this way.

So in my HTML page where I have this:

<script type = "text/javascript" src = "products.js">
</script>

Which contains the the script above, I should add a line such as

<script type = "text/javascript" src = "products.js">
var imageSrc = "1771.jpg"
</script>

Or should it be assigned before this?

I really appreciate your help.

 

[GulfImages]

Okay, I got it so far, I had to make a seperate script statement that assigns the variable, before the one that calls the product.js

When I assign the variables, does it matter if it's done in the head or the body of the HTML, it works both ways but is there a best practice?

 

[BillyRayPreachersSon]

Personally, I would always declare and assign the variable before it is accessed, and put things like this in a SCRIPT tag within the HEAD section.

Dan

 

[GulfImages]

Thanks, that's just what I did. Declared the variables for the file names in the head of the HTML doc. I made a seperate JS file for the variables of the SetQtyD function and it works great, now I can change just that one file.

I'm having trouble getting the select statement worked out. I would like to put it in the seperate JS file so I could change or add options to the list. If I try assigning the entire list to a variable, it doesn't work, I know there is a better way?

 

[GulfImages]

I'm almost there, and I really appreciate the help, I'm learning. This is the last piece of the puzzle.

When I put the script below into a file named productsList.js, then reference the file in my HTML as:

<script type = "text/javascript" src = "productsList.js"></script>

//Contents of productsList.js

document.write (
' <select>',
' <option value = "5 x 7 s/n-1771 @10.00">5 x 7 @10.00</option>',
' <option value = "8 x 10 s/n-1771 @15.00">8 x 10 @15.00</option>',
' <option value = "11 x 14 s/n-1771 @25.00">11 x 14 @25.00</option>',
' <option value = "13 x 19 s/n-1771 @40.00">13 x 19 @40.00</option>',
' <option value = "16 x 20 s/n-1771 @60.00">16 x 20 @60.00</option>',
' <option value = "20 x 24 s/n-1771 @80.00">20 x 24 @80.00</option>',
' </select>');

The select list will show as it should.

What I would like to do is change it to a function that could be inserted in the place that I want the list to be. Problem is, based on everything I'm reading, I can't seem to get the syntax right to make it a function. I am referencing the .js in the head of the HTML but I just can't get the function to work.

I believe to make the above into a function I would write:

function ProdList () {

document.write (
' <select>',
' <option value = "5 x 7 s/n-1771 @10.00">5 x 7 @10.00</option>',
' <option value = "8 x 10 s/n-1771 @15.00">8 x 10 @15.00</option>',
' <option value = "11 x 14 s/n-1771 @25.00">11 x 14 @25.00</option>',
' <option value = "13 x 19 s/n-1771 @40.00">13 x 19 @40.00</option>',
' <option value = "16 x 20 s/n-1771 @60.00">16 x 20 @60.00</option>',
' <option value = "20 x 24 s/n-1771 @80.00">20 x 24 @80.00</option>',
' </select>');
}

Then in my HTML page I would write:

<script type = "text/javascript">
ProdList ();
</script>

Is this not the way to do it? It must not be because it won't work. I know this is probably really basic stuff and I hope it's not too boring. )

Thanks

 

[BillyRayPreachersSon]

It depends when you are calling ProdList. You can only use document.write before the document has finished loading. Using it after that will overwrite the document.

Dan

 

[GulfImages]

I think I could figure it out, IF, I could get the above to work as a seperate function. The page has a header, then the script as posted at the top and a little more HTML text after the document.write. I guess I;m trying to do a document.write within a document.write, maybe that's not possible?

Is there another way to go about this? I need to fill the select list with a predefined list of options (as shown) that can be stored seperatley and can be changed/added to/deleted from.

 

[GulfImages]

Anyone? I'm really in a bind here.

Thanks!

 

[BillyRayPreachersSon]

Is there another way to go about this? I need to fill the select list with a predefined list of options (as shown) that can be stored seperatley and can be changed/added to/deleted from.

Have you checked out the "dynamic listboxes" section of the FAQ pages fo rthis forum?

Dan