API tools faq
paste
Advertisement
Guest User

hurr durr

a guest
Apr 20th, 2013
473
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 19.21 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <link rel="stylesheet" type="text/css" href="css/buildstyle.css" />
  5.         <title>Part 1 Form</title>
  6.         <!--<script src="js/OrderProcessingScripts.js" />-->
  7.         <script>
  8.             function submit(){
  9.                 var part1=submitPart1();
  10.                 var part2=submitPart2();
  11.                 var part3=submitPart3();
  12.                 var part4=submitPart4();
  13.                
  14.                 if(part1){
  15.                     if(part2){
  16.                         if(part3){
  17.                             if(part4){
  18.                                 window.location="Part2Receipt.html?"+document.getElementById("businessName").value+"?"+document.getElementById("firstName").value+"_"+document.getElementById("lastName").value+"?"+document.getElementById("pricing").value;
  19.                                 }
  20.                             }
  21.                         }
  22.                     }
  23.                 }
  24.             function submitPart1(){
  25.                 var pass=true;
  26.                 var firstName=document.getElementById("firstName").value;
  27.                 var lastName=document.getElementById("lastName").value;
  28.                 var contactAddress=document.getElementById("contactAddress").value;
  29.                 var contactCity=document.getElementById("contactCity").value;
  30.                 var contactState=document.getElementById("contactState").value;
  31.                 var contactZip=document.getElementById("contactZip").value;
  32.                 var contactPhone=document.getElementById("contactPhone").value;
  33.                 var contactEmail=document.getElementById("contactEmail").value;
  34.                
  35.                 //check everything
  36.                 if(firstName==""){ //check first name
  37.                     pass=false;
  38.                     document.getElementById("divFirstName").style.color="#FF0000";
  39.                     }
  40.                 else{
  41.                     pass=true;
  42.                     document.getElementById("divFirstName").style.color="#000000";
  43.                     }
  44.                 if(lastName==""){ //check last name
  45.                     pass=false;
  46.                     document.getElementById("divLastName").style.color="#FF0000";
  47.                     }
  48.                 else{
  49.                     pass=true;
  50.                     document.getElementById("divLastName").style.color="#000000";
  51.                     }
  52.                 if(contactAddress==""){ //check contact address
  53.                     pass=false;
  54.                     document.getElementById("divContactAddress").style.color="#FF0000";
  55.                     }
  56.                 else{
  57.                     pass=true;
  58.                     document.getElementById("divContactAddress").style.color="#000000";
  59.                     }
  60.                 if(contactCity==""){ //check contact city
  61.                     pass=false;
  62.                     document.getElementById("divContactCity").style.color="#FF0000";
  63.                     }
  64.                 else{
  65.                     pass=true;
  66.                     document.getElementById("divContactCity").style.color="#000000";
  67.                     }
  68.                 if(contactState==""){ //check contact state
  69.                     pass=false;
  70.                     document.getElementById("divContactState").style.color="#FF0000";
  71.                     }
  72.                 else{
  73.                     pass=true;
  74.                     document.getElementById("divContactState").style.color="#000000";
  75.                     }
  76.                 if(contactZip==""){ //check contact zip
  77.                     pass=false;
  78.                     document.getElementById("divContactZip").style.color="#FF0000";
  79.                     }
  80.                 else{
  81.                     pass=true;
  82.                     document.getElementById("divContactZip").style.color="#000000";
  83.                     }
  84.                
  85.                 //check that the phone has the correct number of digits and hypens
  86.                 var phoneFail=false;
  87.                
  88.                 //don't judge me for this horribe mess, for some reason it won't let me use || so I had to nest them
  89.                 if(contactPhone.length==12){
  90.                     if(contactPhone.charAt(3)=='-' && contactPhone.charAt(7)=='-'){
  91.                         for(var counter=0; counter<contactPhone.length; counter++){
  92.                             var currentNumber=contactPhone.charAt(counter);
  93.                             if(!(counter==3)){
  94.                                 if(!(counter==7)){
  95.                                     if(!(currentNumber=='0'))
  96.                                         if(!(currentNumber=='1'))
  97.                                             if(!(currentNumber=='2'))
  98.                                                 if(!(currentNumber=='3'))
  99.                                                     if(!(currentNumber=='4'))
  100.                                                         if(!(currentNumber=='5'))
  101.                                                             if(!(currentNumber=='6'))
  102.                                                                 if(!(currentNumber=='7'))
  103.                                                                     if(!(currentNumber=='8'))
  104.                                                                         if(!(currentNumber=='9'))
  105.                                                                             phoneFail=true;
  106.                                     }
  107.                                 }
  108.                             }
  109.                         }
  110.                     else phoneFail=true;
  111.                     }
  112.                 else phoneFail=true;
  113.                
  114.                 if(phoneFail){
  115.                     pass=false;
  116.                     document.getElementById("divContactPhone").style.color="#FF0000";
  117.                     }
  118.                 else{
  119.                     pass=true;
  120.                     document.getElementById("divContactPhone").style.color="#000000";
  121.                     }
  122.                
  123.                
  124.                 //check that the email has an @ sign and a valid extension
  125.                 var emailFail=false;
  126.                 var atPos=-1;
  127.                 var dotPos=-1;
  128.                
  129.                 for(var counter=0; counter<contactEmail.length; counter++){
  130.                     if(contactEmail.charAt(counter)=='@'){
  131.                         atPos=counter;
  132.                         }
  133.                     if(contactEmail.charAt(counter)=='.'){
  134.                         dotPos=counter;
  135.                         }
  136.                     }
  137.                
  138.                 if(atPos<1){
  139.                     emailFail=true;
  140.                     }
  141.                 if(dotPos>contactEmail.length-3){
  142.                     emailFail=true;
  143.                     }
  144.                 if(dotPos-atPos<3){
  145.                     emailFail=true;
  146.                     }
  147.                
  148.                 if(emailFail){
  149.                     pass=false;
  150.                     document.getElementById("divContactEmail").style.color="#FF0000";
  151.                     }
  152.                 else{
  153.                     pass=true;
  154.                     document.getElementById("divContactEmail").style.color="#000000";
  155.                     }
  156.                
  157.                 //handle everything being filled/correct
  158.                 if(pass){
  159.                     //make all the text fields read-only and gray them out
  160.                     document.getElementById("firstName").readOnly=true;
  161.                     document.getElementById("firstName").style.backgroundColor="#BBBBBB";
  162.                     document.getElementById("lastName").readOnly=true;
  163.                     document.getElementById("lastName").style.backgroundColor="#BBBBBB";
  164.                     document.getElementById("contactAddress").readOnly=true;
  165.                     document.getElementById("contactAddress").style.backgroundColor="#BBBBBB";
  166.                     document.getElementById("contactCity").readOnly=true;
  167.                     document.getElementById("contactCity").style.backgroundColor="#BBBBBB";
  168.                     document.getElementById("contactState").readOnly=true;
  169.                     document.getElementById("contactState").style.backgroundColor="#BBBBBB";
  170.                     document.getElementById("contactZip").readOnly=true;
  171.                     document.getElementById("contactZip").style.backgroundColor="#BBBBBB";
  172.                     document.getElementById("contactPhone").readOnly=true;
  173.                     document.getElementById("contactPhone").style.backgroundColor="#BBBBBB";
  174.                     document.getElementById("contactEmail").readOnly=true;
  175.                     document.getElementById("contactEmail").style.backgroundColor="#BBBBBB";
  176.                     }
  177.                 if(pass){
  178.                     return true;
  179.                     }
  180.                 else{
  181.                     return false;
  182.                     }
  183.                 }
  184.             function reuseInfo(){
  185.                 document.getElementById("businessAddress").value=document.getElementById("contactAddress").value;
  186.                 document.getElementById("businessCity").value=document.getElementById("contactCity").value;
  187.                 document.getElementById("businessState").value=document.getElementById("contactState").value;
  188.                 document.getElementById("businessZip").value=document.getElementById("contactZip").value;
  189.                 }
  190.             function submitPart2(){
  191.                 var pass=true;
  192.                 var businessName=document.getElementById("businessName").value;
  193.                 var businessAddress=document.getElementById("businessAddress").value;
  194.                 var businessCity=document.getElementById("businessCity").value;
  195.                 var businessState=document.getElementById("businessState").value;
  196.                 var businessZip=document.getElementById("businessZip").value;
  197.                 var businessPhone=document.getElementById("businessPhone").value;
  198.                 var businessWebsite=document.getElementById("businessWebsite").value;
  199.                
  200.                 //check everything
  201.                 if(businessName==""){ //check business name
  202.                     pass=false;
  203.                     document.getElementById("divBusinessName").style.color="#FF0000";
  204.                     }
  205.                 else{
  206.                     pass=true;
  207.                     document.getElementById("divBusinessName").style.color="#000000";
  208.                     }
  209.                 if(businessAddress==""){ //check business address
  210.                     pass=false;
  211.                     document.getElementById("divBusinessAddress").style.color="#FF0000";
  212.                     }
  213.                 else{
  214.                     pass=true;
  215.                     document.getElementById("divBusinessAddress").style.color="#000000";
  216.                     }
  217.                 if(businessCity==""){ //check business city
  218.                     pass=false;
  219.                     document.getElementById("divBusinessCity").style.color="#FF0000";
  220.                     }
  221.                 else{
  222.                     pass=true;
  223.                     document.getElementById("divBusinessCity").style.color="#000000";
  224.                     }
  225.                 if(businessState==""){ //check business state
  226.                     pass=false;
  227.                     document.getElementById("divBusinessState").style.color="#FF0000";
  228.                     }
  229.                 else{
  230.                     pass=true;
  231.                     document.getElementById("divBusinessState").style.color="#000000";
  232.                     }
  233.                 if(businessZip==""){ //check business zip
  234.                     pass=false;
  235.                     document.getElementById("divBusinessZip").style.color="#FF0000";
  236.                     }
  237.                 else{
  238.                     pass=true;
  239.                     document.getElementById("divBusinessZip").style.color="#000000";
  240.                     }
  241.                 if(businessWebsite==""){ //check business website
  242.                     pass=false;
  243.                     document.getElementById("divBusinessWebsite").style.color="#FF0000";
  244.                     }
  245.                 else{
  246.                     pass=true;
  247.                     document.getElementById("divBusinessWebsite").style.color="#000000";
  248.                     }
  249.                
  250.                 //check that the phone has the correct number of digits and hypens
  251.                 var phoneFail=false;
  252.                
  253.                 //don't judge me for this horribe mess, for some reason it won't let me use || so I had to nest them
  254.                 if(businessPhone.length==12){
  255.                     if(businessPhone.charAt(3)=='-' && businessPhone.charAt(7)=='-'){
  256.                         for(var counter=0; counter<businessPhone.length; counter++){
  257.                             var currentNumber=businessPhone.charAt(counter);
  258.                             if(!(counter==3)){
  259.                                 if(!(counter==7)){
  260.                                     if(!(currentNumber=='0'))
  261.                                         if(!(currentNumber=='1'))
  262.                                             if(!(currentNumber=='2'))
  263.                                                 if(!(currentNumber=='3'))
  264.                                                     if(!(currentNumber=='4'))
  265.                                                         if(!(currentNumber=='5'))
  266.                                                             if(!(currentNumber=='6'))
  267.                                                                 if(!(currentNumber=='7'))
  268.                                                                     if(!(currentNumber=='8'))
  269.                                                                         if(!(currentNumber=='9'))
  270.                                                                             phoneFail=true;
  271.                                     }
  272.                                 }
  273.                             }
  274.                         }
  275.                     else phoneFail=true;
  276.                     }
  277.                 else phoneFail=true;
  278.                
  279.                 if(phoneFail){
  280.                     pass=false;
  281.                     document.getElementById("divBusinessPhone").style.color="#FF0000";
  282.                     }
  283.                 else{
  284.                     pass=true;
  285.                     document.getElementById("divBusinessPhone").style.color="#000000";
  286.                     }
  287.                    
  288.                 //handle everything being filled/correct
  289.                 if(pass){
  290.                     //make all the text fields read-only and gray them out
  291.                     document.getElementById("businessName").readOnly=true;
  292.                     document.getElementById("businessName").style.backgroundColor="#BBBBBB";
  293.                     document.getElementById("businessAddress").readOnly=true;
  294.                     document.getElementById("businessAddress").style.backgroundColor="#BBBBBB";
  295.                     document.getElementById("businessCity").readOnly=true;
  296.                     document.getElementById("businessCity").style.backgroundColor="#BBBBBB";
  297.                     document.getElementById("businessState").readOnly=true;
  298.                     document.getElementById("businessState").style.backgroundColor="#BBBBBB";
  299.                     document.getElementById("businessZip").readOnly=true;
  300.                     document.getElementById("businessZip").style.backgroundColor="#BBBBBB";
  301.                     document.getElementById("businessPhone").readOnly=true;
  302.                     document.getElementById("businessPhone").style.backgroundColor="#BBBBBB";
  303.                     document.getElementById("businessWebsite").readOnly=true;
  304.                     document.getElementById("businessWebsite").style.backgroundColor="#BBBBBB";
  305.                     }
  306.                    
  307.                 if(pass){
  308.                     return true;
  309.                     }
  310.                 else{
  311.                     return false;
  312.                     }
  313.                 }
  314.             function switchField(input){
  315.                 var field=document.getElementById(input).value;
  316.                
  317.                 if(field=="1"){
  318.                     document.getElementById(input).value="0";
  319.                     }
  320.                 else{
  321.                     document.getElementById(input).value="1";
  322.                     }
  323.                    
  324.                 updatePrice();
  325.                 }
  326.             function updatePrice(){
  327.                 var newPrice=0;
  328.                 document.getElementById("pricing").value=0;
  329.                
  330.                 if(document.getElementById("hiddenWeb").value=="1"){
  331.                     newPrice+=5;
  332.                     }
  333.                 if(document.getElementById("hiddenEmail").value=="1"){
  334.                     newPrice+=6;
  335.                     }
  336.                 if(document.getElementById("hiddenFacebook").value=="1"){
  337.                     newPrice+=7;
  338.                     }
  339.                 if(document.getElementById("hiddenLinkedIn").value=="1"){
  340.                     newPrice+=8;
  341.                     }
  342.                 if(document.getElementById("hiddenTwitter").value=="1"){
  343.                     newPrice+=9;
  344.                     }
  345.                
  346.                 document.getElementById("pricing").value=newPrice;
  347.                 }
  348.             function emptyInfo(){
  349.                 document.getElementById("businessAddress").value="";
  350.                 document.getElementById("businessCity").value="";
  351.                 document.getElementById("businessState").value="";
  352.                 document.getElementById("businessZip").value="";
  353.                 }
  354.             function submitPart4(){
  355.                 var month=document.getElementById("expireMonth").options[document.getElementById("expireMonth").selectedIndex].value;
  356.                 var day=document.getElementById("expireDay").options[document.getElementById("expireDay").selectedIndex].value;
  357.                 var year=document.getElementById("expireYear").options[document.getElementById("expireYear").selectedIndex].value;
  358.                 var cardNumber=document.getElementById("cardNumber").value;
  359.                 var cardIssuer=document.getElementById("cardIssuer").value;
  360.                
  361.                 //I'm not sure what kind of input you want for CCverify, the assignment doesn't say
  362.                 //so I'm just putting in all the information as seperate variables
  363.                 /*
  364.                 var invalid=CCverify(cardIssuer, cardNumber, month, day, year);
  365.                 if(invalid){
  366.                     document.getElementById("cardNumber").style.color="#FF0000";
  367.                     return false;
  368.                     }
  369.                 else{
  370.                     document.getElementById("cardNumber").style.color="#000000";
  371.                     return true;
  372.                     }
  373.                 */
  374.                 return true;
  375.                 }
  376.             function submitPart3(){
  377.                 if(document.getElementById("pricing").value==0){
  378.                     document.getElementById("services").style.color="#FF0000";
  379.                     return false;
  380.                     }
  381.                 else{
  382.                     document.getElementById("services").style.color="#000000";
  383.                     return true;
  384.                     }
  385.                 }
  386.         </script>
  387.     </head>
  388.     <body>
  389.         <form>
  390.             <input type="hidden" id="hiddenWeb" value="" />
  391.             <input type="hidden" id="hiddenEmail" value="" />
  392.             <input type="hidden" id="hiddenFacebook" value="" />
  393.             <input type="hidden" id="hiddenLinkedIn" value="" />
  394.             <input type="hidden" id="hiddenTwitter" value="" />
  395.         </form>
  396.         <div id="mainForm"><form>
  397.             <div id="divContact">
  398.                 <!--first name, last name, street address, city, state, zip, phone and email-->
  399.                 <div id="divFirstName">      First Name:        <input type="text" id="firstName" value="" />      </div>
  400.                 <div id="divLastName">       Last Name:         <input type="text" id="lastName" value="" />       </div>
  401.                 <div id="divContactAddress"> Address:           <input type="text" id="contactAddress" value="" /> </div>
  402.                 <div id="divContactCity">    City:              <input type="text" id="contactCity" value="" />    </div>
  403.                 <div id="divContactState">   State:             <input type="text" id="contactState" value="" />   </div>
  404.                 <div id="divContactZip">     Zip Code:          <input type="text" id="contactZip" value="" />     </div>
  405.                 <div id="divContactPhone">   Phone:             <input type="text" id="contactPhone" value="" />   </div>
  406.                 <div id="divContactEmail">   Email:             <input type="text" id="contactEmail" value="" />   </div>
  407.             </div> <br />
  408.             <div id="divBusiness">
  409.                 <input type="checkbox" name="useInfo" id="useInfo" value="reuse" onClick="if (this.checked) {reuseInfo()} else{emptyInfo()}" />Use contact information?
  410.                 <div id="divBusinessName">   Business Name:     <input type="text" id="businessName" value="" />   </div>
  411.                 <div id="divBusinessAddress">Business Address:  <input type="text" id="businessAddress" value="" /></div>
  412.                 <div id="divBusinessCity">   Business City:     <input type="text" id="businessCity" value="" />   </div>
  413.                 <div id="divBusinessState">  Business State:    <input type="text" id="businessState" value="" />  </div>
  414.                 <div id="divBusinessZip">    Business Zip Code: <input type="text" id="businessZip" value="" />    </div>
  415.                 <div id="divBusinessPhone">  Business Phone:    <input type="text" id="businessPhone" value="" />  </div>
  416.                 <div id="divBusinessWebsite">Business Website:  <input type="text" id="businessWebsite" value="" /></div>
  417.             </div> <br />
  418.             <div id="services">
  419.                 Services Available: <br />
  420.                 <input id="web" type="image" src="img/Computer-icon.png" width="50" onclick="switchField('hiddenWeb'); return false;"/><span id="webDev"> Web Development - $5</span><br />
  421.                 <input id="email" type="image" src="img/Email-icon.png" width="50" onclick="switchField('hiddenEmail'); return false;"/><span id="emailMarketing"> Email Marketing - $6</span><br />
  422.                 <input id="facebook" type="image" src="img/Facebook-icon.png" width="50" onclick="switchField('hiddenFacebook'); return false;"/><span id="facebookIntegration"> Facebook Integration - $7</span><br />
  423.                 <input id="linkedin" type="image" src="img/LinkedIn-icon.png" width="50" onclick="switchField('hiddenLinkedIn'); return false;"/><span id="linkedinListings"> LinkedIn Listings - $8</span><br />
  424.                 <input id="twitter" type="image" src="img/Twitter-icon.png" width="50" onclick="switchField('hiddenTwitter'); return false;"/><span id="twitterBranding"> Twitter Branding - $9</span><br /><br />
  425.                 Price (USD): <input style="background-color:#BBBBBB" type="text" id="pricing" value="0" />
  426.             </div>
  427.             <br />
  428.             <div id="creditCardInfo">
  429.                 Credit Card Issuer:
  430.                 <select id="cardIssuer">
  431.                     <option value="Discover">Discover</option>
  432.                     <option value="AmericanExpress">American Express</option>
  433.                     <option value="Visa">Visa</option>
  434.                     <option value="Mastercard">Mastercard</option>
  435.                 </select> <br />
  436.                 Credit Card Number:
  437.                 <input id="cardNumber" type="text" value="" /> <br />
  438.                 Exp.:
  439.                 <select id="expireMonth">
  440.                     <option value="1">1</option>
  441.                     <option value="2">2</option>
  442.                     <option value="3">3</option>
  443.                     <option value="4">4</option>
  444.                     <option value="5">5</option>
  445.                     <option value="6">6</option>
  446.                     <option value="7">7</option>
  447.                     <option value="8">8</option>
  448.                     <option value="9">9</option>
  449.                     <option value="10">10</option>
  450.                     <option value="11">11</option>
  451.                     <option value="12">12</option>
  452.                 </select>
  453.                 /
  454.                 <select id="expireDay">
  455.                     <option value="1">1</option>
  456.                     <option value="2">2</option>
  457.                     <option value="3">3</option>
  458.                     <option value="4">4</option>
  459.                     <option value="5">5</option>
  460.                     <option value="6">6</option>
  461.                     <option value="7">7</option>
  462.                     <option value="8">8</option>
  463.                     <option value="9">9</option>
  464.                     <option value="10">10</option>
  465.                     <option value="11">11</option>
  466.                     <option value="12">12</option>
  467.                     <option value="13">13</option>
  468.                     <option value="14">14</option>
  469.                     <option value="15">15</option>
  470.                     <option value="16">16</option>
  471.                     <option value="17">17</option>
  472.                     <option value="18">18</option>
  473.                     <option value="19">19</option>
  474.                     <option value="20">20</option>
  475.                     <option value="21">21</option>
  476.                     <option value="22">22</option>
  477.                     <option value="23">23</option>
  478.                     <option value="24">24</option>
  479.                     <option value="25">25</option>
  480.                     <option value="26">26</option>
  481.                     <option value="27">27</option>
  482.                     <option value="28">28</option>
  483.                     <option value="29">29</option>
  484.                     <option value="30">30</option>
  485.                     <option value="31">31</option>
  486.                 </select>
  487.                 /
  488.                 <select id="expireYear">
  489.                     <option value="2013">2013</option>
  490.                     <option value="2014">2014</option>
  491.                     <option value="2015">2015</option>
  492.                     <option value="2016">2016</option>
  493.                     <option value="2017">2017</option>
  494.                     <option value="2018">2018</option>
  495.                 </select>
  496.             </div>
  497.         </form>
  498.         <br />
  499.         <button onclick="submit()">Submit Information</button></div>
  500.     </body>
  501. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!