One more: Online Designer?

**jmarcv** · 01-18-2009

Originally Posted by rlhanson

Yes, this is what I am looking for.

The class I want to assign is hiddenPic

Is this a switch like optn2class or ' '? Or is this where I should place 'hiddenPic'?

Code:

$extraclass=($_POST['optn2']>0 ? hiddenPic: '');

Isn't this resulting in prodoptionoptn2class because of the .
or am I not following this?

There is a space. It would end up looking like this:

Code:

<span class="prodoption hiddenPic">

The way that works is the prodoption class loads first, and the hiddenPic class loads second. hiddenPic would have preference.

I thought it was going to be something like:

... code ....
but this doesn't work! LOL

This is similar to your #1 problem
optn2 is a code, like 415. $optionshtml appears to be the dynamic html it is creating and then returns to the calling routine at the end. Why would you do such a comparison? Besides, $thestyle is what? Nothing.

**rlhanson** · 01-18-2009

okay, I have something wrong in my actual page... back to the drawing board. lol

Thanks for all your hard work today!

**rlhanson** · 01-18-2009

Question on using the array to convert it to the db value. Whenever I use a hidden input it doesn't go into the shopping cart information. I don't know why, haven't been able to figure it out, (and would love to use the images as buttons again instead of the radio buttons)!

Here's what I have coded for changing the font style:

Code:

<?php 
$styleconvert=array('courier'=>'443','verdana'=>'444','amazone bt'=>'445','arial'=>'446','times'=>'447','helvetica'=>'448','sans-serif'=>'449');
?>
 
<input type="hidden" name="optn25" value="<?php $styleconvert[$_POST['FontcardTemplate']]?>">
<select name="FontcardTemplate" onchange="document.getElementById('cardTemplate').style.fontFamily=this.options[this.selectedIndex].value;">
                                                <option value="courier">Courier</option>
                                                <option value="verdana">Verdana</option>
                                                <option value="amazone bt">Amazone BT</option>
                                                <option value="arial">Arial</option>
                                                <option value="times">Times</option>
                                                <option value="helvetica">Helvetica</option>
                                                <option value="sans-serif">Sans Serif</option>
                                                <option value="choose" selected="selected">-- Choose Style --</option>
                              </select>

I'm using the font selection to change all text in cardTemplate instead of per line (ex. companyName)....

It's changing the text, but not the value from what I can see...

**jmarcv** · 01-18-2009

FYI - it takes a few reads to understand what you are doing.
This time I failed. I really dont know what EXACTLY it is you are saying or want.
Did you use my print trick to see what actially IS in 'FontcardTemplate' POST? Because if optn25 is empty, I THINK thats what you are saying, then you need to see what is getting padssed. Because the array command looks fine.

Confusing code, because if your select is on the same page, of COURSE it wont work, because nothing has been posted yet. The array stuff needs to be on the page that gets submitted to.

You have to remember, with PHP, stuff gets loaded in order. It is only with JS that you can go backwards.

**rlhanson** · 01-18-2009

Hi John-Marc,

Here's the page I am working on:
Untitled Document

Just below the preview table I have the font selection which will change the font of the entire card based on the select options.
(You can ignore the preview button, I just wanted to learn how to post the info from the designer page to another one.)

When you click on "add to cart" I need the shopping cart to display the font name based on what is in the database.

Similiar to what happens if you select the font on this page:
RL Hanson-Online :: Business Card- Centerbk, Specials

I have managed to pass all the other info by manually assigning the optn# based on the code that from what I gathered loops through and assigns the optn value based on the location on the page (optn0, optn1, optn2).

So, what I am understanding is that this array would have to placed on my cart.php page?

**rlhanson** · 01-19-2009

John-Marc - I got it to work with input buttons vs. a select!

Thanks again for all your help! Sometimes it just helps to talk through the code...

**rlhanson** · 01-19-2009

I am posting the original designer with the js functions (without my db references) as promised as I am going to be removing the page from my site eventually.

Thank you so much for all of your help and especially John-Marc's enduring patience as he tutored me throughout this project!!!!!!

HTML Code:

<table width="600" border="0" align="left" cellpadding="20" cellspacing="0">
                      <tr>
                        <td><form form="form" id="form1" name="form1" action="" method="post">  
                          <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                              <td class="cont_left">&nbsp;</td>
                              <td width="850" rowspan="10" align="center">
                                  <table width="850" border="0" align="right" cellpadding="0" cellspacing="10">
                                    <tr>
                                      <td colspan="7" align="left" valign="top"><strong>Step 2: Customize your Background</strong> &nbsp;&nbsp; </td>
                                    </tr>
                                    <tr>
                                      <td width="100" rowspan="3" align="left" valign="top"><p>
                                          <input name="subject" type="hidden" value="Layout 1" />
                                          <img src="images/pics/backgrounds/thumbnails/3bamboo.jpg" title="Bamboo Hideaway" width="100" height="60" style="cursor:pointer" onclick="document.getElementById('cardTemplate').style.backgroundImage='url(images/pics/backgrounds/3bamboo.jpg)';document.getElementById ('background').value=this.src;"/> <img src="images/pics/backgrounds/thumbnails/9birchlake.jpg" title="Birch and Small Lake" width="100" height="60" style="cursor:pointer" onclick="document.getElementById('cardTemplate').style.backgroundImage='url(images/pics/backgrounds/9birchlake.jpg)';document.getElementById ('background').value=this.src;"/><br />
                                          <img src="images/pics/backgrounds/thumbnails/16Egyptian_Desert.jpg" title="Desert Pyramids" width="100" height="60" style="cursor:pointer" onclick="document.getElementById('cardTemplate').style.backgroundImage='url(images/pics/backgrounds/16Egyptian_Desert.jpg)';document.getElementById ('background').value=this.src;"/>
                                          <input name="noimage" type="radio" tabindex="7" value="transparent" onclick="document.getElementById('cardTemplate').style.backgroundImage='url(../images/sp.gif)'" />
                                        No Image or Uploading Art </p></td>
                                      <td width="74" rowspan="3" align="left" valign="top"><img src="../images/sp.gif" width="15" height="1" /></td>
                                    </tr>
                                    <tr>
                                      <td colspan="3" align="left" valign="top"><table width="310" border="0" align="right" cellpadding="0" cellspacing="10">
                                          <tr>
                                            <td width="80" align="left" valign="top"><img src="../images/sp.gif" width="75" height="1" /><br />
                                              Background Color Mixer: <br />
                                              <div id="colorpicker301" class="colorpicker301"></div></td>
                                            <td width="200" align="left" valign="top"><input type="hidden" name="COLORBkgrd" id="noart" />
                                                <img src="/images/designer/color.jpg" align="absmiddle" title="Choose Color" style="cursor:pointer" onclick="document.getElementById('noart').checked=true;document.getElementById('cardTemplate').style.backgroundImage='url(../images/sp.gif)';showColorGrid3('COLOR','cardTemplate','B')"/>&nbsp;
                                                <input type="text" id="COLORcompanyName" name="COLOR" size="9" />
                                                <br />
                                                <input name="Color_Info" type="checkbox" id="Color_Info" value="checked" />
                                              I understand <strong class="important_bold"><a href="color_info.html" onclick="return GB_showPage('Important Color Information', this.href)">Color Information! </a></strong>(required) <img src="../images/sp.gif" width="200" height="1" /><br />
                                            </td>
                                          </tr>
                                          <tr>
                                            <td width="80" align="left" valign="top"><img src="../images/sp.gif" width="75" height="1" /><br />
                                              Background Color </td>
                                            <td width="200" align="left"><p><img src="../images/sp.gif" width="160" height="1" /><br />
                                                    <input name="background" type="hidden" id="background" />
                                                    <img src="images/rgbblue_sm.jpg" style="cursor:pointer" onclick="document.getElementById('cardTemplate').style.backgroundImage='url(images/rgbblue.jpg)';document.getElementById ('background').value=this.src;" /> <img src="images/yellow_sm.jpg" style="cursor:pointer" onclick="document.getElementById('cardTemplate').style.backgroundImage='url(images/yellow.jpg)';document.getElementById ('background').value=this.src;" /> <img src="images/red_sm.jpg" style="cursor:pointer" onclick="document.getElementById('cardTemplate').style.backgroundImage='url(images/red.jpg)';document.getElementById ('background').value=this.src;" /> <img src="images/purple_sm.jpg" style="cursor:pointer" onclick="document.getElementById('cardTemplate').style.backgroundImage='url(images/purple.jpg)';document.getElementById ('background').value=this.src;" /> <img src="images/cmykgreen_sm.jpg" style="cursor:pointer" onclick="document.getElementById('cardTemplate').style.backgroundImage='url(images/cmykgreen.jpg)';document.getElementById ('background').value=this.src;"/> <img src="images/rgbgreen_sm.jpg" style="cursor:pointer" onclick="document.getElementById('cardTemplate').style.backgroundImage='url(images/rgbgreen.jpg)';document.getElementById ('background').value=this.src;"/></p></td>
                                          </tr>
                                          <tr>
                                            <td colspan="2" align="left" valign="top"><strong>Step 3: Input your Information</strong> - all information is optional. </td>
                                          </tr>
                                          <tr>
                                            <td colspan="2" align="left" valign="top"><table width="300" border="0" align="right" cellpadding="0" cellspacing="0" class="input_table">
                                                <tr>
                                                  <td><table width="300" border="0" align="right" cellpadding="0" cellspacing="10">
                                                      <tr>
                                                        <td width="75" align="left" valign="top">Company Name </td>
                                                        <td width="28">&nbsp;</td>
                                                        <td width="225" align="left" valign="top"><p>
                                                            <input name="company_name" type="text" id="company_name" tabindex="5" onchange="document.getElementById('companyName').innerHTML=this.value;" size="25" maxlength="50" />
                                                            <select name="SIZEcompanyName" onchange="document.getElementById('companyName').style.fontSize=this.options[this.selectedIndex].value;">
                                                              <option value="8pt">8</option>
                                                              <option value="10pt">10</option>
                                                              <option value="12pt">12</option>
                                                              <option value="14pt">14</option>
                                                              <option value="18pt" selected="selected">18</option>
                                                            </select>
                                                            <select name="companyNameColor" tabindex="1" onchange="document.getElementById('companyName').style.color=this.options[this.selectedIndex].value;">
                                                              <option value="blue">Blue</option>
                                                              <option value="red">Red</option>
                                                              <option value="purple">Purple</option>
                                                              <option value="yellow">Yellow</option>
                                                              <option value="orange">Orange</option>
                                                              <option value="white">White</option>
                                                              <option value="green">Green</option>
                                                              <option value="pink">Pink</option>
                                                              <option value="black">Black</option>
                                                              <option selected="selected">Color</option>
                                                            </select>
                                                            <input type="hidden" name="BOLDcompanyName" id="BOLDcompanyName" />
                                                            <img src="../images/designer/bold.jpg" style="cursor:pointer" onclick="document.getElementById('BOLDcompanyName').value=(document.getElementById('BOLDcompanyName').value=='bold' ? 'normal' : 'bold'); document.getElementById('companyName').style.fontWeight=document.getElementById('BOLDcompanyName').value;"/>
                                                            <input type="hidden" name="ITALcompanyName" id="ITALcompanyName" />
                                                            <img src="../images/designer/italic.jpg" style="cursor:pointer" onclick="document.getElementById('ITALcompanyName').value=(document.getElementById('ITALcompanyName').value=='italic' ? 'normal' : 'italic'); document.getElementById('companyName').style.fontStyle=document.getElementById('ITALcompanyName').value;"/></p></td>
                                                      </tr>
                                                      <tr>
                                                        <td width="75" align="left" valign="top">Slogan</td>
                                                        <td width="28">&nbsp;</td>
                                                        <td width="225" align="left" valign="bottom"><input name="slogan" id="slogan" type="text" tabindex="6" size="25" maxlength="100" onchange="document.getElementById('sloganS').innerHTML=this.value;" />
                                                            <select name="SIZEslogan" onchange="document.getElementById('sloganS').style.fontSize=this.options[this.selectedIndex].value;">
                                                              <option value="8pt">8</option>
                                                              <option value="10pt" selected="selected">10</option>
                                                              <option value="12pt">12</option>
                                                              <option value="14pt">14</option>
                                                              <option value="18pt">18</option>
                                                            </select>
                                                            <select name="sloganColor" tabindex="1" onchange="document.getElementById('sloganS').style.color=this.options[this.selectedIndex].value;">
                                                              <option value="blue">Blue</option>
                                                              <option value="red">Red</option>
                                                              <option value="purple">Purple</option>
                                                              <option value="yellow">Yellow</option>
                                                              <option value="orange">Orange</option>
                                                              <option value="white">White</option>
                                                              <option value="green">Green</option>
                                                              <option value="pink">Pink</option>
                                                              <option value="black">Black</option>
                                                              <option selected="selected">Color</option>
                                                            </select>
                                                            <input type="hidden" name="BOLDslogan" id="BOLDslogan" />
                                                            <img src="../images/designer/bold.jpg" style="cursor:pointer" onclick="document.getElementById('BOLDslogan').value=(document.getElementById('BOLDslogan').value=='bold' ? 'normal' : 'bold'); document.getElementById('sloganS').style.fontWeight=document.getElementById('BOLDslogan').value;"/>
                                                            <input type="hidden" name="ITALcslogan" id="ITALslogan" />
                                                            <img src="../images/designer/italic.jpg" style="cursor:pointer" onclick="document.getElementById('ITALslogan').value=(document.getElementById('ITALslogan').value=='italic' ? 'normal' : 'italic'); document.getElementById('sloganS').style.fontStyle=document.getElementById('ITALslogan').value;"/> </td>
                                                      </tr>
                                                      <tr>
                                                        <td width="75" align="left" valign="top">Full Name </td>
                                                        <td width="28">&nbsp;</td>
                                                        <td width="225" align="left" valign="bottom"><input name="name" type="text" id="name" tabindex="7" size="25" maxlength="50" onchange="document.getElementById('nameS').innerHTML=this.value;" />
                                                            <select name="SIZEname" onchange="document.getElementById('nameS').style.fontSize=this.options[this.selectedIndex].value;">
                                                              <option value="8pt">8</option>
                                                              <option value="10pt" selected="selected">10</option>
                                                              <option value="12pt">12</option>
                                                              <option value="14pt">14</option>
                                                              <option value="18pt">18</option>
                                                            </select>
                                                            <select name="nameColor" tabindex="1" onchange="document.getElementById('nameS').style.color=this.options[this.selectedIndex].value;">
                                                              <option value="blue">Blue</option>
                                                              <option value="red">Red</option>
                                                              <option value="purple">Purple</option>
                                                              <option value="yellow">Yellow</option>
                                                              <option value="orange">Orange</option>
                                                              <option value="white">White</option>
                                                              <option value="green">Green</option>
                                                              <option value="pink">Pink</option>
                                                              <option value="black">Black</option>
                                                              <option selected="selected">Color</option>
                                                            </select>
                                                            <input type="hidden" name="BOLDname" id="BOLDname" />
                                                            <img src="../images/designer/bold.jpg" style="cursor:pointer" onclick="document.getElementById('BOLDname').value=(document.getElementById('BOLDname').value=='bold' ? 'normal' : 'bold'); document.getElementById('nameS').style.fontWeight=document.getElementById('BOLDname').value;"/>
                                                            <input type="hidden" name="ITALname" id="ITALname" />
                                                            <img src="../images/designer/italic.jpg" style="cursor:pointer" onclick="document.getElementById('ITALname').value=(document.getElementById('ITALname').value=='italic' ? 'normal' : 'italic'); document.getElementById('nameS').style.fontStyle=document.getElementById('ITALname').value;"/> </td>
                                                      </tr>
                                                      <tr>
                                                        <td width="75" align="left" valign="top">Job Title </td>
                                                        <td width="28">&nbsp;</td>
                                                        <td width="225" align="left"><input name="title" type="text" id="title" tabindex="8" size="25" maxlength="25" onchange="document.getElementById('titleS').innerHTML=this.value;" />
                                                            <br />
                                                            <select name="titleColor" id="titleColor" tabindex="1" onchange="document.getElementById('titleS').style.color=this.options[this.selectedIndex].value;">
                                                              <option value="blue">Blue</option>
                                                              <option value="red">Red</option>
                                                              <option value="purple">Purple</option>
                                                              <option value="yellow">Yellow</option>
                                                              <option value="orange">Orange</option>
                                                              <option value="white">White</option>
                                                              <option value="green">Green</option>
                                                              <option value="pink">Pink</option>
                                                              <option value="black">Black</option>
                                                              <option selected="selected">Color</option>
                                                          </select></td>
                                                      </tr>
                                                      <tr>
                                                        <td width="75" align="left" valign="top">Address - Line 1 </td>
                                                        <td width="28">&nbsp;</td>
                                                        <td width="225" align="left"><input name="address_1" type="text" id="address_1" tabindex="9" size="25" maxlength="100" onchange="document.getElementById('address1S').innerHTML=this.value;" />
                                                            <br />
                                                            <select name="address1Color" id="address1Color" tabindex="1" onchange="document.getElementById('address1S').style.color=this.options[this.selectedIndex].value;">
                                                              <option value="blue">Blue</option>
                                                              <option value="red">Red</option>
                                                              <option value="purple">Purple</option>
                                                              <option value="yellow">Yellow</option>
                                                              <option value="orange">Orange</option>
                                                              <option value="white">White</option>
                                                              <option value="green">Green</option>
                                                              <option value="pink">Pink</option>
                                                              <option value="black">Black</option>
                                                              <option selected="selected">Color</option>
                                                          </select></td>
                                                      </tr>
                                                      <tr>
                                                        <td width="75" align="left" valign="top">Address - Line 2 </td>
                                                        <td width="28">&nbsp;</td>
                                                        <td width="225" align="left"><input name="address_2" type="text" id="address_2" tabindex="10" size="25" maxlength="100" onchange="document.getElementById('address2S').innerHTML=this.value;" />
                                                            <br />
                                                            <select name="address2Color" id="address2Color" tabindex="1" onchange="document.getElementById('address2S').style.color=this.options[this.selectedIndex].value;">
                                                              <option value="blue">Blue</option>
                                                              <option value="red">Red</option>
                                                              <option value="purple">Purple</option>
                                                              <option value="yellow">Yellow</option>
                                                              <option value="orange">Orange</option>
                                                              <option value="white">White</option>
                                                              <option value="green">Green</option>
                                                              <option value="pink">Pink</option>
                                                              <option value="black">Black</option>
                                                              <option selected="selected">Color</option>
                                                          </select></td>
                                                      </tr>
                                                      <tr>
                                                        <td width="75" align="left" valign="top">Telephone</td>
                                                        <td width="28">&nbsp;</td>
                                                        <td width="225" align="left"><input name="phone" type="text" id="phone" tabindex="12" size="25" maxlength="15" onchange="document.getElementById('phoneS').innerHTML=this.value;" />
                                                            <br />
                                                            <select name="phoneColor" id="phoneColor" tabindex="1" onchange="document.getElementById('phoneS').style.color=this.options[this.selectedIndex].value;">
                                                              <option value="blue">Blue</option>
                                                              <option value="red">Red</option>
                                                              <option value="purple">Purple</option>
                                                              <option value="yellow">Yellow</option>
                                                              <option value="orange">Orange</option>
                                                              <option value="white">White</option>
                                                              <option value="green">Green</option>
                                                              <option value="pink">Pink</option>
                                                              <option value="black">Black</option>
                                                              <option selected="selected">Color</option>
                                                          </select></td>
                                                      </tr>
                                                      <tr>
                                                        <td width="75" align="left" valign="top">Cell </td>
                                                        <td width="28">&nbsp;</td>
                                                        <td width="225" align="left"><input name="cell" type="text" id="cell" tabindex="13" size="25" maxlength="15" onchange="document.getElementById('cellS').innerHTML=this.value;" />
                                                            <br />
                                                            <select name="cellColor" id="cellColor" tabindex="1" onchange="document.getElementById('cellS').style.color=this.options[this.selectedIndex].value;">
                                                              <option value="blue">Blue</option>
                                                              <option value="red">Red</option>
                                                              <option value="purple">Purple</option>
                                                              <option value="yellow">Yellow</option>
                                                              <option value="orange">Orange</option>
                                                              <option value="white">White</option>
                                                              <option value="green">Green</option>
                                                              <option value="pink">Pink</option>
                                                              <option value="black">Black</option>
                                                              <option selected="selected">Color</option>
                                                          </select></td>
                                                      </tr>
                                                      <tr>
                                                        <td width="75" align="left" valign="top">e-mail Address </td>
                                                        <td width="28">&nbsp;</td>
                                                        <td width="225" align="left"><input name="email" type="text" id="email" tabindex="15" size="25" maxlength="50" onchange="document.getElementById('emailS').innerHTML=this.value;" />
                                                            <br />
                                                            <select name="emailColor" id="emailColor" tabindex="1" onchange="document.getElementById('emailS').style.color=this.options[this.selectedIndex].value;">
                                                              <option value="blue">Blue</option>
                                                              <option value="red">Red</option>
                                                              <option value="purple">Purple</option>
                                                              <option value="yellow">Yellow</option>
                                                              <option value="orange">Orange</option>
                                                              <option value="white">White</option>
                                                              <option value="green">Green</option>
                                                              <option value="pink">Pink</option>
                                                              <option value="black">Black</option>
                                                              <option selected="selected">Color</option>
                                                          </select></td>
                                                      </tr>
                                                      <tr>
                                                        <td width="75" height="54" align="left" valign="top">Website Address </td>
                                                        <td width="28">&nbsp;</td>
                                                        <td width="225" align="left" valign="bottom"><input name="website" type="text" id="website" tabindex="16" size="25" maxlength="100" onchange="document.getElementById('websiteS').innerHTML=this.value;" />
                                                            <br />
                                                            <select name="websiteColor" id="websiteColor" tabindex="1" onchange="document.getElementById('websiteS').style.color=this.options[this.selectedIndex].value;">
                                                              <option value="blue">Blue</option>
                                                              <option value="red">Red</option>
                                                              <option value="purple">Purple</option>
                                                              <option value="yellow">Yellow</option>
                                                              <option value="orange">Orange</option>
                                                              <option value="white">White</option>
                                                              <option value="green">Green</option>
                                                              <option value="pink">Pink</option>
                                                              <option value="black">Black</option>
                                                              <option selected="selected">Color</option>
                                                            </select>
                                                            <input type="hidden" name="BOLDwebsite" id="BOLDwebsite" />
                                                            <img src="../images/designer/bold.jpg" style="cursor:pointer" onclick="document.getElementById('BOLDname').value=(document.getElementById('BOLDname').value=='bold' ? 'normal' : 'bold'); document.getElementById('websiteS').style.fontWeight=document.getElementById('BOLDname').value;"/>
                                                            <input type="hidden" name="ITALwebsite" id="ITALwebsite" />
                                                            <img src="../images/designer/italic.jpg" style="cursor:pointer" onclick="document.getElementById('ITALname').value=(document.getElementById('ITALname').value=='italic' ? 'normal' : 'italic'); document.getElementById('websiteS').style.fontStyle=document.getElementById('ITALname').value;"/> </td>
                                                      </tr>
                                                      <tr>
                                                        <td width="75" align="left" valign="top">Name your Job: </td>
                                                        <td width="28">&nbsp;</td>
                                                        <td width="225" align="left"><input name="jobname" type="text" id="jobname" size="25" maxlength="25" /></td>
                                                      </tr>
                                                  </table></td>
                                                </tr>
                                            </table></td>
                                          </tr>
                                        </table>
                                          <br /></td>
                                      <td width="375" rowspan="2" align="left" valign="top"><table width="375" border="0" align="center" cellpadding="0" cellspacing="0">
                                          <tr>
                                            <td width="375" align="center" valign="top"><p>
                                                <input name="button2" type="button" onclick="history.go(-1)" value="Change Layout" />
                                              </p>
                                                <table width="350" height="200" border="1" align="center" cellpadding="0" cellspacing="0" id="cardTemplate">
                                                  <tr>
                                                    <td align="center" valign="middle"><table width="325" height="200" border="0" align="center" cellpadding="0" cellspacing="0" id="cardTemplate">
  <tr>
    <td colspan="3" align="center" valign="top" class="companyname" id="companyName">Company Name </td>
  </tr>
  <tr>
    <td colspan="3" align="center" valign="top" class="sloganS" id="sloganS">Slogan<br /> </td>
  </tr>
  <tr>
    <td colspan="3" align="center" valign="top" class="name" id="nameS">John W. Doe </td>
  </tr>
  <tr>
    <td colspan="3" align="center" valign="top" class="titleS" id="titleS">Title<br /> </td>
  </tr>
  <tr>
    <td colspan="3" align="center" valign="top" class="content" id="address1S">1234 Any Street </td>
  </tr>
  <tr>
    <td colspan="3" align="center" valign="top" class="content" id="address2S">Any Town, US 12345 </td>
  </tr>
  <tr>
    <td width="165" align="right" valign="top" class="content" id="phoneS">Telephone 1</td>
 <td width="10" align="center" valign="top" class="content">&nbsp;•&nbsp;</td>
    <td width="165" align="left" valign="top" class="content" id="cellS">Telephone 2</td>
  </tr>
  <tr>
    <td colspan="3" align="center" valign="top" class="content" id="emailS">email address </td>
  </tr>
  <tr>
    <td colspan="3" align="center" valign="top" class="website" id="websiteS">website</td>
  </tr>
</table>
                                                    </td>
                                                  </tr>
                                                </table>
                                              <br />
                                              Font Style:
                                              <select name="cardTemplate" onchange="document.getElementById('cardTemplate').style.fontFamily=this.options[this.selectedIndex].value;">
                                                <option value="courier">Courier</option>
                                                <option value="verdana">Verdana</option>
                                                <option value="amazone bt">Amazone BT</option>
                                                <option value="arial">Arial</option>
                                                <option value="times">Times</option>
                                                <option value="helvetica">Helvetica</option>
                                                <option value="sans-serif">Sans Serif</option>
                                                <option value="choose" selected="selected">-- Choose Style --</option>
                                              </select>
                                              <p></p>
                                              <label> Additional Info:
                                                <textarea name="add_info" cols="25" id="add_info"></textarea>
                                                <br />
                                                <br />
                                                <input name="approval" type="checkbox" id="approval" value="approve" />
                                              </label>
                                              I approve Design! (required)<br />
                                              <span class="content_heading"><br />
                                              Your e-Mail Address:</span><br />
(Required to submit design!)<br />
<input name="vis_email" type="text" id="vis_email" size="25" maxlength="50" />
<br />
                                              <br />
                                              <input type="submit" name="Submit" value="Submit your Design!" /></td>
                                          </tr>
                                      </table></td>
                                      <td width="1" rowspan="2" align="left" valign="top">&nbsp;</td>
                                    </tr>
                                  </table>
                              </td>
                              <td align="left" valign="top" class="cont_right">&nbsp;</td>
                            </tr>
                            <tr>
                              <td class="cont_left">&nbsp;</td>
                              <td class="cont_right">&nbsp;</td>
                            </tr>
                            <tr>
                              <td class="cont_left">&nbsp;</td>
                              <td class="cont_right">&nbsp;</td>
                            </tr>
                            <tr>
                              <td class="cont_left">&nbsp;</td>
                              <td class="cont_right">&nbsp;</td>
                            </tr>
                            <tr>
                              <td class="cont_left">&nbsp;</td>
                              <td class="cont_right">&nbsp;</td>
                            </tr>
                            <tr>
                              <td class="cont_left">&nbsp;</td>
                              <td class="cont_right">&nbsp;</td>
                            </tr>
                            <tr>
                              <td class="cont_left">&nbsp;</td>
                              <td class="cont_right">&nbsp;</td>
                            </tr>
                            <tr>
                              <td class="cont_left">&nbsp;</td>
                              <td class="cont_right">&nbsp;</td>
                            </tr>
                            <tr>
                              <td class="cont_left">&nbsp;</td>
                              <td class="cont_right">&nbsp;</td>
                            </tr>
                            <tr>
                              <td class="cont_left">&nbsp;</td>
                              <td class="cont_right"></td>
                            </tr>
                          </table></form>
                       </td>
                      </tr>
                    </table>

**jmarcv** · 01-19-2009

Well Yee Haw then!

**rlhanson** · 01-19-2009

Don't get too excited John-Marc! lol
I have many, many more questions still!

Thanks so much - I have never had anyone totally stick with me as I ask the most obvious questions and for as many as I ask... I truly appreciate your help!

**rlhanson** · 01-24-2009

Good morning! I'm back with a couple of questions...

I have accomplished:
-placing the color selector on the page for both the background and the font color.
-successfully updating the preview with the selections
-successfully pass this information to the cart
-learned much more about ID's and stacking js to have mutliple events happen, which is where my question comes in...

I have the js stacked so that if a background image is selected, the background color text box displays a value of "no color". I also have it to where if a background color is selected, the background image button becomes unchecked. Awesome huh?!

The way I achieved the unchecked value is to assign a unique ID to each background image button (id=bkgrd1, id=bkgrd2)...as when I just assign one ID it doesn't uncheck.

Since I will have many images, how can I avoid having to write each and every event for each and every id?

Background Image:

Code:

<input type="radio" id="bkgrd_image" name="optn2" value="414" onclick="updateoptimage(0,2,0,1);updateprice0();document.getElementById('cardTemplate').style.backgroundImage='url(designer/images/pics/backgrounds/3bamboo.jpg)';document.getElementById ('background').value=this.src;document.getElementById('background').value='No Color';" />

Background Color:

Code:

<input type="hidden" name="optn23" value="479" id="noart" />
                        <img src="/images/designer/color.jpg" align="absmiddle" title="Choose Color" style="cursor:pointer" onclick="document.getElementById('noart').checked=true;document.getElementById('cardTemplate').style.backgroundImage='url(../images/sp.gif)';showColorGrid3('voptn23','cardTemplate','B');document.getElementById ('background').value=this.src;document.getElementById('bkgrd_image').checked=false;document.getElementById ('background').value=this.src;document.getElementById('bkgrd_image2').checked=false;document.getElementById ('background').value=this.src;document.getElementById('bkgrd_image3').checked=false;"/>

Thanks in advance!

Thread: One more: Online Designer?

LinkBack

Thread Tools

Search Thread

Display

Online Designer

Posting Permissions