Jump to content

Help with classifieds form

NightShift

By NightShift
in PHP Coding Help

Recommended Posts

NightShift Newbie

NightShift

Posted
Posted

Can someone please help me  I have very little experience in scripting (just enough to get frustrated) but I am trying to learn as I go.

 

I am trying to write a script so users can submit classified advertisement for a publication.  I would like to be able to have the user fill in all the detail and see a live preview of their classified, be able to add a border and choose an image from a selection of images. Then when they submit it sends an email with their details and creates a PDF of the ad as an attachment of the email..

 

I have included the script I have so far below can someone please show me (start me off) or explain how I can add the function to add a border, image and create the PDF.

 

Also this seems to be a very long stript, have I gone about this the best/easiest way?

 

Thanks in advance.

 

 
<head>
<title>Force Classifieds - Online</title>
<style>
a {font-family:arial;font-size:12px;color:#006699; text-decoration:none;font-weight:normal}
a:visited {font-family:arial;color:#006699;font-size:12px;}
a:active {font-family:arial;color:#006699;}
a:hover {font-family:arial;color:#006699; text-decoration:underline;}       

    body,td,tr,table,select,input, textarea { font-family: helvetica, sans-serif;
                       font-size: 12px; }
                       
div.previewPanel {
    background:url(../images/paper_trans.gif) bottom right no-repeat #ffffff;
    width:215px;
    height:95px;
    padding:4px 0px 0px 2px;
}

#theitem {
    color:#000000;
    height:4px;
    font-weight:bold;
    display:inline;
    font-family:arial;
    text-transform:uppercase;
    font-size:14px; 
    margin:0px 4px 0px 0px;
}

#theAd {
    color:#000000;
    font-weight:normal;
    display:inline;
    font-family:times;
    font-size:14px; 
    margin:0px 0px 0px 0px; 
}              

div.previewWrapper {
    background:#F4F3EF;
    padding:0px 0px 0px 5px;
    width:204px;
    *width:207px;
    height:88px;
    *height:84px;
}

textarea {
overflow: auto;
} 

input,textarea {
    padding:0px 0px 0px 2px;
}

#adtxt {
    font-size:12px;
    height:75px;
    width:210px;
    padding:2px 0px 0px 4px;
}

input.prbox {
    font-family:times;
    font-size:13px;
    margin:0;
    width:150px;
    height:15px;
    border:none;
    background:#F4F3EF;
    color:#333333;
    padding-left:4px;
}
textarea.prText {
    font-family:times;
    font-size:13px;
    margin:0;
    width:200px;
    height:65px;
    border:none;
    background:#F4F3EF;
    color:#333333;
    padding-left:4px;
}

div.standout {
    font-size:15px;
    text-align:center;
    color:red;
    margin:10px 0px 0px 0px;
}

div.standout h3 {
    margin:0;
    color:#000000;
    font-weight:normal;
    font-size:11px;
    display:inline;
}



    td.formlabel    { vertical-align: top;
                      text-align: right; }

    td.formlabel2   { vertical-align: top;
                      text-align: left; }                     

    td.formlabel3   { vertical-align: top;
                      text-align: center; }                   

    td.value        { font-weight: bold; }

    td.intro        { padding-left:  20px;
                      padding-right: 20px; }
    .confirm {  font-family: helvetica, sans-serif;
                font-weight: bold;
                font-size: 12px; color: #000099;}
                      
    .secthead { font-size: 17px;
                font-weight: bold;
                padding-top: 10px;
                padding-bottom: 5px;
                padding-left: 16px; }
    .redmed {
    COLOR: #ff0000  ;
    TEXT-DECORATION: none;
    font-weight: bold;
    FONT-FAMILY: Arial, Helvetica;
    FONT-SIZE: 11px;
    }                   

    .discStatement { font-size: 9px;}
    .coolform   {
        background : #F7F9FF none;
        border : 1px solid #00458A;
        font-family : Arial, Helvetica, sans-serif;
        font-size : 11px;
        font-weight:bold;
        font-style : normal;
        width:200px;
    }
    
    .coolbutton {
      background : #D7E2F6;
      font-family : verdana, arial, helvetica, sans-serif;
      font-size : 11px;
      color : #006699;
      border-bottom : #486088 1px outset;
      border-left : #486088 1px outset;
      border-right : #486088 1px outset;
      border-top : #486088 1px outset;
      cursor:pointer;
    }
    
div.header {
    background:url(../images/bg_header.gif) no-repeat;
    color:#ffffff;
    font-size:14px;
    font-weight:bold;
    height:21px;
    text-align:center;
    line-height:20px;
    margin:0px 0px 5px 0px;
}   

div.headerLong {
    background:url(../images/bg_header_long.gif) no-repeat;
    color:#ffffff;
    font-size:14px;
    font-weight:bold;
    height:21px;
    text-align:center;
    line-height:20px;
    margin:0px 0px 5px 0px;

}   

ul.smlist{ margin: 0 0 24px 12px; padding: 0; } 

.smlist li {
    padding-left: 0px;
    color: #000000;
    font-size: 11px;
    line-height:11px;
    margin: 2px 0 0 19px;
    *margin: 2px 0 0 3px;   
}

table.mainform td {
    padding:6px;
}
    
.style1 {color: red}
</style>        

<SCRIPT LANGUAGE="JavaScript">

function loadit()
{
    document.getElementById("theitem").firstChild.nodeValue = '';
    document.getElementById("theAd").firstChild.nodeValue = ' ';
}

function remainingCharacters(textAreaContent,textAreaContentValue, maxCharacters) 
{
    // Determine the number of characters we have left
    charactersLeft = maxCharacters -    textAreaContentValue.length;
    // If we have no characters left on the text area, we display an alert
    // telling the user we have no more room left. We also strip down the length
    // of the content to be of the maximum size supplied (maxCharacters)
    if (charactersLeft < 0)
    {
        alert('The limit of ' + maxCharacters + ' characters has been reached.');
        // Strip down the string to be of size maxCharacters
        textAreaContent.value = textAreaContent.value.substring(0,maxCharacters);
        classifiedform.tCount.value=225;
        return false;
    } 
    classifiedform.tCount.value=(0+textAreaContentValue.length);
}

function updatePrSelling(ff,val) {
    document.getElementById("theitem").firstChild.nodeValue = val;  
}

function updatePreview(form)
{
    document.getElementById("theAd").firstChild.nodeValue = form.text.value +' '+' $'+form.price.value +'  PH '+form.phoneareacode.value+form.phonenumber.value;;   

}

function isDigit (c)
{   
    return ((c >= "0") && (c <= "9"))
}

function isValidPrice(fieldValue)
{
    if(isNaN(fieldValue))
    {
        alert("Prices can only be numerical values");
        document.classifiedform.price.value = "";
        document.classifiedform.price.select();                                                 
        document.classifiedform.price.focus();
        return false;
    }
    var dollarValue = parseFloat(fieldValue);
    if(dollarValue>5000)
    {
        alert("Online submittion is only available for items $5000 or less.\nFor items over this price, please call (02) 4964 7656 to place your ad.");
        document.classifiedform.price.value = "";       
        document.classifiedform.price.focus();
        return false;
    }
    return true;

}

function isValidPhone(fieldValue)
{
    if(isNaN(fieldValue))
    {
        alert("Phone numbers must be numeric, with no spaces or dashes.");
        document.classifiedform.phonenumber.value = "";         
        document.classifiedform.phonenumber.select();                       
        document.classifiedform.phonenumber.focus();        
        return false;
    }
    return true;
}

function isValidPhoneAreaCode(fieldValue)
{
    if(!isNumber(fieldValue) || fieldValue.charAt(0)!="0" || fieldValue.length!=2)
    {
        alert("Please type in a valid phone area code");
        document.advertisementform.phoneareacode.value = "";        
        document.advertisementform.phoneareacode.select();          
        document.advertisementform.phoneareacode.focus();                   
        return false;
    }
    return true;

}

function isValidPhoneNumber(fieldValue)
{
    if(!isNumber(fieldValue))
    {
        alert("Phone numbers must be numeric, with no spaces or dashes");
        document.classifiedform.phonenumber.value = "";         
        document.classifiedform.phonenumber.select();                       
        document.classifiedform.phonenumber.focus();        
        return false;
    }
    
    if(fieldValue.length!=
    {
        alert("Phone numbers must be 8 digits in length");
        document.classifiedform.phonenumber.value = "";         
        document.classifiedform.phonenumber.select();                       
        document.classifiedform.phonenumber.focus();            
        return false;   
    }
    return true;
}

function isValidPostcode(fieldValue)
{
    if(!isNumber(fieldValue) || fieldValue.length!=4)
    {
        alert("Please type in a valid postcode");
        document.classifiedform.postcode.value = "";            
        document.classifiedform.postcode.select();                      
        document.classifiedform.postcode.focus();
        return false;
    }
    return true;

}

function isNumber(numberValue)
{
    if(isNaN(numberValue))
    {
        return false;
    }
    return true;
}

function verifyFields()
{

    // check for * < >
    nastyChars = "*<>"
    for(z=0;z<document.classifiedform.length;z++) {
        for (i=0; i<nastyChars.length; i++) {   
            thenastyChar = nastyChars.charAt(i)
            if (document.classifiedform.elements[z].value.indexOf(thenastyChar,0) > -1) 
            {
                alert("Your text must not contain asterisks(*), greater than(>), or less than (<) symbols.");
                return false;
            }
        }   
    }
    
    //Verify no fields are blank
    var errorFlag=false;
    if(document.classifiedform.firstname.value=="")
    {
        alert("Your first name must be entered");       
        document.classifiedform.firstname.select();     
        document.classifiedform.firstname.focus();
        return false;   
    }
    if(document.classifiedform.lastname.value=="")
    {
        alert("Your last name must be entered");
        document.classifiedform.lastname.select();      
        document.classifiedform.lastname.focus();       
        return false;       
    }
    if(document.classifiedform.streetaddress.value=="")
    {
        alert("Your street address must be entered");
        document.classifiedform.streetaddress.select();     
        document.classifiedform.streetaddress.focus();
        return false;       
    }
    if(document.classifiedform.suburb.value=="")
    {
        alert("Your suburb must be entered");
        document.classifiedform.suburb.select();        
        document.classifiedform.suburb.focus(); 
        return false;       
    }
    if(document.classifiedform.postcode.value=="")
    {
        alert("Your postcode be entered");
        document.classifiedform.postcode.select();                  
        document.classifiedform.postcode.focus();
        return false;       
    }
    if(document.classifiedform.phoneareacode.value=="")
    {
        alert("Your phone area code must be entered");
        document.classifiedform.phoneareacode.select();     
        document.classifiedform.phoneareacode.focus();
        return false;       
    }
    if(document.classifiedform.phonenumber.value=="")
    {
        alert("Your phone number must be entered");
        document.classifiedform.phonenumber.select();       
        document.classifiedform.phonenumber.focus();                
        return false;       
    }
    if(document.classifiedform.phonenumber.value.length >9)
    {
        alert("Your phone number must be less than 8 digits or less");
        document.classifiedform.phonenumber.select();       
        document.classifiedform.phonenumber.focus();                            
        return false;       
    }
    if(document.classifiedform.emailaddress.value=="")
    {
        alert("Your email address must be entered");
        document.classifiedform.emailaddress.select();      
        document.classifiedform.emailaddress.focus();
        return false;       
    }

    if(document.classifiedform.categoryid.value=="")
    {
        alert("A product category must be chosen");
        return false;       
    }

    if(document.classifiedform.sellingitem.value=="")
    {
        alert("Your advertisement item must be entered");
        document.classifiedform.sellingitem.select();       
        document.classifiedform.sellingitem.focus();                                            
        return false;       
    }                                   

    if(document.classifiedform.price.value=="")
    {
        alert("A price for your product must be entered");
        document.classifiedform.price.select();     
        document.classifiedform.price.focus();
        return false;       
    }

    if(!document.classifiedform.privateindividual.checked)
    {
        alert("You must agree to the terms & conditions and be a private individual to place a free ad in Weekend Shopper.\nIf this is the case, please tick the checkbox to place your ad");
        return false;
    }

    if(document.classifiedform.text.value=="")
    {
        alert("Your advertisement text must be entered");
        document.classifiedform.text.select();      
        document.classifiedform.text.focus();                                           
        return false;       
    }                                   

    return true;
}


function submitForm()
{
    if(verifyFields())
    {
        document.classifiedform.submit();
    }
    
}

function validEmail(email) 
{
    invalidChars = " /:,;"
    var isValid=true;   
    if (email == "") {                      // cannot be empty
        return false
    }
            
    for (i=0; i<invalidChars.length; i++) { // does it contain any invalid characters?
        badChar = invalidChars.charAt(i)
        if (email.indexOf(badChar,0) > -1) 
        {
            isValid = false;
        }
    }
    atPos = email.indexOf("@",1)            // there must be one "@" symbol
    if (atPos == -1) 
    {
        isValid = false;
    }
    if (email.indexOf("@",atPos+1) != -1) 
    {   // and only one "@" symbol
        isValid = false;
    }
    periodPos = email.indexOf(".",atPos)
    if (periodPos == -1) 
    {                   // and at least one "." after the "@"
        isValid = false;
    }
    if (periodPos+3 > email.length) 
    {       // must be at least 2 characters after the "."
        isValid = false;
    }
    domainName = email.substring(atPos+1, periodPos)
    if (domainName.length < 2) 

    {           // Cannot have a domain less than 2 characters long
        isValid = false;
    }
    if(!isValid)
    {
        alert("Invalid email address");
        document.classifiedform.emailaddress.value = "";        
        document.classifiedform.emailaddress.select();      
        document.classifiedform.emailaddress.focus();                                                                   
        return false;       
    }
    return true
}


// form validation
function validateTheform(theform) {
// validate email
if (!validEmail(theform.elements[7].value)) {
        alert("Please enter a valid email address");
        theform.elements[7].focus();
        theform.elements[7].select();
        return false;   
        }
        
// check everything is filled in
for (n = 0; n < 12; n++)
{
    if (theform.elements[n].value.length < 1) {
    alert ("Please fill in all fields");
    return false;
    }
}       

return true;
}

function clearAll()
{
    document.classifiedform.firstname.value='';
    document.classifiedform.lastname.value='';
    document.classifiedform.streetaddress.value='';
    document.classifiedform.suburb.value='';        
    document.classifiedform.postcode.value='';
    document.classifiedform.phoneareacode.value='';
    document.classifiedform.phonenumber.value='';
    document.classifiedform.emailaddress.value='';
    document.classifiedform.contactname.value='';
    document.classifiedform.categoryid.selectedIndex=0;
    document.classifiedform.privateindividual.value='';
    document.classifiedform.text.value='';
    document.classifiedform.privacy.checked=true;
    document.classifiedform.privateindividual.checked=false;    
    document.classifiedform.price.value='';
}

function clearAd()
{
    document.classifiedform.categoryid.selectedIndex=0;
    document.classifiedform.text.value='';
    document.classifiedform.price.value=''; 
}

function windowOpener(theURL,winName,features) {
  window.open(theURL,winName,features);
}

function countText() {
    //classifiedform.tCount=classifiedform.adtext.length;
}

</SCRIPT>   
</head>

<BODY bgcolor="#ffffff"  onload="javascript&#058;loadit()">
<form name="classifiedform" action="http://fighterforce.com.au/v-cgi/forms.cgi" enctype="application/x-www-form-urlencoded" method="post" onSubmit="return verifyFields()">
  <table border=0 cellPadding=0 cellSpacing=0 width=630 align=center class="mainform">
    <tr>
        <td colspan=2> </td>
    </tr>
    <tr>
        <td colspan=2 style="padding:0 150px 0 0;height:8px;line-height:8px;text-align:right"><span style="font-size: 10px;color:red;">All fields are mandatory Items marked with an * will not be published. </span></td>
    </tr>
    <tr>
        <td class="formlabel" width=50%>Your given or first name:</td>
      <td width=50%><input type="text" maxlength="15" name="firstname" size="17" class="coolform" onFocus="this.style.background='#E2F2FF'" onBlur="this.style.background='#F7F9FF'" value=""> 
          <span class="style1">*</span> </td>
    </tr>
    <tr>
        <td class="formlabel">Your family or last name:</td>
      <td><input type="text" maxlength="20" name="lastname" size="17" class="coolform" onFocus="this.style.background='#E2F2FF'" onBlur="this.style.background='#F7F9FF'" value=""> 
          <span class="style1">*</span></td>
    </tr>   
    <tr>
        <td class="formlabel">Your home address (no post office boxes please):</td>
      <td><input type="text" maxlength="30" name="streetaddress" size="17" class="coolform" onFocus="this.style.background='#E2F2FF'" onBlur="this.style.background='#F7F9FF'" value=""> 
          <span class="style1">*</span></td>
    </tr>
    <tr>
        <td class="formlabel">Your suburb:</td>
      <td><input type="text" maxlength="50" name="suburb" size="17" class="coolform" onFocus="this.style.background='#E2F2FF'" onBlur="this.style.background='#F7F9FF'" value=""> 
          <span class="style1">*</span></td>
    </tr>   
    <tr>
        <td class="formlabel">Your post code:</td>
      <td><input type="text" maxlength="4" name="postcode" size="17" onChange="isValidPostcode(this.value);" class="coolform" onFocus="this.style.background='#E2F2FF'" onBlur="this.style.background='#F7F9FF'" style="width:40px" value=""> 
          <span class="style1">*</span></td>
    </tr>   
    <tr valign=top>
        <td class="formlabel">State:<br><span style="font-size: 10px;">If you are not a resident of NSW please<br>call (02) 9288 2500.</span></td>
        <td><b>NSW</b></td>
    </tr>   
    <tr valign=top>
        <td class="formlabel">Your contact phone number (including area code):<br><span style="font-size: 10px;">If you are using a mobile phone please place the first two digits in the area code box, then continue the number in the home phone number box. Please enter your number without spaces or hyphens.</span></td>
        <td>( <input type="text" maxlength="2" name="phoneareacode" onChange="" onKeyUp="" size="17" class="coolform" onFocus="this.style.background='#E2F2FF'" onBlur="this.style.background='#F7F9FF';isValidPhoneAreaCode(this.value);updatePreview(this.form)" style="width: 40px;" value=""> )  <input type="text" maxlength="8" onChange="" onKeyUp="" name="phonenumber" onFocus="this.style.background='#E2F2FF'" onBlur="this.style.background='#F7F9FF';isValidPhone(this.value);updatePreview(this.form)" style="width:100px" class="coolform" value=""></td>
    </tr>   
    <tr>
        <td class="formlabel">Your email address:</td>
        <td><input type="text" maxlength="64" name="emailaddress" size="17" class="coolform" onFocus="this.style.background='#E2F2FF'" onBlur="this.style.background='#F7F9FF'" onChange="validEmail(this.value);" value=""> 
        * </td>
    </tr>
<tr valign=top>
    <td class="formlabel">Which classification do you want your ad to appear in?<br>
    <span style="font-size: 10px;">If your selection is not here please call (02) 4964 7656 to get more info about the classification you want.</span>
    </td>
    <td>
    <SELECT NAME="categoryid" class="coolform" onFocus="this.style.background='#E2F2FF'" onBlur="this.style.background='#F7F9FF'">  
        <option value="">Select</option>
        <option value="3340">Travel Accessories</option>
        <option value="3350">Water Sports & Gear</option>
        <option value="3360">Weddings and Occasions</option>
    </select>
    </td>
    </tr>
    <tr valign=top>
        <td class="formlabel">I am selling:<br><span style="font-size: 10px;">Eg. 'Bike', 'Book'</span></td>
        <td><input type="text" onKeyUp="updatePrSelling(this, this.value)" maxlength="24" name="sellingitem" size="17" class="coolform" style="text-transform:uppercase;" onFocus="this.style.background='#E2F2FF'" onBlur="this.style.background='#F7F9FF'" value=""></td>
    </tr>   
    <tr>
    
      <td class="formlabel">I am selling this item for: $<br>
        <span style="font-size: 10px;">Must not be more than $5,000</span></td>
            
        <td><input type="text" maxlength="6" name="price" onChange="" onKeyUp="updatePreview(this.form)" size="17" class="coolform" onFocus="this.style.background='#E2F2FF'" onBlur="this.style.background='#F7F9FF';isValidPrice(this.value);updatePreview(this.form)" value=""></td>
    </tr>
    <tr>
        <td class="formlabel">I am a private individual:<br>and I've read and agreed to<br>the <A href="#" onClick="window.open('TermsConditions.jsp','','toolbar=no,location=no,scrolling=auto,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=480,height=550,top=45,left=250');return false">terms and conditions</a></td>
        <td class="formlabel2"><input type="checkbox" class="coolform" onFocus="this.style.background='#E2F2FF'" onBlur="this.style.background='#F7F9FF'" style="width:20px;border : none;" name="privateindividual"  ></td>
    </tr>       
    <tr valign=top>
        <td class="formlabel">Ad text:<br>
        <div style="display:inline"><<input type="text" style="width:22px;border:none;background:white;color:red;text-align:center;" name="tCount" class="coolform"  value="0" >></div>
        <span style="font-size: 10px;"><br>
        max of 225 <br>
        characters</span>
        </td>
        <td><textarea id="adtxt" wrap="yes" class="coolform" name="text" onKeyUp="remainingCharacters(this, this.value, 100);updatePreview(this.form)" onChange="" onFocus="this.style.background='#F0F6FA'" onBlur="this.style.background='#F7F9FF'" ></textarea>
        </td>
    </tr>
    <tr>
        <td class="formlabel">Preview:</td>
        <td>
        <div class="previewPanel">
            <div class="previewWrapper">
                <div id="theitem"> </div>
                <div id="theAd"> </div>            
            </div>
        </div>
        </td>
    </tr>
    
    <tr>
        <TD align=center colspan=2><INPUT TYPE="image" SRC="/images/submit.gif" onClick="submitForm();return false;" ></td></tr>
    <tr>
        <td class="formlabel3" colspan="2">All advertising submitted via this site is subject to the publisher's <A href="#" onClick="window.open('TermsConditions.jsp','','toolbar=no,location=no,scrolling=auto,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=480,height=550,top=45,left=250');return false">terms and conditions.</A>
<br>If you would like to know more about our privacy policy, please <A href="#" onClick="window.open('PrivacyPolicy.html','','toolbar=no,location=no,scrolling=auto,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=480,height=470,top=45,left=250');return false">click here</a>
</TD></TR></TABLE><input type="hidden" name="_vDeckformid" value="437" /></FORM>
</body>

 

One thing I forgot to mention is that I would like to have the ad text (therefore the PDF file) set to 33mm wide and however tall it comes out.

Link to comment
https://forums.phpfreaks.com/topic/149403-help-with-classifieds-form/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.