Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    Dec 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Help with form calculation please

    Let me start out by letting you know that I am a slow learner with Javascript. I can cut and paste scripts and modify them to some extent. I am trying to set up an order form. On this order form I have some dynamic comboboxes that when a customer selects something in the first box it populates the next one and then based on that selection populates the third box. The problem is that the second combobox I need to assign currency values also so that when one of the options are selected the currency value is updated in the total field. Also there is a check box that when checked should add a currency value of 10.00. I would also like for the total field to be protected in a way that the total can't be changed for obvious reasons. Any help with this would be greatly appreciated.

    Here is my code:
    Code:
    <script type="text/javascript">
    var arrItems1 = new Array();
    var arrItemsGrp1 = new Array();
    
    arrItems1[0] = "8 Hour Time Window $50";
    arrItemsGrp1[0] = 1;
    arrItems1[1] = "4 Hour Time Window $60";
    arrItemsGrp1[1] = 1;
    arrItems1[2] = "2 Hour Time Window $85";
    arrItemsGrp1[2] = 1;
    arrItems1[3] = "Specific Time $100";
    arrItemsGrp1[3] = 1;
    
    arrItems1[4] = "8 Hour Time Window $75";
    arrItemsGrp1[4] = 2;
    arrItems1[5] = "4 Hour Time Window $85";
    arrItemsGrp1[5] = 2;
    arrItems1[6] = "2 Hour Time Window $100";
    arrItemsGrp1[6] = 2;
    arrItems1[7] = "Specific Time $150";
    arrItemsGrp1[7] = 2;
    
    
    var arrItems2 = new Array();
    var arrItemsGrp2 = new Array();
    
    arrItems2[21] = "8am - 4pm";
    arrItemsGrp2[21] = 0
    arrItems2[22] = "9am - 5pm";
    arrItemsGrp2[22] = 0
    arrItems2[23] = "10am - 6pm";
    arrItemsGrp2[23] = 0
    arrItems2[24] = "11am - 7pm";
    arrItemsGrp2[24] = 0
    arrItems2[25] = "12pm - 8pm";
    arrItemsGrp2[25] = 0
    arrItems2[26] = "1pm - 9pm";
    arrItemsGrp2[26] = 0
    
    arrItems2[31] = "8am - 12pm";
    arrItemsGrp2[31] = 1
    arrItems2[32] = "9am - 1pm";
    arrItemsGrp2[32] = 1
    arrItems2[33] = "10am - 2pm";
    arrItemsGrp2[33] = 1
    arrItems2[34] = "11am - 3pm";
    arrItemsGrp2[34] = 1
    arrItems2[35] = "12pm - 4pm";
    arrItemsGrp2[35] = 1
    arrItems2[36] = "1pm - 5pm";
    arrItemsGrp2[36] = 1
    arrItems2[37] = "2pm - 6pm";
    arrItemsGrp2[37] = 1
    arrItems2[38] = "3pm - 7pm";
    arrItemsGrp2[38] = 1
    arrItems2[39] = "4pm - 8pm";
    arrItemsGrp2[39] = 1
    arrItems2[40] = "5pm - 9pm";
    arrItemsGrp2[40] = 1
    
    arrItems2[300] = "8am - 10am";
    arrItemsGrp2[300] = 2
    arrItems2[301] = "9am - 11am";
    arrItemsGrp2[301] = 2
    arrItems2[302] = "10am - 12pm";
    arrItemsGrp2[302] = 2
    arrItems2[303] = "11am - 1pm";
    arrItemsGrp2[303] = 2
    arrItems2[304] = "12pm - 2pm";
    arrItemsGrp2[304] = 2
    arrItems2[305] = "1pm - 3pm";
    arrItemsGrp2[305] = 2
    arrItems2[306] = "2pm - 4pm";
    arrItemsGrp2[306] = 2
    arrItems2[307] = "3pm - 5pm";
    arrItemsGrp2[307] = 2
    arrItems2[308] = "4pm - 6pm";
    arrItemsGrp2[308] = 2
    arrItems2[309] = "5pm - 7pm";
    arrItemsGrp2[309] = 2
    arrItems2[310] = "6pm - 8pm";
    arrItemsGrp2[310] = 2
    arrItems2[311] = "7pm - 9pm";
    arrItemsGrp2[311] = 2
    
    arrItems2[500] = "8am - 12pm";
    arrItemsGrp2[500] = 5
    arrItems2[501] = "9am - 1pm";
    arrItemsGrp2[501] = 5
    arrItems2[503] = "10am - 2pm";
    arrItemsGrp2[503] = 5
    arrItems2[504] = "11am - 3pm";
    arrItemsGrp2[504] = 5
    arrItems2[505] = "12pm - 4pm";
    arrItemsGrp2[505] = 5
    arrItems2[506] = "1pm - 5pm";
    arrItemsGrp2[506] = 5
    arrItems2[507] = "2pm - 6pm";
    arrItemsGrp2[507] = 5
    arrItems2[508] = "3pm - 7pm";
    arrItemsGrp2[508] = 5
    arrItems2[509] = "4pm - 8pm";
    arrItemsGrp2[509] = 5
    arrItems2[510] = "5pm - 9pm";
    arrItemsGrp2[510] = 5
    
    arrItems2[103] = "8am - 4pm";
    arrItemsGrp2[103] = 4
    arrItems2[104] = "9am - 5pm";
    arrItemsGrp2[104] = 4
    arrItems2[105] = "10am - 6pm";
    arrItemsGrp2[105] = 4
    arrItems2[106] = "11am - 7pm";
    arrItemsGrp2[106] = 4
    arrItems2[107] = "12pm - 8pm";
    arrItemsGrp2[107] = 4
    arrItems2[108] = "1pm - 9pm";
    arrItemsGrp2[108] = 4
    
    
    arrItems2[600] = "8am - 10am";
    arrItemsGrp2[600] = 6
    arrItems2[601] = "9am - 11am";
    arrItemsGrp2[601] = 6
    arrItems2[602] = "10am - 12pm";
    arrItemsGrp2[602] = 6
    arrItems2[603] = "11am - 1pm";
    arrItemsGrp2[603] = 6
    arrItems2[604] = "12pm - 2pm";
    arrItemsGrp2[604] = 6
    arrItems2[605] = "1pm - 3pm";
    arrItemsGrp2[605] = 6
    arrItems2[606] = "2pm - 4pm";
    arrItemsGrp2[606] = 6
    arrItems2[607] = "3pm - 5pm";
    arrItemsGrp2[607] = 6
    arrItems2[608] = "4pm - 6pm";
    arrItemsGrp2[608] = 6
    arrItems2[609] = "5pm - 7pm";
    arrItemsGrp2[609] = 6
    arrItems2[610] = "6pm - 8pm";
    arrItemsGrp2[610] = 6
    arrItems2[611] = "7pm - 9pm";
    arrItemsGrp2[611] = 6
    
    
    function selectChange(control, controlToPopulate, ItemArray, GroupArray) {
      var myEle ;
      var x ;
      // Empty the second drop down box of any choices
      for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;
      if (control.name == "firstChoice") {
        // Empty the third drop down box of any choices
        for (var q=form.thirdChoice.options.length;q>=0;q--) form.thirdChoice.options[q] = null;
     }
      // ADD Default Choice - in case there are no values
      myEle = document.createElement("option") ;
      myEle.value = 0 ;
      myEle.text = "[SELECT]" ;
      // controlToPopulate.add(myEle) ;
      controlToPopulate.appendChild(myEle)
      // Now loop through the array of individual items
      // Any containing the same child id are added to
      // the second dropdown box
      for ( x = 0 ; x < ItemArray.length  ; x++ ) {
        if ( GroupArray[x] == control.value ) {
          myEle = document.createElement("option") ;
          //myEle.value = x ;
          myEle.setAttribute('value',x);
          // myEle.text = ItemArray[x] ;
          var txt = document.createTextNode(ItemArray[x]);
          myEle.appendChild(txt)
          // controlToPopulate.add(myEle) ;
          controlToPopulate.appendChild(myEle)
        }
      }
    }
    
    function selectChange(control, controlToPopulate, ItemArray, GroupArray) {
      var myEle ;
      var x ;
      // Empty the second drop down box of any choices
      for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;
      if (control.name == "firstChoice") {
        // Empty the third drop down box of any choices
        for (var q=form.thirdChoice.options.length;q>=0;q--) form.thirdChoice.options[q] = null;
      }
      // ADD Default Choice - in case there are no values
      myEle=document.createElement("option");
      theText=document.createTextNode("[SELECT]");
      myEle.appendChild(theText);
      myEle.setAttribute("value","0");
      controlToPopulate.appendChild(myEle);
      // Now loop through the array of individual items
      // Any containing the same child id are added to
      // the second dropdown box
      for ( x = 0 ; x < ItemArray.length  ; x++ ) {
        if ( GroupArray[x] == control.value ) {
          myEle = document.createElement("option") ;
          //myEle.value = x ;
          myEle.setAttribute("value",x);
          // myEle.text = ItemArray[x] ;
          var txt = document.createTextNode(ItemArray[x]);
          myEle.appendChild(txt)
          // controlToPopulate.add(myEle) ;
          controlToPopulate.appendChild(myEle)
        }
      }
    }
    function performMath()
    {
      var num1 = document.getElementById('secondchoice').value - 0; // -0 converts to number
      var num2 = 0;
      document.getElementById('total').value=(document.getElementById('CD').checked)?(num1+num2+10):(num1+num2);  
    }
    
    </script>
    Here is my form code:
    Code:
    <form name=form>
    <table align="left" width="100%">
      <tr>
        <td width="24%" bgcolor="#FFCCFF">
          <b><font face="Arial" color="#990000">Delivery Area/Time</font></b></td>
        <td width="4%" bgcolor="#FFCCFF">
          &nbsp;</td>
        <td width="504" colspan="3" bgcolor="#FFCCFF">
          <b><font face="Arial" color="#990000">Sender Information</font></b></td>
      </tr>
      <tr>
        <td width="24%" bgcolor="#FFCCFF">
          <p align="left">
          <font face="Arial"><font size="2" color="#990000">Select the delivery area:<br>
          </font>
          <font color="#990000">
          <select id="firstChoice" name="firstChoice" onchange="selectChange(this, form.secondChoice, arrItems1, arrItemsGrp1);" size="1">
            <option value="0" selected>[SELECT]</option>
            <option value="1">Austin</option>
            <option value="2">Belton</option>
            <option value="1">Buda</option>
            <option value="1">Canyon Lake</option>
            <option value="1">Canyon Springs</option>
            <option value="1">Cedar Park</option>
            <option value="2">Copperas Cove</option>
            <option value="1">Driftwood</option>
            <option value="1">Dripping Springs</option>
            <option value="1">Elgin</option>
            <option value="2">Florence</option>
            <option value="2">Fort Hood</option>
            <option value="1">Garden Ridge</option>
            <option value="1">Georgetown</option>
            <option value="2">Granger</option>
            <option value="2">Harker Heights</option>
            <option value="1">Hutto</option>
            <option value="2">Jarrell</option>
            <option value="2">Jonestown</option>
            <option value="2">Killeen</option>
            <option value="1">Kyle</option>
            <option value="1">Lago Vista</option>
            <option value="1">Lakeway</option>
            <option value="1">Leander</option>
            <option value="1">Liberty Hill</option>
            <option value="1">Manor</option>
            <option value="1">Mount Gainor</option>
            <option value="1">Mountain City</option>
            <option value="1">New Braunfels</option>
            <option value="1">Pflugervilles</option>
            <option value="1">Round Rock</option>
            <option value="1">San Antonio</option>
            <option value="1">San Marcos</option>
            <option value="1">Seguin</option>
            <option value="1">Shertz</option>
            <option value="1">Taylor</option>
            <option value="2">Temple</option>
            <option value="1">Wimberly</option>
          </select></font><font size="2" color="#990000"> </font></font></td>
        <td width="4%" valign="top" bgcolor="#FFCCFF">
          &nbsp;</td>
        <td width="26%" valign="top" bgcolor="#FFCCFF">
          <font face="Arial" size="2" color="#990000">First</font><font face="Arial"><font size="2" color="#990000"> Name:<br>
    		</font><font color="#990000">
    		<input type="text" name="firstname" size="20"></font></font></td>
        <td width="308" valign="top" colspan="2" bgcolor="#FFCCFF">
          <font face="Arial" size="2" color="#990000">Last Name:</font><font face="Arial"><font size="2" color="#990000"><br>
    		</font><font color="#990000">
    		<input type="text" name="lastname" size="20"></font></font></td>
      </tr>
      <tr>
        <td width="24%" bgcolor="#FFCCFF">
          <font face="Arial"><font size="2" color="#990000">Select your time window:<br>
          </font>
          <font color="#990000">
          <select id="secondChoice" name="secondChoice" onchange="selectChange(this, form.thirdChoice, arrItems2, arrItemsGrp2);">
          </select></font></font></td>
        <td width="4%" valign="top" bgcolor="#FFCCFF">
          &nbsp;</td>
        <td width="504" valign="top" colspan="3" bgcolor="#FFCCFF">
          <font face="Arial" size="2" color="#990000">Address 1:<br>
    		<input type="text" name="adress1" size="40"></font></td>
      </tr>
      <tr>
        <td width="24%" bgcolor="#FFCCFF">
          <font face="Arial"><font size="2" color="#990000">Select your time frame:<br>
          </font>
          <font color="#990000">
          <select id="thirdChoice" name="thirdChoice">
          </select></font></font></td>
        <td width="4%" valign="top" bgcolor="#FFCCFF">
          &nbsp;</td>
        <td width="504" valign="top" colspan="3" bgcolor="#FFCCFF">
          <font face="Arial" size="2" color="#990000">Address 2:<br>
    		<input type="text" name="address2" size="40"></font></td>
      </tr>
      <tr>
        <td width="24%" bgcolor="#FFCCFF" valign="top">
          <p align="left"><font face="Arial" size="2" color="#990000">If you 
    		selected specific time please enter time below:<br>
    		<input type="text" name="T1" size="15"></font></td>
        <td width="4%" valign="top" rowspan="4" bgcolor="#FFCCFF">
          &nbsp;</td>
        <td width="26%" valign="top" height="20" bgcolor="#FFCCFF">
          <font face="Arial" size="2" color="#990000">City:<br>
    		<input type="text" name="city" size="20"></font></td>
        <td width="4%" valign="top" bgcolor="#FFCCFF">
          <font color="#990000">State:<br>
    		<input type="text" name="state" size="2"></font></td>
        <td width="39%" valign="top" bgcolor="#FFCCFF">
          <font color="#990000">Zip:<br>
    		<input type="text" name="zip" size="5"></font></td>
      </tr>
      <tr>
        <td width="24%" rowspan="3" bgcolor="#FFCCFF" valign="top">
          <font face="Arial"><font color="#990000">
    		<img border="0" src="Recordings/With_A_Song_drop_shadow.jpg" width="117" height="115"><br>
    		<input type="checkbox" name="CD" value="ON"></font><font size="2" color="#990000">&nbsp; 
    		Add a CD + $10</font></font></td>
        <td width="26%" valign="top" bgcolor="#FFCCFF">
          <font color="#990000">Email:<br>
    		<input type="text" name="email" size="26"></font></td>
        <td width="4%" valign="top" bgcolor="#FFCCFF">
          &nbsp;</td>
        <td width="39%" valign="top" bgcolor="#FFCCFF">
          <font color="#990000">Phone:<br>
    		<input type="text" name="phone" size="20"></font></td>
      </tr>
      <tr>
        <td width="26%" valign="bottom" bgcolor="#FFCCFF">
          <p align="right"><font color="#990000">Total</font></td>
        <td width="4%" valign="bottom" bgcolor="#FFCCFF">
          <p align="center"><font color="#990000">=</font></td>
        <td width="39%" valign="bottom" bgcolor="#FFCCFF">
          <font color="#990000"><input type="text" name="total" size="15"></font></td>
      </tr>
      <tr>
        <td width="26%" valign="bottom" bgcolor="#FFCCFF">
          <p align="right">&nbsp;</td>
        <td width="4%" valign="bottom" bgcolor="#FFCCFF">
          <p align="center">&nbsp;</td>
        <td width="39%" valign="bottom" bgcolor="#FFCCFF">
          <input type="button" value="Continue" name="Continue">&nbsp;&nbsp;
    		<input type="reset" value="Reset" name="Reset"></td>
      </tr>
      </table>
    </form>
    Once again, thanks in advance for any assistance.

    baricrazi
    Last edited by baricrazi; 12-22-2005 at 12:59 AM.

  • #2
    New Coder
    Join Date
    Dec 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Maybe this isn't possible

    Well I guess maybe this isn't possible or either I didn't ask the question right. I am really at my wit's end and my client is really putting the presure on me. If someone could help I would greatly appreciate it.

    baricrazi

  • #3
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    baricrazi:

    Try the following. You had two functions with the same name. I changed that. I made the second select list updatet the total box. I have no idea what your "performMath" function is for, but I didn't use it. You should probably delete it. I made the total box "readonly" and I made the checkbox add/remove 10.00.

    Code:
    <html>
    <head>
    <script type="text/javascript">
    
    var arrItems1 = new Array();
    var arrItemsGrp1 = new Array();
    
    arrItems1[0] = "8 Hour Time Window $50";
    arrItemsGrp1[0] = 1;
    arrItems1[1] = "4 Hour Time Window $60";
    arrItemsGrp1[1] = 1;
    arrItems1[2] = "2 Hour Time Window $85";
    arrItemsGrp1[2] = 1;
    arrItems1[3] = "Specific Time $100";
    arrItemsGrp1[3] = 1;
    
    arrItems1[4] = "8 Hour Time Window $75";
    arrItemsGrp1[4] = 2;
    arrItems1[5] = "4 Hour Time Window $85";
    arrItemsGrp1[5] = 2;
    arrItems1[6] = "2 Hour Time Window $100";
    arrItemsGrp1[6] = 2;
    arrItems1[7] = "Specific Time $150";
    arrItemsGrp1[7] = 2;
    
    
    var arrItems2 = new Array();
    var arrItemsGrp2 = new Array();
    
    arrItems2[21] = "8am - 4pm";
    arrItemsGrp2[21] = 0
    arrItems2[22] = "9am - 5pm";
    arrItemsGrp2[22] = 0
    arrItems2[23] = "10am - 6pm";
    arrItemsGrp2[23] = 0
    arrItems2[24] = "11am - 7pm";
    arrItemsGrp2[24] = 0
    arrItems2[25] = "12pm - 8pm";
    arrItemsGrp2[25] = 0
    arrItems2[26] = "1pm - 9pm";
    arrItemsGrp2[26] = 0
    
    arrItems2[31] = "8am - 12pm";
    arrItemsGrp2[31] = 1
    arrItems2[32] = "9am - 1pm";
    arrItemsGrp2[32] = 1
    arrItems2[33] = "10am - 2pm";
    arrItemsGrp2[33] = 1
    arrItems2[34] = "11am - 3pm";
    arrItemsGrp2[34] = 1
    arrItems2[35] = "12pm - 4pm";
    arrItemsGrp2[35] = 1
    arrItems2[36] = "1pm - 5pm";
    arrItemsGrp2[36] = 1
    arrItems2[37] = "2pm - 6pm";
    arrItemsGrp2[37] = 1
    arrItems2[38] = "3pm - 7pm";
    arrItemsGrp2[38] = 1
    arrItems2[39] = "4pm - 8pm";
    arrItemsGrp2[39] = 1
    arrItems2[40] = "5pm - 9pm";
    arrItemsGrp2[40] = 1
    
    arrItems2[300] = "8am - 10am";
    arrItemsGrp2[300] = 2
    arrItems2[301] = "9am - 11am";
    arrItemsGrp2[301] = 2
    arrItems2[302] = "10am - 12pm";
    arrItemsGrp2[302] = 2
    arrItems2[303] = "11am - 1pm";
    arrItemsGrp2[303] = 2
    arrItems2[304] = "12pm - 2pm";
    arrItemsGrp2[304] = 2
    arrItems2[305] = "1pm - 3pm";
    arrItemsGrp2[305] = 2
    arrItems2[306] = "2pm - 4pm";
    arrItemsGrp2[306] = 2
    arrItems2[307] = "3pm - 5pm";
    arrItemsGrp2[307] = 2
    arrItems2[308] = "4pm - 6pm";
    arrItemsGrp2[308] = 2
    arrItems2[309] = "5pm - 7pm";
    arrItemsGrp2[309] = 2
    arrItems2[310] = "6pm - 8pm";
    arrItemsGrp2[310] = 2
    arrItems2[311] = "7pm - 9pm";
    arrItemsGrp2[311] = 2
    
    arrItems2[500] = "8am - 12pm";
    arrItemsGrp2[500] = 5
    arrItems2[501] = "9am - 1pm";
    arrItemsGrp2[501] = 5
    arrItems2[503] = "10am - 2pm";
    arrItemsGrp2[503] = 5
    arrItems2[504] = "11am - 3pm";
    arrItemsGrp2[504] = 5
    arrItems2[505] = "12pm - 4pm";
    arrItemsGrp2[505] = 5
    arrItems2[506] = "1pm - 5pm";
    arrItemsGrp2[506] = 5
    arrItems2[507] = "2pm - 6pm";
    arrItemsGrp2[507] = 5
    arrItems2[508] = "3pm - 7pm";
    arrItemsGrp2[508] = 5
    arrItems2[509] = "4pm - 8pm";
    arrItemsGrp2[509] = 5
    arrItems2[510] = "5pm - 9pm";
    arrItemsGrp2[510] = 5
    
    arrItems2[103] = "8am - 4pm";
    arrItemsGrp2[103] = 4
    arrItems2[104] = "9am - 5pm";
    arrItemsGrp2[104] = 4
    arrItems2[105] = "10am - 6pm";
    arrItemsGrp2[105] = 4
    arrItems2[106] = "11am - 7pm";
    arrItemsGrp2[106] = 4
    arrItems2[107] = "12pm - 8pm";
    arrItemsGrp2[107] = 4
    arrItems2[108] = "1pm - 9pm";
    arrItemsGrp2[108] = 4
    
    
    arrItems2[600] = "8am - 10am";
    arrItemsGrp2[600] = 6
    arrItems2[601] = "9am - 11am";
    arrItemsGrp2[601] = 6
    arrItems2[602] = "10am - 12pm";
    arrItemsGrp2[602] = 6
    arrItems2[603] = "11am - 1pm";
    arrItemsGrp2[603] = 6
    arrItems2[604] = "12pm - 2pm";
    arrItemsGrp2[604] = 6
    arrItems2[605] = "1pm - 3pm";
    arrItemsGrp2[605] = 6
    arrItems2[606] = "2pm - 4pm";
    arrItemsGrp2[606] = 6
    arrItems2[607] = "3pm - 5pm";
    arrItemsGrp2[607] = 6
    arrItems2[608] = "4pm - 6pm";
    arrItemsGrp2[608] = 6
    arrItems2[609] = "5pm - 7pm";
    arrItemsGrp2[609] = 6
    arrItems2[610] = "6pm - 8pm";
    arrItemsGrp2[610] = 6
    arrItems2[611] = "7pm - 9pm";
    arrItemsGrp2[611] = 6
    
    var timePrice = new Array("0.00","50.00","60.00","85.00","100.00")
    
    function selectChange2(control, controlToPopulate, ItemArray, GroupArray, nIndex) {
      var myEle ;
      var x ;
      document.getElementById('cdBox').checked = false;
      document.forms[0].total.value = "";
      document.forms[0].total.value = timePrice[nIndex];
      // Empty the second drop down box of any choices
      for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;
      if (control.name == "firstChoice") {
        // Empty the third drop down box of any choices
        for (var q=form.thirdChoice.options.length;q>=0;q--) form.thirdChoice.options[q] = null;
     }
      // ADD Default Choice - in case there are no values
      myEle = document.createElement("option") ;
      myEle.value = 0 ;
      myEle.text = "[SELECT]" ;
      // controlToPopulate.add(myEle) ;
      controlToPopulate.appendChild(myEle)
      // Now loop through the array of individual items
      // Any containing the same child id are added to
      // the second dropdown box
      for ( x = 0 ; x < ItemArray.length  ; x++ ) {
        if ( GroupArray[x] == control.value ) {
          myEle = document.createElement("option") ;
          //myEle.value = x ;
          myEle.setAttribute('value',x);
          // myEle.text = ItemArray[x] ;
          var txt = document.createTextNode(ItemArray[x]);
          myEle.appendChild(txt)
          // controlToPopulate.add(myEle) ;
          controlToPopulate.appendChild(myEle)
        }
      }
    }
    
    
    function selectChange(control, controlToPopulate, ItemArray, GroupArray) {
      var myEle ;
      var x ;
      // Empty the second drop down box of any choices
      for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;
      if (control.name == "firstChoice") {
        // Empty the third drop down box of any choices
        for (var q=form.thirdChoice.options.length;q>=0;q--) form.thirdChoice.options[q] = null;
      }
      // ADD Default Choice - in case there are no values
      myEle=document.createElement("option");
      theText=document.createTextNode("[SELECT]");
      myEle.appendChild(theText);
      myEle.setAttribute("value","0");
      controlToPopulate.appendChild(myEle);
      // Now loop through the array of individual items
      // Any containing the same child id are added to
      // the second dropdown box
      for ( x = 0 ; x < ItemArray.length  ; x++ ) {
        if ( GroupArray[x] == control.value ) {
          myEle = document.createElement("option") ;
          //myEle.value = x ;
          myEle.setAttribute("value",x);
          // myEle.text = ItemArray[x] ;
          var txt = document.createTextNode(ItemArray[x]);
          myEle.appendChild(txt)
          // controlToPopulate.add(myEle) ;
          controlToPopulate.appendChild(myEle)
        }
      }
    }
    function performMath()
    {
      var num1 = document.getElementById('secondchoice').value - 0; // -0 converts to number
      var num2 = 0;
      
    
    document.getElementById('total').value=(document.getElementById('CD').checked)?(num1+num2+10):(nu
    
    m1+num2);  
    }
    
    function addCD(nBox){
    
    	if (nBox.checked && document.forms[0].total.value != "" && document.forms[0].total.value 
    
    != "0.00")
    		{
    		 var tmp = document.forms[0].total.value;
    		 tmp = parseFloat(tmp)+parseFloat("10.00");
    		 document.forms[0].total.value = tmp.toFixed(2)
    		}
    	if  (!nBox.checked && document.forms[0].total.value != "" && 
    
    document.forms[0].total.value != "0.00")	
    		{
    		 var tmp = document.forms[0].total.value;
    		 tmp = parseFloat(tmp)-parseFloat("10.00");
    		 document.forms[0].total.value = tmp.toFixed(2);
    		}
    }
    
    </script>
    </head>
    <body>
    <form name='form'>
    <table align="left" width="100%">
      <tr>
        <td width="24%" bgcolor="#FFCCFF">
          <b><font face="Arial" color="#990000">Delivery Area/Time</font></b></td>
        <td width="4%" bgcolor="#FFCCFF">
          &nbsp;</td>
        <td width="504" colspan="3" bgcolor="#FFCCFF">
          <b><font face="Arial" color="#990000">Sender Information</font></b></td>
      </tr>
      <tr>
        <td width="24%" bgcolor="#FFCCFF">
          <p align="left">
          <font face="Arial"><font size="2" color="#990000">Select the delivery area:<br>
          </font>
          <font color="#990000">
          <select id="firstChoice" name="firstChoice" onchange="selectChange(this, form.secondChoice, 
    
    arrItems1, arrItemsGrp1);" size="1">
            <option value="0" selected>[SELECT]</option>
            <option value="1">Austin</option>
            <option value="2">Belton</option>
            <option value="1">Buda</option>
            <option value="1">Canyon Lake</option>
            <option value="1">Canyon Springs</option>
            <option value="1">Cedar Park</option>
            <option value="2">Copperas Cove</option>
            <option value="1">Driftwood</option>
            <option value="1">Dripping Springs</option>
            <option value="1">Elgin</option>
            <option value="2">Florence</option>
            <option value="2">Fort Hood</option>
            <option value="1">Garden Ridge</option>
            <option value="1">Georgetown</option>
            <option value="2">Granger</option>
            <option value="2">Harker Heights</option>
            <option value="1">Hutto</option>
            <option value="2">Jarrell</option>
            <option value="2">Jonestown</option>
            <option value="2">Killeen</option>
            <option value="1">Kyle</option>
            <option value="1">Lago Vista</option>
            <option value="1">Lakeway</option>
            <option value="1">Leander</option>
            <option value="1">Liberty Hill</option>
            <option value="1">Manor</option>
            <option value="1">Mount Gainor</option>
            <option value="1">Mountain City</option>
            <option value="1">New Braunfels</option>
            <option value="1">Pflugervilles</option>
            <option value="1">Round Rock</option>
            <option value="1">San Antonio</option>
            <option value="1">San Marcos</option>
            <option value="1">Seguin</option>
            <option value="1">Shertz</option>
            <option value="1">Taylor</option>
            <option value="2">Temple</option>
            <option value="1">Wimberly</option>
          </select></font><font size="2" color="#990000"> </font></font></td>
        <td width="4%" valign="top" bgcolor="#FFCCFF">
          &nbsp;</td>
        <td width="26%" valign="top" bgcolor="#FFCCFF">
          <font face="Arial" size="2" color="#990000">First</font><font face="Arial"><font size="2" 
    
    color="#990000"> Name:<br>
    		</font><font color="#990000">
    		<input type="text" name="firstname" size="20"></font></font></td>
        <td width="308" valign="top" colspan="2" bgcolor="#FFCCFF">
          <font face="Arial" size="2" color="#990000">Last Name:</font><font face="Arial"><font 
    
    size="2" color="#990000"><br>
    		</font><font color="#990000">
    		<input type="text" name="lastname" size="20"></font></font></td>
      </tr>
      <tr>
        <td width="24%" bgcolor="#FFCCFF">
          <font face="Arial"><font size="2" color="#990000">Select your time window:<br>
          </font>
          <font color="#990000">
          <select id="secondChoice" name="secondChoice" onchange="selectChange2(this, 
    
    form.thirdChoice, arrItems2, arrItemsGrp2,this.selectedIndex);">
          </select></font></font></td>
        <td width="4%" valign="top" bgcolor="#FFCCFF">
          &nbsp;</td>
        <td width="504" valign="top" colspan="3" bgcolor="#FFCCFF">
          <font face="Arial" size="2" color="#990000">Address 1:<br>
    		<input type="text" name="adress1" size="40"></font></td>
      </tr>
      <tr>
        <td width="24%" bgcolor="#FFCCFF">
          <font face="Arial"><font size="2" color="#990000">Select your time frame:<br>
          </font>
          <font color="#990000">
          <select id="thirdChoice" name="thirdChoice">
          </select></font></font></td>
        <td width="4%" valign="top" bgcolor="#FFCCFF">
          &nbsp;</td>
        <td width="504" valign="top" colspan="3" bgcolor="#FFCCFF">
          <font face="Arial" size="2" color="#990000">Address 2:<br>
    		<input type="text" name="address2" size="40"></font></td>
      </tr>
      <tr>
        <td width="24%" bgcolor="#FFCCFF" valign="top">
          <p align="left"><font face="Arial" size="2" color="#990000">If you 
    		selected specific time please enter time below:<br>
    		<input type="text" name="T1" size="15"></font></td>
        <td width="4%" valign="top" rowspan="4" bgcolor="#FFCCFF">
          &nbsp;</td>
        <td width="26%" valign="top" height="20" bgcolor="#FFCCFF">
          <font face="Arial" size="2" color="#990000">City:<br>
    		<input type="text" name="city" size="20"></font></td>
        <td width="4%" valign="top" bgcolor="#FFCCFF">
          <font color="#990000">State:<br>
    		<input type="text" name="state" size="2"></font></td>
        <td width="39%" valign="top" bgcolor="#FFCCFF">
          <font color="#990000">Zip:<br>
    		<input type="text" name="zip" size="5"></font></td>
      </tr>
      <tr>
        <td width="24%" rowspan="3" bgcolor="#FFCCFF" valign="top">
          <font face="Arial"><font color="#990000">
    		<img border="0" src="Recordings/With_A_Song_drop_shadow.jpg" width="117" 
    
    height="115"><br>
    		<input type="checkbox" name="CD" id='cdBox' value="ON" 
    
    onclick="addCD(this)"></font><font size="2" color="#990000">&nbsp; 
    		Add a CD + $10</font></font></td>
        <td width="26%" valign="top" bgcolor="#FFCCFF">
          <font color="#990000">Email:<br>
    		<input type="text" name="email" size="26"></font></td>
        <td width="4%" valign="top" bgcolor="#FFCCFF">
          &nbsp;</td>
        <td width="39%" valign="top" bgcolor="#FFCCFF">
          <font color="#990000">Phone:<br>
    		<input type="text" name="phone" size="20"></font></td>
      </tr>
      <tr>
        <td width="26%" valign="bottom" bgcolor="#FFCCFF">
          <p align="right"><font color="#990000">Total</font></td>
        <td width="4%" valign="bottom" bgcolor="#FFCCFF">
          <p align="center"><font color="#990000">=</font></td>
        <td width="39%" valign="bottom" bgcolor="#FFCCFF">
          <font color="#990000"><input type="text" name="total" size="15" readonly></font></td>
      </tr>
      <tr>
        <td width="26%" valign="bottom" bgcolor="#FFCCFF">
          <p align="right">&nbsp;</td>
        <td width="4%" valign="bottom" bgcolor="#FFCCFF">
          <p align="center">&nbsp;</td>
        <td width="39%" valign="bottom" bgcolor="#FFCCFF">
          <input type="button" value="Continue" name="Continue">&nbsp;&nbsp;
    		<input type="reset" value="Reset" name="Reset"></td>
      </tr>
      </table>
    </form>
    
    
    
    </body>
    </html>

  • #4
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    baricrazi:

    I just noticed that the prices may be different for each area. I set it up with a two dimensional array, for the timePrice. I did the first 2 areas. You'll have to complete the remaining ones.

    Here's the whole thing again, test it AS IS.

    Code:
    <html>
    <head>
    <script type="text/javascript">
    
    var arrItems1 = new Array();
    var arrItemsGrp1 = new Array();
    
    arrItems1[0] = "8 Hour Time Window $50";
    arrItemsGrp1[0] = 1;
    arrItems1[1] = "4 Hour Time Window $60";
    arrItemsGrp1[1] = 1;
    arrItems1[2] = "2 Hour Time Window $85";
    arrItemsGrp1[2] = 1;
    arrItems1[3] = "Specific Time $100";
    arrItemsGrp1[3] = 1;
    
    arrItems1[4] = "8 Hour Time Window $75";
    arrItemsGrp1[4] = 2;
    arrItems1[5] = "4 Hour Time Window $85";
    arrItemsGrp1[5] = 2;
    arrItems1[6] = "2 Hour Time Window $100";
    arrItemsGrp1[6] = 2;
    arrItems1[7] = "Specific Time $150";
    arrItemsGrp1[7] = 2;
    
    
    var arrItems2 = new Array();
    var arrItemsGrp2 = new Array();
    
    arrItems2[21] = "8am - 4pm";
    arrItemsGrp2[21] = 0
    arrItems2[22] = "9am - 5pm";
    arrItemsGrp2[22] = 0
    arrItems2[23] = "10am - 6pm";
    arrItemsGrp2[23] = 0
    arrItems2[24] = "11am - 7pm";
    arrItemsGrp2[24] = 0
    arrItems2[25] = "12pm - 8pm";
    arrItemsGrp2[25] = 0
    arrItems2[26] = "1pm - 9pm";
    arrItemsGrp2[26] = 0
    
    arrItems2[31] = "8am - 12pm";
    arrItemsGrp2[31] = 1
    arrItems2[32] = "9am - 1pm";
    arrItemsGrp2[32] = 1
    arrItems2[33] = "10am - 2pm";
    arrItemsGrp2[33] = 1
    arrItems2[34] = "11am - 3pm";
    arrItemsGrp2[34] = 1
    arrItems2[35] = "12pm - 4pm";
    arrItemsGrp2[35] = 1
    arrItems2[36] = "1pm - 5pm";
    arrItemsGrp2[36] = 1
    arrItems2[37] = "2pm - 6pm";
    arrItemsGrp2[37] = 1
    arrItems2[38] = "3pm - 7pm";
    arrItemsGrp2[38] = 1
    arrItems2[39] = "4pm - 8pm";
    arrItemsGrp2[39] = 1
    arrItems2[40] = "5pm - 9pm";
    arrItemsGrp2[40] = 1
    
    arrItems2[300] = "8am - 10am";
    arrItemsGrp2[300] = 2
    arrItems2[301] = "9am - 11am";
    arrItemsGrp2[301] = 2
    arrItems2[302] = "10am - 12pm";
    arrItemsGrp2[302] = 2
    arrItems2[303] = "11am - 1pm";
    arrItemsGrp2[303] = 2
    arrItems2[304] = "12pm - 2pm";
    arrItemsGrp2[304] = 2
    arrItems2[305] = "1pm - 3pm";
    arrItemsGrp2[305] = 2
    arrItems2[306] = "2pm - 4pm";
    arrItemsGrp2[306] = 2
    arrItems2[307] = "3pm - 5pm";
    arrItemsGrp2[307] = 2
    arrItems2[308] = "4pm - 6pm";
    arrItemsGrp2[308] = 2
    arrItems2[309] = "5pm - 7pm";
    arrItemsGrp2[309] = 2
    arrItems2[310] = "6pm - 8pm";
    arrItemsGrp2[310] = 2
    arrItems2[311] = "7pm - 9pm";
    arrItemsGrp2[311] = 2
    
    arrItems2[500] = "8am - 12pm";
    arrItemsGrp2[500] = 5
    arrItems2[501] = "9am - 1pm";
    arrItemsGrp2[501] = 5
    arrItems2[503] = "10am - 2pm";
    arrItemsGrp2[503] = 5
    arrItems2[504] = "11am - 3pm";
    arrItemsGrp2[504] = 5
    arrItems2[505] = "12pm - 4pm";
    arrItemsGrp2[505] = 5
    arrItems2[506] = "1pm - 5pm";
    arrItemsGrp2[506] = 5
    arrItems2[507] = "2pm - 6pm";
    arrItemsGrp2[507] = 5
    arrItems2[508] = "3pm - 7pm";
    arrItemsGrp2[508] = 5
    arrItems2[509] = "4pm - 8pm";
    arrItemsGrp2[509] = 5
    arrItems2[510] = "5pm - 9pm";
    arrItemsGrp2[510] = 5
    
    arrItems2[103] = "8am - 4pm";
    arrItemsGrp2[103] = 4
    arrItems2[104] = "9am - 5pm";
    arrItemsGrp2[104] = 4
    arrItems2[105] = "10am - 6pm";
    arrItemsGrp2[105] = 4
    arrItems2[106] = "11am - 7pm";
    arrItemsGrp2[106] = 4
    arrItems2[107] = "12pm - 8pm";
    arrItemsGrp2[107] = 4
    arrItems2[108] = "1pm - 9pm";
    arrItemsGrp2[108] = 4
    
    
    arrItems2[600] = "8am - 10am";
    arrItemsGrp2[600] = 6
    arrItems2[601] = "9am - 11am";
    arrItemsGrp2[601] = 6
    arrItems2[602] = "10am - 12pm";
    arrItemsGrp2[602] = 6
    arrItems2[603] = "11am - 1pm";
    arrItemsGrp2[603] = 6
    arrItems2[604] = "12pm - 2pm";
    arrItemsGrp2[604] = 6
    arrItems2[605] = "1pm - 3pm";
    arrItemsGrp2[605] = 6
    arrItems2[606] = "2pm - 4pm";
    arrItemsGrp2[606] = 6
    arrItems2[607] = "3pm - 5pm";
    arrItemsGrp2[607] = 6
    arrItems2[608] = "4pm - 6pm";
    arrItemsGrp2[608] = 6
    arrItems2[609] = "5pm - 7pm";
    arrItemsGrp2[609] = 6
    arrItems2[610] = "6pm - 8pm";
    arrItemsGrp2[610] = 6
    arrItems2[611] = "7pm - 9pm";
    arrItemsGrp2[611] = 6
    
    var timePrice = new Array()
    timePrice[0] = new Array("0.00")
    timePrice[1] = new Array("0.00","50.00","60.00","85.00","100.00")
    timePrice[2] = new Array("0.00","75.00","85.00","100.00","150.00")
    
    function selectChange2(control, controlToPopulate, ItemArray, GroupArray, nIndex) {
      var myEle ;
      var x ;
      document.getElementById('cdBox').checked = false;
      document.forms[0].total.value = "";
      var areaIdx = document.getElementById('firstChoice').selectedIndex;
      document.forms[0].total.value = timePrice[areaIdx][nIndex];
      // Empty the second drop down box of any choices
      for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;
      if (control.name == "firstChoice") {
        // Empty the third drop down box of any choices
        for (var q=form.thirdChoice.options.length;q>=0;q--) form.thirdChoice.options[q] = null;
     }
      // ADD Default Choice - in case there are no values
      myEle = document.createElement("option") ;
      myEle.value = 0 ;
      myEle.text = "[SELECT]" ;
      // controlToPopulate.add(myEle) ;
      controlToPopulate.appendChild(myEle)
      // Now loop through the array of individual items
      // Any containing the same child id are added to
      // the second dropdown box
      for ( x = 0 ; x < ItemArray.length  ; x++ ) {
        if ( GroupArray[x] == control.value ) {
          myEle = document.createElement("option") ;
          //myEle.value = x ;
          myEle.setAttribute('value',x);
          // myEle.text = ItemArray[x] ;
          var txt = document.createTextNode(ItemArray[x]);
          myEle.appendChild(txt)
          // controlToPopulate.add(myEle) ;
          controlToPopulate.appendChild(myEle)
        }
      }
    }
    
    
    function selectChange(control, controlToPopulate, ItemArray, GroupArray, nIndex) {
      var myEle ;
      var x ;
      if (nIndex == 0){document.forms[0].total.value = "0.00"}
      // Empty the second drop down box of any choices
      for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;
      if (control.name == "firstChoice") {
        // Empty the third drop down box of any choices
        for (var q=form.thirdChoice.options.length;q>=0;q--) form.thirdChoice.options[q] = null;
      }
      // ADD Default Choice - in case there are no values
      myEle=document.createElement("option");
      theText=document.createTextNode("[SELECT]");
      myEle.appendChild(theText);
      myEle.setAttribute("value","0");
      controlToPopulate.appendChild(myEle);
      // Now loop through the array of individual items
      // Any containing the same child id are added to
      // the second dropdown box
      for ( x = 0 ; x < ItemArray.length  ; x++ ) {
        if ( GroupArray[x] == control.value ) {
          myEle = document.createElement("option") ;
          //myEle.value = x ;
          myEle.setAttribute("value",x);
          // myEle.text = ItemArray[x] ;
          var txt = document.createTextNode(ItemArray[x]);
          myEle.appendChild(txt)
          // controlToPopulate.add(myEle) ;
          controlToPopulate.appendChild(myEle)
        }
      }
    }
    
    function addCD(nBox){
    
    	if (nBox.checked && document.forms[0].total.value != "" && document.forms[0].total.value 
    
    != "0.00")
    		{
    		 var tmp = document.forms[0].total.value;
    		 tmp = parseFloat(tmp)+parseFloat("10.00");
    		 document.forms[0].total.value = tmp.toFixed(2)
    		}
    	if  (!nBox.checked && document.forms[0].total.value != "" && 
    
    document.forms[0].total.value != "0.00")	
    		{
    		 var tmp = document.forms[0].total.value;
    		 tmp = parseFloat(tmp)-parseFloat("10.00");
    		 document.forms[0].total.value = tmp.toFixed(2);
    		}
    }
    
    </script>
    </head>
    <body>
    <form name='form'>
    <table align="left" width="100%">
      <tr>
        <td width="24%" bgcolor="#FFCCFF">
          <b><font face="Arial" color="#990000">Delivery Area/Time</font></b></td>
        <td width="4%" bgcolor="#FFCCFF">
          &nbsp;</td>
        <td width="504" colspan="3" bgcolor="#FFCCFF">
          <b><font face="Arial" color="#990000">Sender Information</font></b></td>
      </tr>
      <tr>
        <td width="24%" bgcolor="#FFCCFF">
          <p align="left">
          <font face="Arial"><font size="2" color="#990000">Select the delivery area:<br>
          </font>
          <font color="#990000">
          <select id="firstChoice" name="firstChoice" onchange="selectChange(this, form.secondChoice, 
    
    arrItems1, arrItemsGrp1, this.selectedIndex);" size="1">
            <option value="0" selected>[SELECT]</option>
            <option value="1">Austin</option>
            <option value="2">Belton</option>
            <option value="1">Buda</option>
            <option value="1">Canyon Lake</option>
            <option value="1">Canyon Springs</option>
            <option value="1">Cedar Park</option>
            <option value="2">Copperas Cove</option>
            <option value="1">Driftwood</option>
            <option value="1">Dripping Springs</option>
            <option value="1">Elgin</option>
            <option value="2">Florence</option>
            <option value="2">Fort Hood</option>
            <option value="1">Garden Ridge</option>
            <option value="1">Georgetown</option>
            <option value="2">Granger</option>
            <option value="2">Harker Heights</option>
            <option value="1">Hutto</option>
            <option value="2">Jarrell</option>
            <option value="2">Jonestown</option>
            <option value="2">Killeen</option>
            <option value="1">Kyle</option>
            <option value="1">Lago Vista</option>
            <option value="1">Lakeway</option>
            <option value="1">Leander</option>
            <option value="1">Liberty Hill</option>
            <option value="1">Manor</option>
            <option value="1">Mount Gainor</option>
            <option value="1">Mountain City</option>
            <option value="1">New Braunfels</option>
            <option value="1">Pflugervilles</option>
            <option value="1">Round Rock</option>
            <option value="1">San Antonio</option>
            <option value="1">San Marcos</option>
            <option value="1">Seguin</option>
            <option value="1">Shertz</option>
            <option value="1">Taylor</option>
            <option value="2">Temple</option>
            <option value="1">Wimberly</option>
          </select></font><font size="2" color="#990000"> </font></font></td>
        <td width="4%" valign="top" bgcolor="#FFCCFF">
          &nbsp;</td>
        <td width="26%" valign="top" bgcolor="#FFCCFF">
          <font face="Arial" size="2" color="#990000">First</font><font face="Arial"><font size="2" 
    
    color="#990000"> Name:<br>
    		</font><font color="#990000">
    		<input type="text" name="firstname" size="20"></font></font></td>
        <td width="308" valign="top" colspan="2" bgcolor="#FFCCFF">
          <font face="Arial" size="2" color="#990000">Last Name:</font><font face="Arial"><font 
    
    size="2" color="#990000"><br>
    		</font><font color="#990000">
    		<input type="text" name="lastname" size="20"></font></font></td>
      </tr>
      <tr>
        <td width="24%" bgcolor="#FFCCFF">
          <font face="Arial"><font size="2" color="#990000">Select your time window:<br>
          </font>
          <font color="#990000">
          <select id="secondChoice" name="secondChoice" onchange="selectChange2(this, 
    
    form.thirdChoice, arrItems2, arrItemsGrp2,this.selectedIndex);">
          </select></font></font></td>
        <td width="4%" valign="top" bgcolor="#FFCCFF">
          &nbsp;</td>
        <td width="504" valign="top" colspan="3" bgcolor="#FFCCFF">
          <font face="Arial" size="2" color="#990000">Address 1:<br>
    		<input type="text" name="adress1" size="40"></font></td>
      </tr>
      <tr>
        <td width="24%" bgcolor="#FFCCFF">
          <font face="Arial"><font size="2" color="#990000">Select your time frame:<br>
          </font>
          <font color="#990000">
          <select id="thirdChoice" name="thirdChoice">
          </select></font></font></td>
        <td width="4%" valign="top" bgcolor="#FFCCFF">
          &nbsp;</td>
        <td width="504" valign="top" colspan="3" bgcolor="#FFCCFF">
          <font face="Arial" size="2" color="#990000">Address 2:<br>
    		<input type="text" name="address2" size="40"></font></td>
      </tr>
      <tr>
        <td width="24%" bgcolor="#FFCCFF" valign="top">
          <p align="left"><font face="Arial" size="2" color="#990000">If you 
    		selected specific time please enter time below:<br>
    		<input type="text" name="T1" size="15"></font></td>
        <td width="4%" valign="top" rowspan="4" bgcolor="#FFCCFF">
          &nbsp;</td>
        <td width="26%" valign="top" height="20" bgcolor="#FFCCFF">
          <font face="Arial" size="2" color="#990000">City:<br>
    		<input type="text" name="city" size="20"></font></td>
        <td width="4%" valign="top" bgcolor="#FFCCFF">
          <font color="#990000">State:<br>
    		<input type="text" name="state" size="2"></font></td>
        <td width="39%" valign="top" bgcolor="#FFCCFF">
          <font color="#990000">Zip:<br>
    		<input type="text" name="zip" size="5"></font></td>
      </tr>
      <tr>
        <td width="24%" rowspan="3" bgcolor="#FFCCFF" valign="top">
          <font face="Arial"><font color="#990000">
    		<img border="0" src="Recordings/With_A_Song_drop_shadow.jpg" width="117" 
    
    height="115"><br>
    		<input type="checkbox" name="CD" id='cdBox' value="ON" 
    
    onclick="addCD(this)"></font><font size="2" color="#990000">&nbsp; 
    		Add a CD + $10</font></font></td>
        <td width="26%" valign="top" bgcolor="#FFCCFF">
          <font color="#990000">Email:<br>
    		<input type="text" name="email" size="26"></font></td>
        <td width="4%" valign="top" bgcolor="#FFCCFF">
          &nbsp;</td>
        <td width="39%" valign="top" bgcolor="#FFCCFF">
          <font color="#990000">Phone:<br>
    		<input type="text" name="phone" size="20"></font></td>
      </tr>
      <tr>
        <td width="26%" valign="bottom" bgcolor="#FFCCFF">
          <p align="right"><font color="#990000">Total</font></td>
        <td width="4%" valign="bottom" bgcolor="#FFCCFF">
          <p align="center"><font color="#990000">=</font></td>
        <td width="39%" valign="bottom" bgcolor="#FFCCFF">
          <font color="#990000"><input type="text" name="total" size="15" readonly></font></td>
      </tr>
      <tr>
        <td width="26%" valign="bottom" bgcolor="#FFCCFF">
          <p align="right">&nbsp;</td>
        <td width="4%" valign="bottom" bgcolor="#FFCCFF">
          <p align="center">&nbsp;</td>
        <td width="39%" valign="bottom" bgcolor="#FFCCFF">
          <input type="button" value="Continue" name="Continue">&nbsp;&nbsp;
    		<input type="reset" value="Reset" name="Reset"></td>
      </tr>
      </table>
    </form>
    
    
    
    </body>
    </html>

  • #5
    New Coder
    Join Date
    Dec 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you so much Ancora. That works to get the total in the total box but I have two different price sets. Basically, most of the areas have the price set that you have defined in var timePrice. However there are a few other cities that have a different price set. If you look at this part of the code you will see what I am talking about.

    Code:
    arrItems1[4] = "8 Hour Time Window $75";
    arrItemsGrp1[4] = 2;
    arrItems1[5] = "4 Hour Time Window $85";
    arrItemsGrp1[5] = 2;
    arrItems1[6] = "2 Hour Time Window $100";
    arrItemsGrp1[6] = 2;
    arrItems1[7] = "Specific Time $150";
    arrItemsGrp1[7] = 2;
    Is there a way to get those prices to go into the total when they are selected?

    Thanks,
    baricrazi

  • #6
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    Did you miss my previous post?

    I noticed that. I didn't notice that there were only TWO price sets, but no matter, you'll have to put a "set" for each area.

    Take a look at my previous post, and test it AS IS. Then finish the timePrice arrays.

  • #7
    New Coder
    Join Date
    Dec 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    We must have been posting at the same time because I didn't see your second post before I posted again. Anyway, I tried that and it works for the first few selects. You stated that I would have to finish the rest of the array but I don't see where I would do that. I understand that you assigned the values in var timePrice[0], [1], and [2] but I don't see how you call them from the select and tell it which var to use. I hope I am making sense.

  • #8
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    You see,

    [0] or [1] or [2] is the current selectedIndex of the FIRST select list.

    [1] is Austin [2] is Belton and so on...
    So, you just need to continue the progression:
    [3] = new Array(etc...)

    and put the prices for that area in that new Array.

    It looks like you have about 50 areas, so you'll need to go all the way to [50] if need be, even though there are actually only TWO different sets of prices, each location needs to be associated with an array of prices.

    They are called with these lines:
    var areaIdx = document.getElementById('firstChoice').selectedIndex;
    document.forms[0].total.value = timePrice[areaIdx][nIndex];

    nIndex is passed to the function, areaIdx is retrieved by document.getElementById.

    It's a TWO dimensional array. One index and the other.

    You don't need to code anything else, except finish the arrays.
    Okay?
    Last edited by Ancora; 12-22-2005 at 09:58 PM.

  • #9
    New Coder
    Join Date
    Dec 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok I think I figured it out. I still really don't understand how it works but it does. Basically this is what I have done so far and it seems to be working fine.

    Code:
    var timePrice = new Array()
    timePrice[0] = new Array("0.00")
    timePrice[1] = new Array("0.00","50.00","60.00","85.00","100.00") // Austin
    timePrice[2] = new Array("0.00","75.00","85.00","100.00","150.00") // Belton*
    timePrice[3] = new Array("0.00","50.00","60.00","85.00","100.00") // Buda
    timePrice[4] = new Array("0.00","50.00","60.00","85.00","100.00") // Canyon Lake
    timePrice[5] = new Array("0.00","50.00","60.00","85.00","100.00") // Canyon Springs
    timePrice[6] = new Array("0.00","50.00","60.00","85.00","100.00") // Cedar Park
    What I am confused about is how does it know that when I select cedar park that has a value of 1 to insert timePrice that has a value of 6. I will continue creating the array and I think it will all work out.

    Thank you soooo much for your help. You are a real lifesaver and I commend you and everyone else here on your help and expertise.

    Thanks,
    baricrazi

  • #10
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    baricrazi:

    You're welcome.

    Yes, it will all work.

    It's based upon the selectedIndex of each list. The first item in a select list is 0, the next item is 1, etc. So, the [1] and [2] refer to the selected index of the FIRST list. The next index, nIndex, is passed to the function. You'll see I added it to the arguments in the function declaration.

    nIndex, then selects the correct price, again based upon 0, 1, 2, etc.

    new Array("0.00","50.00","60.00","85.00","100.00")

    the 0 price is 0.00, the 1 index price is 50.00, etc.

    It's TWO dimensional array.

    Anyway, take care.

    Merry Christmas!

  • #11
    New Coder
    Join Date
    Dec 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok so this is working like a charm now, however this has created another issue. I need to be able to assign values to each of the select boxes so that I can pass those to paypal. Here is what is happening now. When I pass the information on to PayPal it shows my values on the select boxes as 1 or 2 or 3 etc. Instead I need to be sent as the select box shows. So for the first select box the value that should be sent is Austin, Belton, Buda, etc. and then for the second select box it should be sent as 8 Hour Time Window, 4 Hour Time Window etc. and the same for the third select box. Also the CD check box should be sent as a value of yes or no.

    I know I am asking a lot but it seems like as I get something to work something else doesn't work. Basically I just need to be able to assign a second value to each item in the array that will be passed by the field name.

    Thanks again in advance for any help.

    baricrazi

  • #12
    New Coder
    Join Date
    Dec 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Maybe I'm just going about this in the complete wrong way, if anyone has any better ideas please let me know. Basically I need to be able to pass all of the form elements to PayPal by form value. But the value needs to actually be what you see in the select box. Not sure if this can be done since the value is used to control how the select boxes work.

    Once again thanks in advance for any help and thanks to Ancora who has been so helpful thus far.

    baricrazi

  • #13
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    baricrazi:

    Post the "Buy Now" PayPal button code. I have mine, but I want to see yours.

  • #14
    New Coder
    Join Date
    Dec 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm not using a 'Buy Now" button. I am using PayPal IPN to pass my variables to PayPal and then back to my server. In case your not familiar with IPN basically I set the field names to specific names that PayPal recognizes and then PayPal takes the values of those fields and parses the data and sends it back to my server. The way I currently have the order system structured is they will fill out this form that you have been helping me with and it will submit the data to PayPal for payment. Upon successful payment it then directs to an extended form on my server where I the data that they have already filled out is automatically filled in and then they fill out the remainder of the form and when they submit it the order is then emailed for fulfillment.

    The important thing is that I can give my fields the names that PayPal recognizes and each field is set to the value of the name of the select box. I was wondering if a possiblility would be to set up another array that would populate the exact values that I need to hidden fields that are then passed to PayPal. That is if it's not possible to set the values to what I need on the current fields. Like I said I have just very recently made the jump into Javascript and so far I am pretty lost. I greatly appreciate the help that you have given me so far.

    Thanks,
    baricrazi

    ps - The only thing that I am really hung up on is setting the values of the fields to the same as the selects. Once I get past that the rest should be pretty straightforward.

  • #15
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    baricrazi:

    Yes, well, I'm unfamiliar with that PayPal arrangement. No matter.

    I believe I have a reasonable solution. Would the "text" of the chosen select list item work for you?

    I know that you are looking for a "value," but what if we could use the "text" instead?

    So, for example, a PayPal hidden field:

    <input type="hidden" name="areaSelect" value=document.getElementById('firstChoice').options[document.getElementById('firstChoice').selectedIndex].text>

    Give that a try.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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