www.webdeveloper.com
Results 1 to 2 of 2

Thread: Help needed for unorthodox price generating form

  1. #1
    Join Date
    Jul 2012
    Posts
    3

    Help needed for unorthodox price generating form

    I am currently developing a new website for a well-established small business to replace their old, poorly designed one. Run by one person with a team of three full-time employees, the owner inevitably misses many potential client phone calls whilst out conducting business.
    For this reason I am creating an automatic quote generator on the website, that will email the given quote, services selected and details given by the user to the owner, so that he can follow up on them later.
    So far, I have developed a button which when clicked, grows to the centre of the page and gives services for the user to choose. Now I am at the tricky part.
    I need the selected services to produce values that will then be added together and appear in a div of my choosing, then i need VAT to be calculated from that (20%) and displayed in a div below, then both values to be added and give the final value in a div below that.
    I search and search google, and all the forums it points me to, but I cannot find an example similar enough that I can learn from and apply it. There are various places that have small parts of what I'm trying to do but combining them won't really help and may prove detrimental to the sites loading times, experience etc.
    Here is my code for the pop-out interface. I have modified it slightly and should open almost perfectly as is when saved with any text editor. Slight defect with the right div but there is no problem when it is on the website.
    Any help would be greatly appreciated, hidden resources? good intermediate articles? (the beginner ones are too simple for this task)
    Furthermore, from what I have researched thus far, I understand that I will need to use PHP to send automated emails to both the owner and a customary "Thanks.. we'll be in touch soon" email to the potential client. Do I need to modify my JS/jQuery in any way to allow that or can I develop this to a functional state before I get stuck in to that part? Also do the calculated values have to be inserted into a form input field for them to be sent to the server and subsequently owner & client?
    Thanks in advance for any and all help.
    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">
    <title>Untitled Document</title>
    <script type="text/javascript" src="jquery.js"></script>
    <style type="text/css">
    body { width:100%; height:100%; text-align:center; margin:0px; }
    div#bodycontainer { position:absolute; min-width:100%; height:100%; padding:0px; z-index:100; }
    div.centerdiv { position:relative; width:1100px; height:100%; margin:0 auto; border-left:solid 2px #ddd; border-right:solid 2px #ddd; background-image:url(images/transport_background_alt.png); overflow:visible; background-position:0px 0px; background-repeat:no-repeat; z-index:1 }
    div#getaquote { width:320px; height:55px; border:solid 1px #516c84; border-radius:15px; float:right; background:url(images/quotebkgd.png) no-repeat #fff; background-position:500px -50px; padding:none; }
    button#quote { width:300px; height:50px; margin:0px; font-family:Arial, Helvetica, sans-serif; font-size:22px; color:#516c84; background-color:#fff; border:none; }
    p#quotetitle { position:relative; top:20px; left:20px; width:500px; height:100px; font-family:"Bookman Old Style", Times New Roman, Times, serif; font-size:28px; color:#516c84; margin:0px; text-align:left; }
    div#callus { position:absolute; top:435px; width:340px; height:110px; font-family:"Bookman Old Style", Times New Roman, Times, serif; float:left;/*border:solid 1px #000;*/ }
    div#emailus { position:absolute; top:435px; left:340px; width:370px; height:110px; font-family:"Bookman Old Style", Times New Roman, Times, serif; float:left; }
    img.icon { float:left; }
    p#email { position:absolute; top:10px; left:120px; font-size:30px; font-weight:bold; color:#516c84; margin:0px; line-height:34px; }
    p#smallertxt { position:absolute; top:50px; left:100px; font-size:22px; color:#516c84; margin:0px; }
    p#call { position:absolute; top:10px; left:105px; font-size:28px; font-weight:bold; color:#516c84; margin:0px; line-height:34px; }
    div#minbutton { width:52px; height:52px; position:absolute; top:15px; left:915px;/*border:solid 1px #000;*/ }
    div#minbutton a:hover img { background:#516c84; }
    div.quotebuttons { position:absolute; top:70px; left:15px; width:200px; height:auto; }
    button#servcat1 { position:relative; display:block; float:left; width:200px; height:60px; margin-top:7px; font-family:"Bookman Old Style", Times New Roman, Times, serif; font-size:22px; color:#516c84; background:#fff; border:outset 3px #516c84; border-radius:5px; }
    button#servcat1:hover { background:#516c84; color:#fff; }
    button#servcat1:click {
    background:#516c84;
    color:#fff;
    }
    button#servcat2 { position:relative; display:block; float:left; width:200px; height:60px; margin-top:7px; font-family:"Bookman Old Style", Times New Roman, Times, serif; font-size:22px; color:#516c84; background:#fff; border:outset 3px #516c84; border-radius:5px; }
    button#servcat2:hover { background:#516c84; color:#fff; }
    button#servcat3 { position:relative; display:block; float:left; width:200px; height:60px; margin-top:7px; font-family:"Bookman Old Style", Times New Roman, Times, serif; font-size:22px; color:#516c84; background:#fff; border:outset 3px #516c84; border-radius:5px; }
    button#servcat3:hover { background:#516c84; color:#fff; }
    button#servcat4 { position:relative; display:block; float:left; width:200px; height:60px; margin-top:7px; font-family:"Bookman Old Style", Times New Roman, Times, serif; font-size:22px; color:#516c84; background:#fff; border:outset 3px #516c84; border-radius:5px; }
    button#servcat4:hover { background:#516c84; color:#fff; }
    button#servcat5 { position:relative; display:block; float:left; width:200px; height:60px; margin-top:7px; font-family:"Bookman Old Style", Times New Roman, Times, serif; font-size:22px; color:#516c84; background:#fff; border:outset 3px #516c84; border-radius:5px; }
    button#servcat5:hover { background:#516c84; color:#fff; }
    div#transportopt { position:absolute; top:73px; left:230px; width:500px; height:330px; border:outset 3px #000; }
    div#storageopt { position:absolute; top:73px; left:230px; width:500px; height:330px; border:outset 3px #000; }
    div#freightopt { position:absolute; top:73px; left:230px; width:500px; height:330px; border:outset 3px #000; }
    div#relocationopt { position:absolute; top:73px; left:230px; width:500px; height:330px; border:outset 3px #000; }
    div#exhibitionopt { position:absolute; top:73px; left:230px; width:500px; height:330px; border:outset 3px #000; }
    div#quoteelements { position:absolute; left:750px; width:auto; height:auto; left:750px; }
    form#form { position:absolute; top:270px; width:205px; height:225px; /*border:solid 1px #000;*/
    font-family:"Bookman Old Style", Times New Roman, Times, serif; font-size:20px; color:#fff; line-height:30px; }
    form#quoteform { background:none; }
    input.formdata { height:30px; width:200px; border-radius:5px; }
    input#submitbtn { position:relative; display:block; float:right; width:130px; height:50px; margin-top:7px; font-family:"Bookman Old Style", Times New Roman, Times, serif; font-size:22px; background:#516c84; color:#fff; border:outset 3px #516c84; border-radius:5px; }
    input#submitbtn:hover { color:#516c84; background:#fff; border-radius:5px; }
    div#quotecalc { position:absolute; top:63px; width:205px; height:210px; }
    div#total { width:200px; height:52px; margin-top:7px; background:#516c84; border-radius:5px; border:outset 1px #fff; padding:4px; }
    div#tax { width:200px; height:52px; margin-top:7px; background:#516c84; border-radius:5px; border:outset 1px #fff; padding:4px; }
    div#grandtotal { width:200px; height:52px; margin-top:7px; background:#516c84; border-radius:5px; border:outset 1px #fff; padding:4px; }
    p.calctitles { font-family:"Bookman Old Style", Times New Roman, Times, serif; font-weight:bold; color:#fff; text-align:left; margin-left:5px; margin-top:0px; text-decoration:underline; }
    p#numberprice { font-family:"Bookman Old Style", Times New Roman, Times, serif; font-weight:bold; font-size:30px; color:#fff; text-align:right; text-decoration:underline; margin-right:5px; margin-top:-20px; }
    </style>
    </head><body>
    <div id="bodycontainer">
    <div id="getaquote">
    <a>
    <button id="quote"> <strong>Get A Quote Now</strong></br>
    </button>
    </a>
    <p id="quotetitle"> <strong>Choose The Services You Require:</strong> </p>
    <div id="callus"> <img class="icon" src="images/phoneicon.gif" />
    <p id="call"> 0208 208 4411 </br>
    07850 495 804 </p>
    </div>

  2. #2
    Join Date
    Jul 2012
    Posts
    3

    Here is the rest of the code, it wouldn't all fit in one post:

    Code:
    <div id="emailus"> <img class="icon" src="images/aticon.gif" />
    <p id="email"> EMAIL: INFO
    <p id="smallertxt"> <strong>BelmontTransport.com</strong> </p>
    </p>
    </div>
    <div id="minbutton"> <a><img class="minimize" src="images/minimizebutton.png" /></a> </div>
    <div class="quotebuttons"> <a>
    <button id="servcat1"> <strong>Transport</strong> </button>
    </a> <a>
    <button id="servcat2"> <strong>Storage</strong> </button>
    </a> <a>
    <button id="servcat3"> <strong>Freight</strong> </button>
    </a> <a>
    <button id="servcat4"> <strong>Relocation</strong> </button>
    </a> <a>
    <button id="servcat5"> <strong>Exhibition</strong> </button>
    </a> </div>
    <div id="transportopt">
    <div id="dedicatedtransport" onclick="addselected">
    <input type="checkbox" name="options" onclick="options" value=250>
    Dedicated Transport
    </input>
    </div>
    <div id="commercialtransport"> Commercial Transport </div>
    </div>
    <div id="storageopt"> This is where storage options are displayed </div>
    <div id="freightopt"> This is where freight options are displayed </div>
    <div id="relocationopt"> This is where relocation options are displayed </div>
    <div id="exhibitionopt"> This is where exhibition options are displayed </div>
    <div id="quoteelements">
    <form id="form">
    <strong>Name:</strong>
    <input class="formdata" type="text" name="name">
    <strong>Business:</strong>
    <input class="formdata" type="text" name="business">
    <strong>Email Address:</strong>
    <input class="formdata" type="text" name="email">
    <a>
    <input id="submitbtn" type="submit" value="Get Quote">
    </a>
    </form>
    <div id="quotecalc">
    <div id="total">
    <p class="calctitles"> Sub-Total </p>
    <p id="stresult"> WOULD LIKE SUB TOTAL HERE </p>
    </div>
    <div id="tax">
    <p class="calctitles"> VAT </p>
    </div>
    <div id="grandtotal">
    <p class="calctitles"> Grand Total </p>
    <p id="numberprice"> </p>
    </div>
    </div>
    </div>
    <script type="text/javascript">
    ////////////*THESE ARE WHERE I HAVE TRIED A FEW METHODS TO ACHIEVE THE CALCULATIONS
    /*var dedicatedtransport=250;
    var commercialtransport=175;
    var quote="";*/
    
    /*function identify(tru,fals)
    {
    x=(dedicatedtransport+commercialtransport)	
    
    };*/
    
    /*function identify()
    {
    if(options.checked=1)
    alert("Thanks");///////WAS TRYING TO TEST IF THE FUNCTION WORKED BY DISPLAYING AN ALERT BOX
    return true;
    };
    
    
    function addselected()
    {
    var x=document.getElementById("dtprice").value;
    var y=document.getElementById("ctprice").value;
    z=(x+y);
    document.getElementById("numberprice").innerHTML="&pound;"+"z";
    };
    
    /*document.getElementById("numberprice").innerHTML=identify();*/
    
    
    $(document).ready(function(){
    $("#quotetitle").hide();//////////WOULD IT BE BETTER TO SET THE OBJECTS 
    $("#callus").hide();//////////////Z-INDEX TO A VALUE BEHIND THE PAGE RATHER
    $("#emailus").hide();/////////////THAN HIDING IT ALL? HIDING IT MAKES THE 
    $(".quotebuttons").hide();////////PAGE EXTREMELY MESSY WHEN THE CODE IS NOT
    $("#minbutton").hide();///////////LIVE.
    $("#transportopt").hide();
    $("#storageopt").hide();
    $("#freightopt").hide();
    $("#relocationopt").hide();
    $("#exhibitionopt").hide();
    $("#quoteelements").hide();
    });
    
    $("#quote").click(function(){
    $("#getaquote").animate({height:"550px",position:"absolute",top:"125px"});
    $("#getaquote").animate({width:"980px",left:"-245px"})
    $("#quotetitle").show(1000);
    $("#getaquote").css({"border-style":"solid","border-width":"2px","border-color":"#516c84"});
    $("#quote").hide(500);
    $("#bodytext").fadeTo(2500,0.15);
    $("#callus").show(1000);
    $("#emailus").show(1000);
    $(".quotebuttons").show(3000);
    $("#minbutton").show(1500);
    
    /*$("#bodytext").css({"background":"#516c84"});*/
    
    
    });
    
    $("#minbutton").click(function(){
    $("#getaquote").animate({width:"320px",left:"435px"});
    $("#getaquote").animate({height:"55px",position:"absolute",top:"65px"});
    $("#quotetitle").hide();
    $("#getaquote").css({"border-style":"none"});
    /*$("#getaquote").css({"border-style":"solid","border-width":"2px","border-color":"#516c84"});*/
    $("#quote").show(2000);
    $("#bodytext").fadeTo(2500,1);
    $("#callus").hide(1000);
    $("#emailus").hide(1000);
    $(".quotebuttons").hide();
    $("#minbutton").hide();
    $("#transportopt").hide();
    $("#storageopt").hide();
    $("#freightopt").hide();
    $("#relocationopt").hide();
    $("#exhibitionopt").hide();
    $("#quoteelements").hide();
    
    });
    
    $("#servcat1").click(function(){
    $("#transportopt").show();
    $("#storageopt").hide();
    $("#freightopt").hide();
    $("#relocationopt").hide();
    $("#exhibitionopt").hide();
    $("#quoteelements").show();
    
    });
    
    $("#servcat2").click(function(){
    $("#transportopt").hide();
    $("#storageopt").show();
    $("#freightopt").hide();
    $("#relocationopt").hide();
    $("#exhibitionopt").hide();
    $("#quoteelements").show();
    
    });
    
    $("#servcat3").click(function(){
    $("#transportopt").hide();
    $("#storageopt").hide();
    $("#freightopt").show();
    $("#relocationopt").hide();
    $("#exhibitionopt").hide();
    $("#quoteelements").show();
    
    });
    
    $("#servcat4").click(function(){
    $("#transportopt").hide();
    $("#storageopt").hide();
    $("#freightopt").hide();
    $("#relocationopt").show();
    $("#exhibitionopt").hide();
    $("#quoteelements").show();
    
    });
    
    $("#servcat5").click(function(){
    $("#transportopt").hide();
    $("#storageopt").hide();
    $("#freightopt").hide();
    $("#relocationopt").hide();
    $("#exhibitionopt").show();
    $("#quoteelements").show(1000);
    
    });
    </script>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles