One more: Online Designer?

**rlhanson** · 10-25-2007

John-Marc, please forgive my ignorance this week - I'm quitting smoking and genuinely believe I am getting way too much oxygen for my brain to handle!

Here's the sample template (written in html):

HTML Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<form action="formprocessor2.php" method="POST"><table width="100%" border="0" cellspacing="10" cellpadding="0">
  <tr>
    <td>Customer Input Section - all info is optional </td>
    <td width="50%">Design Preview </td>
  </tr>
  <tr>
    <td width="50%"><table width="202%" border="0" cellspacing="10" cellpadding="0">
  <tr>
    <td>Background Selection </td>
    <td><label>
      <input name="radiobutton" type="radio" value="radiobutton" tabindex="1"/>
      Blue Image 
      <input name="radiobutton" type="radio" value="radiobutton" tabindex="2" />
      Red Image<br />
      <input name="radiobutton" type="radio" value="radiobutton" tabindex="3" />
      Purple Image 
      <input name="radiobutton" type="radio" value="radiobutton" tabindex="4" />
      No Image</label></td>
  </tr>
  <tr>
    <td>Company Name </td>
    <td><input name="company_name" type="text" id="company_name" tabindex="5" size="25" maxlength="50" /></td>
  </tr>
  <tr>
    <td>Slogan</td>
    <td><input name="slogan" type="text" id="slogan" tabindex="6" size="25" maxlength="100" /></td>
  </tr>
  <tr>
    <td>Full Name </td>
    <td><input name="name" type="text" id="name" tabindex="7" size="25" maxlength="50" /></td>
  </tr>
  <tr>
    <td>Job Title </td>
    <td><input name="title" type="text" id="title" tabindex="8" size="25" maxlength="25" /></td>
  </tr>
  <tr>
    <td>Address - Line 1 </td>
    <td><input name="address_1" type="text" id="address_1" tabindex="9" size="25" maxlength="100" /></td>
  </tr>
  <tr>
    <td>Address - Line 2 </td>
    <td><input name="address_2" type="text" id="address_2" tabindex="10" size="25" maxlength="100" /></td>
  </tr>
  <tr>
    <td>Address - Line 3 </td>
    <td><input name="address_3" type="text" id="address_3" tabindex="11" size="25" maxlength="100" /></td>
  </tr>
  <tr>
    <td>Telephone</td>
    <td><input name="phone" type="text" id="phone" tabindex="12" size="25" maxlength="15" /></td>
  </tr>
  <tr>
    <td>Cell </td>
    <td><input name="cell" type="text" id="cell" tabindex="13" size="25" maxlength="15" /></td>
  </tr>
  <tr>
    <td>Fax</td>
    <td><input name="fax" type="text" id="fax" tabindex="14" size="25" maxlength="15" /></td>
  </tr>
  <tr>
    <td>e-mail Address </td>
    <td><input name="vis_email" type="text" id="vis_email" tabindex="15" size="25" maxlength="50" /></td>
  </tr>
  <tr>
    <td>Website Address </td>
    <td><input name="website" type="text" id="website" tabindex="16" size="25" maxlength="100" /></td>
  </tr>
  <tr>
    <td>Additional Info </td>
    <td><input name="add_info" type="text" id="add_info" tabindex="17" size="25" maxlength="100" /></td>
  </tr>
  <tr>
    <td><label></label></td>
    <td>&nbsp;</td>
  </tr>
</table> </td>
    <td width="50%" align="center" valign="top"><table width="350" height="200" border="0" align="center" cellpadding="0" cellspacing="10" background="<background selection>">
      <tr>
        <td rowspan="2">company_name </td>
        <td><div align="right">name </div></td>
      </tr>
      <tr>
        <td><div align="right">title</div></td>
      </tr>
      <tr>
        <td colspan="2" align="center">slogan</td>
        </tr>
      <tr>
        <td>address_1</td>
        <td align="right">phone</td>
      </tr>
      <tr>
        <td>address_2</td>
        <td align="right">cell</td>
      </tr>
      <tr>
        <td>address_2</td>
        <td align="right">fax</td>
      </tr>
      <tr>
        <td>website</td>
        <td align="right">&bull; vis_email </td>
      </tr>
      <tr>
        <td colspan="2" align="center">add_info</td>
        </tr>
    </table>
    <br />
    <label>
    <input name="approval" type="checkbox" id="approval" value="approve" />
    </label>
I approve Design! (required)<br />
<br />
<input type="submit" name="Submit" value="Submit Design!" /></td>
  </tr>
</table> 
</form>
</body>
</html>

**rlhanson** · 10-25-2007

php form and processor:

PHP Code:

 <?php
// Receiving variables
@$pfw_ip= $_SERVER['REMOTE_ADDR'];
@$radiobutton = addslashes($_POST['radiobutton']);
@$company_name = addslashes($_POST['company_name']);
@$slogan = addslashes($_POST['slogan']);
@$name = addslashes($_POST['name']);
@$title = addslashes($_POST['title']);
@$address_1 = addslashes($_POST['address_1']);
@$address_2 = addslashes($_POST['address_2']);
@$address_3 = addslashes($_POST['address_3']);
@$phone = addslashes($_POST['phone']);
@$cell = addslashes($_POST['cell']);
@$fax = addslashes($_POST['fax']);
@$vis_email = addslashes($_POST['vis_email']);
@$website = addslashes($_POST['website']);
@$add_info = addslashes($_POST['add_info']);
@$approval = addslashes($_POST['approval']);
 
//Sending Email to form owner
$pfw_header = "From: $vis_email\n"
  . "Reply-To: $vis_email\n";
$pfw_subject = "designer";
$pfw_email_to = "support@rlhanson-online.com";
$pfw_message = "Visitor's IP: $pfw_ip\n"
. "radiobutton: $radiobutton\n"
. "company_name: $company_name\n"
. "slogan: $slogan\n"
. "name: $name\n"
. "title: $title\n"
. "address_1: $address_1\n"
. "address_2: $address_2\n"
. "address_3: $address_3\n"
. "phone: $phone\n"
. "cell: $cell\n"
. "fax: $fax\n"
. "vis_email: $vis_email\n"
. "website: $website\n"
. "add_info: $add_info\n"
. "approval: $approval\n"
. "RL Hanson-Online";
@mail($pfw_email_to, $pfw_subject ,$pfw_message ,$pfw_header ) ;
echo "Design Preview";
echo "<table width='350' height='200' border='0' align='center' cellpadding='0' cellspacing='10' background='<background selection>'>";
echo "<tr>";
echo "<td rowspan='2'>$company_name </td>";
echo "<td><div align='right'>$name </div></td>";
echo "</tr>";
echo "<tr>";
echo "<td><div align='right'>$title</div></td>";
echo "</tr>";
echo "<tr>";
echo "<td colspan='2' align='center'>$slogan</td>";
echo "</tr>";
echo "";
echo "<tr>";
echo "<td>$address_1</td>";
echo "<td align='right'>$phone</td>";
echo "</tr>";
echo "<tr>";
echo "<td>$address_2</td>";
echo "<td align='right'>$cell</td>";
echo "</tr>";
echo "<tr>";
echo "<td>$address_3</td>";
echo "<td align='right'>$fax</td>";
echo "</tr>";
echo "<tr>";
echo "<td>$website</td>";
echo "<td align='right'>$vis_email </td>";
echo "</tr>";
echo "<tr>";
echo "<td colspan='2' align='center'>$add_info</td>";
echo "</tr>";
echo "";
echo "</table>";
 
$thisfile = $_SERVER['PHP_SELF'];
$message .= <<< EOMSG
<form action="$thisfile" method="POST"><input name="recipient" type="hidden" value="support@rlhanson-online.com"><table width="100%" border="0" cellspacing="10" cellpadding="0">
  <tr>
    <td>Customer Input Section - all info is optional </td>
    <td width="50%">&nbsp; </td>
  </tr>
  <tr>
    <td width="50%"><table width="202%" border="0" cellspacing="10" cellpadding="0">
  <tr>
    <td>Background Selection </td>
    <td><label>
      <input name="radiobutton" type="radio" value="radiobutton" tabindex="1"/>
      Blue Image 
      <input name="radiobutton" type="radio" value="radiobutton" tabindex="2" />
      Red Image<br />
      <input name="radiobutton" type="radio" value="radiobutton" tabindex="3" />
      Purple Image 
      <input name="radiobutton" type="radio" value="radiobutton" tabindex="4" />
      No Image</label></td>
  </tr>
  <tr>
    <td>Company Name </td>
    <td><input name="company_name" type="text" id="company_name" tabindex="5" size="25" maxlength="50" /></td>
  </tr>
  <tr>
    <td>Slogan</td>
    <td><input name="slogan" type="text" id="slogan" tabindex="6" size="25" maxlength="100" /></td>
  </tr>
  <tr>
    <td>Full Name </td>
    <td><input name="name" type="text" id="name" tabindex="7" size="25" maxlength="50" /></td>
  </tr>
  <tr>
    <td>Job Title </td>
    <td><input name="title" type="text" id="title" tabindex="8" size="25" maxlength="25" /></td>
  </tr>
  <tr>
    <td>Address - Line 1 </td>
    <td><input name="address_1" type="text" id="address_1" tabindex="9" size="25" maxlength="100" /></td>
  </tr>
  <tr>
    <td>Address - Line 2 </td>
    <td><input name="address_2" type="text" id="address_2" tabindex="10" size="25" maxlength="100" /></td>
  </tr>
  <tr>
    <td>Address - Line 3 </td>
    <td><input name="address_3" type="text" id="address_3" tabindex="11" size="25" maxlength="100" /></td>
  </tr>
  <tr>
    <td>Telephone</td>
    <td><input name="phone" type="text" id="phone" tabindex="12" size="25" maxlength="15" /></td>
  </tr>
  <tr>
    <td>Cell </td>
    <td><input name="cell" type="text" id="cell" tabindex="13" size="25" maxlength="15" /></td>
  </tr>
  <tr>
    <td>Fax</td>
    <td><input name="fax" type="text" id="fax" tabindex="14" size="25" maxlength="15" /></td>
  </tr>
  <tr>
    <td>e-mail Address </td>
    <td><input name="vis_email" type="text" id="vis_email" tabindex="15" size="25" maxlength="50" /></td>
  </tr>
  <tr>
    <td>Website Address </td>
    <td><input name="website" type="text" id="website" tabindex="16" size="25" maxlength="100" /></td>
  </tr>
  <tr>
    <td>Additional Info </td>
    <td><input name="add_info" type="text" id="add_info" tabindex="17" size="25" maxlength="100" /></td>
  </tr>
  <tr>
    <td><label></label></td>
    <td>&nbsp;</td>
  </tr>
</table>    </td>
    <td width="50%" align="center" valign="top">
    <br />
    <label>
    <input name="approval" type="checkbox" id="approval" value="approve" />
    </label>
I approve Design! (required)<br />
<br />
<input type="submit" name="Submit" value="Submit Design!" /></td>
  </tr>
</table> 
</form>
EOMSG;
?>
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<?php echo $message; ?>
</body>
</html>

**jmarcv** · 10-25-2007

Good luck with the smoking. Its a wonderful thing when you finally do. Takes a LONG time.....
OK.....
lets start with company name.

OK - Part One of the lesson:

Step one is to label the area where company name will display
so in the area of your 'card preview template'
this:

HTML Code:

<td rowspan="2">company_name </td>

becomes this:

HTML Code:

<td rowspan="2" id="companyName">company_name </td>

we are assigning an id to the table data cell.
Note that javascript does not deal with underscores, which is why I changed the id to be different than tour form var name.

Next on the input field:

before:

HTML Code:

 <td><input name="company_name" type="text" id="company_name" tabindex="5" size="25" maxlength="50" /></td>

after:

HTML Code:

 <td><input name="company_name" type="text" id="company_name" tabindex="5" size="25" maxlength="50" onChange="document.getElementById('companyName').innerHTML=this.value;" /></td>

onChange=
This instructs the browser to run this javascript whenever the data is changed and the focus leaves that field.

This is the cell we just labelled
document.getElementById('companyName')
This is the data that was entered
this.value
... and this takes that data and sticks it in the table cell
document.getElementById('companyName').innerHTML=t his.value;"

Simple eh? (G)

Some gotchas to observe.
Watch out for textarea. Linefeeds will need to be converted to break tags, and that gets tricky.
PHP handles underscores, Javascript does not. So there should be none in the id= attributes.

**jmarcv** · 10-25-2007

Colors, which will lead to graphics, I am sure, since you labelled them 'Image'.
First, we need to id what we want to modify
before:

HTML Code:

 <table width="350" height="200" border="0" align="center" cellpadding="0" cellspacing="10" background="<background selection>">

after:

HTML Code:

 <table id=cardTemplate width="350" height="200" border="0" align="center" cellpadding="0" cellspacing="10">

So now the table for your template is labelled 'cardTemplate'

Now the radio buttons. This is where CSS comes into play.
FYI, you surrounded them with the label tag which disabled them

before

HTML Code:

 <td><label>
      <input name="radiobutton" type="radio" value="radiobutton" tabindex="1"/>
      Blue Image 
      <input name="radiobutton" type="radio" value="radiobutton" tabindex="2" />
      Red Image<br />
      <input name="radiobutton" type="radio" value="radiobutton" tabindex="3" />
      Purple Image 
      <input name="radiobutton" type="radio" value="radiobutton" tabindex="4" />
      No Image</label></td>

after

HTML Code:

 <td>
      <input name="radiobutton" type="radio" value="blue" tabindex="1"  onChange="document.getElementById('cardTemplate').style.backgroundColor=this.value"/>
      Blue Image 
      <input name="radiobutton" type="radio" value="red" tabindex="2"  onChange="document.getElementById('cardTemplate').style.backgroundColor=this.value"/>
      Red Image<br />
      <input name="radiobutton" type="radio" value="purple" tabindex="3"  onChange="document.getElementById('cardTemplate').style.backgroundColor=this.value"/>
      Purple Image 
      <input name="radiobutton" type="radio" value="transparent" tabindex="4"  onChange="document.getElementById('cardTemplate').style.backgroundColor=this.value"/>
      No Image</td>

Whoa! You catch that? Simple eh?

.style.backgroundColor references the background color of the card template

**rlhanson** · 10-25-2007

I'm loving this!

**rlhanson** · 10-25-2007

Question:
When I updated the rest of the onChange for the text fields - they did not work...am I jumping ahead or ?
Here's my code so far with the corrections for the label tags and adding color codes:

HTML Code:

<html xmlns="XHTML namespace">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<form action="formprocessor2.php" method="POST"><table width="100&#37;" border="0" cellspacing="10" cellpadding="0">
<tr>
<td>Customer Input Section - all info is optional </td>
<td width="50%">Design Preview </td>
</tr>
<tr>
<td width="50%"><table width="202%" border="0" cellspacing="10" cellpadding="0">
<tr>
<td>Background Selection </td>
<td>
<input name="radiobutton" type="radio" value="#345ea9" tabindex="1" onChange="document.getElementById('cardTemplate').style.backgroundColor=this.value" />
Blue Image 
<input name="radiobutton" type="radio" value="#FF0000" tabindex="2" onChange="document.getElementById('cardTemplate').style.backgroundColor=this.value" />
Red Image<br />
<input name="radiobutton" type="radio" value="#9900FF" tabindex="3" onChange="document.getElementById('cardTemplate').style.backgroundColor=this.value" />
Purple Image 
<input name="radiobutton" type="radio" value="#ffffff" tabindex="4" onChange="document.getElementById('cardTemplate').style.backgroundColor=this.value" />
No Image</td>
</tr>
<tr>
<td>Company Name </td>
<td><input name="company_name" type="text" id="company_name" tabindex="5" size="25" maxlength="50" onChange="document.getElementById('companyName').innerHTML=this.value;" /></td>
</tr>
<tr>
<td>Slogan</td>
<td><input name="slogan" type="text" id="slogan" tabindex="6" size="25" maxlength="100" onChange="document.getElementById('slogan').innerHTML=this.value;" /></td>
</tr>
<tr>
<td>Full Name </td>
<td><input name="name" type="text" id="name" tabindex="7" size="25" maxlength="50" onChange="document.getElementById('name').innerHTML=this.value;" /></td>
</tr>
<tr>
<td>Job Title </td>
<td><input name="title" type="text" id="title" tabindex="8" size="25" maxlength="25" onChange="document.getElementById('title').innerHTML=this.value;" /></td>
</tr>
<tr>
<td>Address - Line 1 </td>
<td><input name="address_1" type="text" id="address_1" tabindex="9" size="25" maxlength="100" onChange="document.getElementById('address1').innerHTML=this.value;" /></td>
</tr>
<tr>
<td>Address - Line 2 </td>
<td><input name="address_2" type="text" id="address_2" tabindex="10" size="25" maxlength="100" onChange="document.getElementById('address2').innerHTML=this.value;" /></td>
</tr>
<tr>
<td>Address - Line 3 </td>
<td><input name="address_3" type="text" id="address_3" tabindex="11" size="25" maxlength="100" onChange="document.getElementById('address3').innerHTML=this.value;" /></td>
</tr>
<tr>
<td>Telephone</td>
<td><input name="phone" type="text" id="phone" tabindex="12" size="25" maxlength="15" onChange="document.getElementById('phone').innerHTML=this.value;" /></td>
</tr>
<tr>
<td>Cell </td>
<td><input name="cell" type="text" id="cell" tabindex="13" size="25" maxlength="15" onChange="document.getElementById('cell').innerHTML=this.value;" /></td>
</tr>
<tr>
<td>Fax</td>
<td><input name="fax" type="text" id="fax" tabindex="14" size="25" maxlength="15" onChange="document.getElementById('fax').innerHTML=this.value;" /></td>
</tr>
<tr>
<td>e-mail Address </td>
<td><input name="vis_email" type="text" id="vis_email" tabindex="15" size="25" maxlength="50" onChange="document.getElementById('email').innerHTML=this.value;" /></td>
</tr>
<tr>
<td>Website Address </td>
<td><input name="website" type="text" id="website" tabindex="16" size="25" maxlength="100" onChange="document.getElementById('website').innerHTML=this.value;" /></td>
</tr>
<tr>
<td>Additional Info </td>
<td><input name="add_info" type="text" id="add_info" tabindex="17" size="25" maxlength="100" onChange="document.getElementById('addInfo').innerHTML=this.value;" /></td>
</tr>
<tr>
<td><label></label></td>
<td>&nbsp;</td>
</tr>
</table> </td>
<td width="50%" align="center" valign="top"><table id=cardTemplate width="350" height="200" border="0" align="center" cellpadding="0" cellspacing="10">
<tr>
<td rowspan="2" id="companyName">company_name </td>
<td id="name"><div align="right">name</div></td>
</tr>
<tr>
<td id="title"><div align="right">title</div></td>
</tr>
<tr>
<td colspan="2" align="center" id="slogan">slogan</td>
</tr>
<tr>
<td id="address1">address_1</td>
<td align="right" id="phone">phone</td>
</tr>
<tr>
<td id="address2">address_2</td>
<td align="right" id="cell">cell</td>
</tr>
<tr>
<td id="address3">address_3</td>
<td align="right" id="fax">fax</td>
</tr>
<tr>
<td id="website">website</td>
<td align="right" id="email">&bull; vis_email </td>
</tr>
<tr>
<td colspan="2" align="center" id="addInfo">add_info</td>
</tr>
</table>
<br />
<label>
<input name="approval" type="checkbox" id="approval" value="approve" />
</label>
I approve Design! (required)<br />
<br />
<input type="submit" name="Submit" value="Submit Design!" /></td>
</tr>
</table> 
</form>
</body>
</html>

Form here: Untitled Document

**jmarcv** · 10-25-2007

Thats because you have duplicate id's, for example - phone. The id is for your text field, and that comes first.

I don't see why you need ID's on your form elements anyway, so why not just bag them all?

**rlhanson** · 10-25-2007

Thanks John-Marc,
Just finished stuffing my face (since I quit smoking yesterday, food seems to be ultra important

) am taking a look at this now....

**rlhanson** · 10-25-2007

Okay - I changed the id's and applied the form processor - now the javascript does what I wanted AND I get emailed the reults when it's submitted!

This is so-o-o-o-o-o cool!!! Thank you so much John-Marc for taking the time to teach me (and everyone else)!

If I wanted to add design controls (bold, italic, perhaps different colors) this would also be javascript programming, correct?

**jmarcv** · 10-25-2007

Drink lots of water. You got 6 months to go and if you stuff your face everyday you'll never get a date with me
LOL!

Thread: One more: Online Designer?

LinkBack

Thread Tools

Search Thread

Display

PART 2 - changing styles

Posting Permissions