Page 2 of 15 FirstFirst 12345612 ... LastLast
Results 11 to 20 of 141

Thread: One more: Online Designer?

  1. #11
    rlhanson's Avatar
    rlhanson is offline Master Glow Jedi
    Join Date
    Aug 2007
    Location
    Chapman, Kansas
    Posts
    531

    Default

    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>
    Thank you,
    Lynne Hanson
    RL Hanson-Online

  2. #12
    rlhanson's Avatar
    rlhanson is offline Master Glow Jedi
    Join Date
    Aug 2007
    Location
    Chapman, Kansas
    Posts
    531

    Default

    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>
    Thank you,
    Lynne Hanson
    RL Hanson-Online

  3. #13
    jmarcv's Avatar
    jmarcv is offline Cranky Coder
    Join Date
    Jan 2005
    Posts
    354

    Default

    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.

  4. #14
    jmarcv's Avatar
    jmarcv is offline Cranky Coder
    Join Date
    Jan 2005
    Posts
    354

    Default PART 2 - changing styles

    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

  5. #15
    rlhanson's Avatar
    rlhanson is offline Master Glow Jedi
    Join Date
    Aug 2007
    Location
    Chapman, Kansas
    Posts
    531

    Default

    I'm loving this!
    Thank you,
    Lynne Hanson
    RL Hanson-Online

  6. #16
    rlhanson's Avatar
    rlhanson is offline Master Glow Jedi
    Join Date
    Aug 2007
    Location
    Chapman, Kansas
    Posts
    531

    Default

    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
    Last edited by rlhanson; 10-25-2007 at 02:21 PM.
    Thank you,
    Lynne Hanson
    RL Hanson-Online

  7. #17
    jmarcv's Avatar
    jmarcv is offline Cranky Coder
    Join Date
    Jan 2005
    Posts
    354

    Default

    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?

  8. #18
    rlhanson's Avatar
    rlhanson is offline Master Glow Jedi
    Join Date
    Aug 2007
    Location
    Chapman, Kansas
    Posts
    531

    Default

    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....
    Thank you,
    Lynne Hanson
    RL Hanson-Online

  9. #19
    rlhanson's Avatar
    rlhanson is offline Master Glow Jedi
    Join Date
    Aug 2007
    Location
    Chapman, Kansas
    Posts
    531

    Default

    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?
    Thank you,
    Lynne Hanson
    RL Hanson-Online

  10. #20
    jmarcv's Avatar
    jmarcv is offline Cranky Coder
    Join Date
    Jan 2005
    Posts
    354

    Default

    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!

Page 2 of 15 FirstFirst 12345612 ... LastLast

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

1 2 3 4 5 6 7 8 9 10 11 12 13 14