I'm having a couple minor issues with a longgg piece of code...

Discussion in 'JavaScript' started by johnd3445, Apr 8, 2008.

  1. #1
    Hi everyone..

    I'm going to post some code from a page I'm working on. It has alot of different features. It's a page to customize an artist's print with size, frame, canvas and color choices... All option fields are dynamically adjusted for the appropriate choices..

    I've found two issues that I'm not exactly sure how to address, and I was hoping that someone might be able to help.. It's probably something REALLY stupid that I'm overlooking because I've been staring at this stuff for too long.

    PROBLEM #1:
    I have four functions that change my titles when selections are made in my option fields. Three of the four work. changeSizeTitle(); changePrintTitle(); and changeColorTitle();... For some reason my function changeFrameTitle(); is returning "undefined" instead of the proper titles. I've compared the code for this function with the other three that are functioning properly, and I can't see any difference. I'm stumped as to why this function is returning a value of "undefined"... Any ideas... advice appreciated.

    PROBLEM #2:
    This one seems a little more complex, but maybe its actually very simple.. Anyway, what I'm trying to achieve, is, for example, lets say a size of 24"x30" is chosen, and then a Textured Print is chosen... This would result in a $40 additional charge... Now, lets say the customer goes and changes his size to 8"x10"... the charge is only an additional $20 for a Textured Print.. I could have the print field cleared and reset when the size field is changed... But, I think that could get annoying to some customers... Everytime they want to change a size to see what it would look like, they'd have to go back and reselect the textured print at the right price... My question is this: Is it possible to just swap out the value of an option field, but still keep it as the selected option? You can see the code in the function selectPrint(); . I have functions that remove or add options to a field.. Is is possible to alter those scripts a little bit to just swap out an option instead of clear or add them? ... Anyway, any help with this issue as well would be greatly appreciated.

    Thanks to everyone in advance for taking the time to read this post and/or possibly helping me out with some ideas...

    -John


    Okay, my code is too long, ill cut out some of the code that doesn't apply to the questions I have..

    
    <script language="javascript">
    <!--
    
    ////////////////////////////////////////////////////////////////////////////////////////////  PRINT
    
    function changePrint(){
    
    
    if(document.drop_list.Print.value == 'NaN')
    {
    removeAllOptions(document.drop_list.Frame);
    addOption(document.drop_list.Frame,"NaN", "----------------");
    addOption(document.drop_list.Frame,"NaN", "Please Select a Picture Type First");
    
    removeAllOptions(document.drop_list.Color);
    addOption(document.drop_list.Color,"NaN", "----------------");
    addOption(document.drop_list.Color,"NaN", "Please Select a Picture Type First");
    }
    
    
    if(document.drop_list.Print.value == 'print')
    {
    	if(document.drop_list.Print.options.length == '5')
    	{
    	removeSelect(document.drop_list.Print);
    
    	removeAllOptions(document.drop_list.Frame);
    	addOption(document.drop_list.Frame, "NaN", "Select Frame Style:");
    	addOption(document.drop_list.Frame, "NaN", "----------------");
    	addOption(document.drop_list.Frame,"economy", "Economy Series (Included in Price)");
    	addOption(document.drop_list.Frame,"classic +5.00", "Classic Series (Add $5.00)");
    	addOption(document.drop_list.Frame,"oak +5.00", "Oak Series (Add $5.00)");
    	addOption(document.drop_list.Frame,"architect +5.00", "Architect Series (Add $5.00)");
    	addOption(document.drop_list.Frame,"homestyle +10.00", "Homestyle Series (Add $10.00)");
    	addOption(document.drop_list.Frame,"corporate +10.00", "Corporate Series (Add $10.00)");
    	addOption(document.drop_list.Frame,"clean cut +10.00", "Clean Cut Series (Add $10.00)");
    	addOption(document.drop_list.Frame,"rustic II +20.00", "Rustic II Series (Add $20.00)");
    
    	removeAllOptions(document.drop_list.Color);
    	addOption(document.drop_list.Color,"NaN", "----------------");
    	addOption(document.drop_list.Color,"NaN", "Please Select a Frame First");
    	}
    document.main.src = "../pics/8001.jpg"
    }
    
    
    if(document.drop_list.Print.value == 'textured +20.00' || document.drop_list.Print.value == 'textured +30.00' || document.drop_list.Print.value == 'textured +40.00')
    {
    	if(document.drop_list.Print.options.length == '5')
    	{
    	removeSelect(document.drop_list.Print);
    
    	removeAllOptions(document.drop_list.Frame);
    	addOption(document.drop_list.Frame, "NaN", "Select Frame Style:");
    	addOption(document.drop_list.Frame, "NaN", "----------------");
    	addOption(document.drop_list.Frame,"economy", "Economy Series (Included in Price)");
    	addOption(document.drop_list.Frame,"classic +5.00", "Classic Series (Add $5.00)");
    	addOption(document.drop_list.Frame,"oak +5.00", "Oak Series (Add $5.00)");
    	addOption(document.drop_list.Frame,"architect +5.00", "Architect Series (Add $5.00)");
    	addOption(document.drop_list.Frame,"homestyle +10.00", "Homestyle Series (Add $10.00)");
    	addOption(document.drop_list.Frame,"corporate +10.00", "Corporate Series (Add $10.00)");
    	addOption(document.drop_list.Frame,"clean cut +10.00", "Clean Cut Series (Add $10.00)");
    	addOption(document.drop_list.Frame,"rustic II +20.00", "Rustic II Series (Add $20.00)");
    
    	removeAllOptions(document.drop_list.Color);
    	addOption(document.drop_list.Color,"NaN", "----------------");
    	addOption(document.drop_list.Color,"NaN", "Please Select a Frame First");
    	}
    document.main.src = "../pics/8001t.jpg"
    }
    
    
    if(document.drop_list.Print.value == 'painting +50.00' || document.drop_list.Print.value == 'painting +75.00' || document.drop_list.Print.value == 'painting +100.00')
    {
    	if(document.drop_list.Print.options.length == '5')
    	{
    	removeSelect(document.drop_list.Print);
    
    	removeAllOptions(document.drop_list.Frame);
    	addOption(document.drop_list.Frame, "NaN", "Select Frame Style:");
    	addOption(document.drop_list.Frame, "NaN", "----------------");
    	addOption(document.drop_list.Frame,"economy", "Economy Series (Included in Price)");
    	addOption(document.drop_list.Frame,"classic +5.00", "Classic Series (Add $5.00)");
    	addOption(document.drop_list.Frame,"oak +5.00", "Oak Series (Add $5.00)");
    	addOption(document.drop_list.Frame,"architect +5.00", "Architect Series (Add $5.00)");
    	addOption(document.drop_list.Frame,"homestyle +10.00", "Homestyle Series (Add $10.00)");
    	addOption(document.drop_list.Frame,"corporate +10.00", "Corporate Series (Add $10.00)");
    	addOption(document.drop_list.Frame,"clean cut +10.00", "Clean Cut Series (Add $10.00)");
    	addOption(document.drop_list.Frame,"rustic II +20.00", "Rustic II Series (Add $20.00)");
    
    	removeAllOptions(document.drop_list.Color);
    	addOption(document.drop_list.Color,"NaN", "----------------");
    	addOption(document.drop_list.Color,"NaN", "Please Select a Frame First");
    	}
    document.main.src = "../pics/8001p.jpg"
    }
    }
    
    
    ////////////////////////////////////////////////////////////////////////////////////////////  CHANGE FRAME TITLE
    
    
    var frameFirst = new Array( 
    '', 
    '', 
    'Economy Series',
    'Classic Series',
    'Oak Series',
    'Architect Series',
    'Homestyle Series',
    'Corporate Series',
    'Clean Cut Series',
    'Rustic II Series'); 
    
    var frameSecond = new Array( 
    'Economy Series',
    'Classic Series',
    'Oak Series',
    'Architect Series',
    'Homestyle Series',
    'Corporate Series',
    'Clean Cut Series',
    'Rustic II Series'); 
    
    function changeFrameTitle(elemid){
    
    if(document.drop_list.Frame.value == 'NaN')
    {
    var ind = document.getElementById(elemid).selectedIndex; 
    document.getElementById("frameTitle").innerHTML=frameFirst[ind]; 
    document.getElementById("profileTitle").innerHTML=frameFirst[ind]; 
    } 
    
    else
    {
    var ind = document.getElementById(elemid).selectedIndex; 
    document.getElementById("frameTitle").innerHTML=frameSecond[ind]; 
    document.getElementById("profileTitle").innerHTML=frameFirst[ind]; 
    } 
    }
    
    
    ////////////////////////////////////////////////////////////////////////////////////////////  FRAME
    
    function changeFrame(){
    
    
    if(document.drop_list.Frame.value == 'NaN')
    {
    addOption(document.drop_list.Color, "", "----------------");
    addOption(document.drop_list.Color,"", "Please Select a Frame Style First");
    }
    
    if(document.drop_list.Frame.value == 'economy')
    {
    	if(document.drop_list.Frame.options.length == '10')
    	{
    	removeSelect(document.drop_list.Frame);
    	}
    removeAllOptions(document.drop_list.Color);
    addOption(document.drop_list.Color, "NaN", "Select Frame Color:");
    addOption(document.drop_list.Color, "NaN", "----------------");
    addOption(document.drop_list.Color,"honey", "Honey");
    addOption(document.drop_list.Color,"dark green", "Dark Green");
    addOption(document.drop_list.Color,"black", "Black");
    addOption(document.drop_list.Color,"cherry", "Cherry");
    addOption(document.drop_list.Color,"grey", "Grey");
    addOption(document.drop_list.Color,"white-wash", "White-Wash");
    
    document.frame.src = "../frames/economyhoney.gif"
    document.profile.src = "../frames/economy.jpg"
    }
    
    
    if(document.drop_list.Frame.value == 'classic +5.00')
    {
    	if(document.drop_list.Frame.options.length == '10')
    	{
    	removeSelect(document.drop_list.Frame);
    	}
    removeAllOptions(document.drop_list.Color);
    addOption(document.drop_list.Color, "NaN", "Select Frame Color:");
    addOption(document.drop_list.Color, "NaN", "----------------");
    addOption(document.drop_list.Color,"cherry", "Cherry");
    addOption(document.drop_list.Color,"walnut", "Walnut");
    addOption(document.drop_list.Color,"black", "Black");
    
    document.frame.src = "../frames/classiccherry.gif"
    document.profile.src = "../frames/classic.jpg"
    }
    
    
    if(document.drop_list.Frame.value == 'oak +5.00')
    {
    	if(document.drop_list.Frame.options.length == '10')
    	{
    	removeSelect(document.drop_list.Frame);
    	}
    removeAllOptions(document.drop_list.Color);
    addOption(document.drop_list.Color, "NaN", "Select Frame Color:");
    addOption(document.drop_list.Color, "NaN", "----------------");
    addOption(document.drop_list.Color,"honey", "Honey");
    addOption(document.drop_list.Color,"natural", "Natural");
    addOption(document.drop_list.Color,"cherry", "Cherry");
    
    document.frame.src = "../frames/oakhoney.gif"
    document.profile.src = "../frames/oak.jpg"
    }
    
    
    if(document.drop_list.Frame.value == 'architect +5.00')
    {
    	if(document.drop_list.Frame.options.length == '10')
    	{
    	removeSelect(document.drop_list.Frame);
    	}
    removeAllOptions(document.drop_list.Color);
    addOption(document.drop_list.Color, "NaN", "Select Frame Color:");
    addOption(document.drop_list.Color, "NaN", "----------------");
    addOption(document.drop_list.Color,"honey", "Honey");
    addOption(document.drop_list.Color,"blueberry", "Blueberry");
    addOption(document.drop_list.Color,"red", "Red");
    addOption(document.drop_list.Color,"hunter green", "Hunter Green", "");
    addOption(document.drop_list.Color,"cherry", "Cherry");
    addOption(document.drop_list.Color,"black", "Black");
    addOption(document.drop_list.Color,"natural", "Natural");
    addOption(document.drop_list.Color,"unfinished", "Unfinished");
    
    document.frame.src = "../frames/architecthoney.gif"
    document.profile.src = "../frames/architect.jpg"
    }
    
    
    if(document.drop_list.Frame.value == 'homestyle +10.00')
    {
    	if(document.drop_list.Frame.options.length == '10')
    	{
    	removeSelect(document.drop_list.Frame);
    	}
    removeAllOptions(document.drop_list.Color);
    addOption(document.drop_list.Color, "NaN", "Select Frame Color:");
    addOption(document.drop_list.Color, "NaN", "----------------");
    addOption(document.drop_list.Color,"honey", "Honey");
    addOption(document.drop_list.Color,"black", "Black");
    addOption(document.drop_list.Color,"white-wash", "White-Wash");
    addOption(document.drop_list.Color,"gold", "Gold");
    
    document.frame.src = "../frames/homestylehoney.gif"
    document.profile.src = "../frames/homestyle.jpg"
    }
    
    
    if(document.drop_list.Frame.value == 'corporate +10.00')
    {
    	if(document.drop_list.Frame.options.length == '10')
    	{
    	removeSelect(document.drop_list.Frame);
    	}
    removeAllOptions(document.drop_list.Color);
    addOption(document.drop_list.Color, "NaN", "Select Frame Color:");
    addOption(document.drop_list.Color, "NaN", "----------------");
    addOption(document.drop_list.Color,"classic gold", "Classic Gold");
    addOption(document.drop_list.Color,"classic silver", "Classic Silver");
    addOption(document.drop_list.Color,"black satin", "Black Satin");
    addOption(document.drop_list.Color,"white satin", "White Satin");
    addOption(document.drop_list.Color,"canadian walnut", "Canadian Walnut");
    addOption(document.drop_list.Color,"american maple", "American Maple");
    addOption(document.drop_list.Color,"red mahogany", "Red Mahogany");
    addOption(document.drop_list.Color,"brazilian walnut", "Brazilian Walnut");
    addOption(document.drop_list.Color,"chocolate distressed", "Chocolate Distressed");
    
    document.frame.src = "../frames/corporateclassicgold.gif"
    document.profile.src = "../frames/corporate.jpg"
    }
    
    
    if(document.drop_list.Frame.value == 'clean cut +10.00')
    {
    	if(document.drop_list.Frame.options.length == '10')
    	{
    	removeSelect(document.drop_list.Frame);
    	}
    removeAllOptions(document.drop_list.Color);
    addOption(document.drop_list.Color, "NaN", "Select Frame Color:");
    addOption(document.drop_list.Color, "NaN", "----------------");
    addOption(document.drop_list.Color,"blue", "Blue");
    addOption(document.drop_list.Color,"black", "Black");
    addOption(document.drop_list.Color,"white", "White");
    addOption(document.drop_list.Color,"green", "Green");
    addOption(document.drop_list.Color,"red", "Red");
    
    document.frame.src = "../frames/cleancutblue.gif"
    document.profile.src = "../frames/cleancut.jpg"
    }
    
    
    if(document.drop_list.Frame.value == 'rustic II +20.00')
    {
    	if(document.drop_list.Frame.options.length == '10')
    	{
    	removeSelect(document.drop_list.Frame);
    	}
    removeAllOptions(document.drop_list.Color);
    addOption(document.drop_list.Color, "NaN", "Select Frame Color:");
    addOption(document.drop_list.Color, "NaN", "----------------");
    addOption(document.drop_list.Color,"light brown", "Light Brown");
    addOption(document.drop_list.Color,"dark brown", "Dark Brown");
    addOption(document.drop_list.Color,"black", "Black");
    addOption(document.drop_list.Color,"white", "White");
    addOption(document.drop_list.Color,"dark red", "Dark Red");
    addOption(document.drop_list.Color,"grey", "Grey");
    addOption(document.drop_list.Color,"green", "Green");
    addOption(document.drop_list.Color,"blue", "Blue");
    addOption(document.drop_list.Color,"gold", "Gold");
    
    document.frame.src = "../frames/rustic2lightbrown.gif"
    document.profile.src = "../frames/rustic2.jpg"
    }
    }
    
    </script>
    
    <html>
    <head>
    <meta name="GENERATOR" content="Microsoft FrontPage 5.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>8001</title>
    <script language="javascript" src="list.js"></script>
    <link rel=stylesheet type='text/css' href='style4.css'>
    </head>
    
    <body onload="fillSize();">
    
    <table cellpadding=7 cellspacing=7 border=1 align=center>
    
    	<tr valign=center align=center>
    
    		<td width="820" height="309" valign=center colspan=2>
    
    <style type="text/css">
    <!--
    .main{width:250px}
    .position8x10{position:absolute;top:150px;left:380px}
    .position8x12{position:absolute;top:150px;left:372px}
    .position10x20{position:absolute;top:142px;left:340px}
    .position12x16{position:absolute;top:135px;left:356px}
    .position12x18{position:absolute;top:135px;left:348px}
    .position14x18{position:absolute;top:127px;left:348px}
    .position16x20{position:absolute;top:120px;left:340px}
    .position18x24{position:absolute;top:112px;left:324px}
    .position20x24{position:absolute;top:105px;left:324px}
    .position20x30{position:absolute;top:105px;left:300px}
    .position24x30{position:absolute;top:90px;left:300px}
    .size{position:absolute;top:30px;left:380px;font-size:medium}
    .print{position:absolute;top:50px;left:350px;font-size:medium}
    -->
    </style>
    
    		<div class="size" name="sizetitle" id="sizeTitle">&nbsp;
    		</div>
    		<div class="print" name="printtitle" id="printTitle">&nbsp;
    		</div> 
    		<div class="economy" name="frametitle" id="frameTitle">&nbsp;
    		</div> 
    		<div class="honey" name="colortitle" id="colorTitle">&nbsp;
    		</div> 
    
    		<div class="main">
    		<img class="position24x30" name="main" src="../pics/blankmain.gif" width="240" height="180">
    		<img class="position24x30" name="frame" src="../frames/blankframe.gif" width="240" height="180">
    		</div>
    
    		</td>
    	</tr>
    
    	<tr valign=center align=center>
    		
    		<td height="180" valign=center>
    
    <table>
    
    <FORM name="drop_list" action="https://www.paypal.com/cgi-bin/webscr" method="POST" onsubmit="this.target = 'paypal';ReadForm (this);">
    
    <input type="hidden" name="cmd" value="_cart" />
    <input type="hidden" name="add" value="1" />
    <input type="hidden" name="business" value="my@email.com" />
    <input type="hidden" name="item_name" value="" />
    <input type="hidden" name="amount" value="" />
    <input type="hidden" name="currency_code" value="USD" />
    <input type="hidden" name="lc" value="US" />
    
    <input type="hidden" name="shipping" value="14.95" />
    
    <input type="hidden" name="baseamt" value="00.00" />
    <input type="hidden" name="basedes" value="8001" />
    
    <input type="hidden" name="on0" value="" />
    <input type="hidden" name="os0" value="" />
    <input type="hidden" name="on1" value="" />
    <input type="hidden" name="os1" value="" />
    <input type="hidden" name="item_number" value="" />
    
    <input type="hidden" name="baseon0" value="" />
    <input type="hidden" name="baseos0" value="" />
    <input type="hidden" name="baseon1" value="" />
    <input type="hidden" name="baseos1" value="" />
    <input type="hidden" name="baseitn" value="" />
    
    
    
    
    <tr>
    <td>
    <b>Size:</b>
    </td>
    
    <td> 
    <SELECT id="Size" NAME="Size" onChange="changeSize();changeSizeTitle('Size');ReadForm(this.form);" style="width:260">
    <Option selected value="NaN">Select Size:</option>
    <Option value="NaN">-------------------</option>
    </SELECT>&nbsp;
    </tr>
    </td>
    
    <tr>
    <td>
    <b>Print:</b>
    </td>
    
    <td>
    <SELECT id="Print" NAME="Print" onChange="changePrint();changePrintTitle('Print');ReadForm(this.form);" style="width:260">
    <Option selected value="NaN">-------------------</option>
    <Option value="NaN">Please Select a Size First</option>
    </SELECT>
    </tr>
    </td>
    
    <tr>
    <td>
    <b>Frame:</b>
    </td>
    
    <td>
    <SELECT id="Frame" NAME="Frame" onChange="changeFrame();changeFrameTitle('Frame');ReadForm(this.form);" style="width:260">
    <Option selected value="NaN">-------------------</option>
    <Option value="NaN">Please Select a Size First</option>
    </SELECT>
    </tr>
    </td>
    
    <tr>
    <td>
    <b>Color:</b>
    </td>
    
    <td>
    <SELECT id="Color" NAME="Color" onChange="changeColor();changeColorTitle('Color');" style="width:260">
    <Option selected value="NaN">-------------------</option>
    <Option value="NaN">Please Select a Size First</option>
    </SELECT>
    </tr>
    </td>
    
    <tr>
    <td>
    <b>Total:</b>
    </td>
    
    <td>
    <input class="nbor" type="text" name="tot" size="8" value="$.00" />
    <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_cart_SM.gif" border="0" onclick="verify();" width="87" height="23">
    </tr>
    </td>        	
    </table>
    </form>
    
    	</td>
    		<td>
    		<div id="profileTitle">
    		</div> 
            	<img name="profile" src="../frames/blankprofile.gif" width="88" height="109"></center>
            </td>
    		
    	</tr>
    
    	<tr valign=center align=center>
    
    	<td class=extra colspan=3 height="12">
    	<a href='../page1.html' title='Back'><< Back to Gallery >></a>
    	
    	</tr>
    </table>
    
    </body>
    
    
    Code (markup):
     
    johnd3445, Apr 8, 2008 IP