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.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Conditional HTML Form Fields Help

    This is what I'm trying to do.

    CONDITIONS:
    If a person selects a Friday Class but not a Saturday Class the Total Cost Field will automatically enter $99.

    If a person selects a Saturday Class but not a Friday Class the Total Cost Field will automatically enter $99 as well.

    If a person selects both a Friday & Saturday Class the Total Cost field will automatically be $159.

    I found the following code and so far only have it changing when a Friday class is entered. I have no idea where to go from here. Please 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" xml:lang="en" lang="en">
    <head>
    <title>Test</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    
    </head>
    <body>
    
      <div>
        <p><span class="style1">Friday Class:</span> 
            <select id="fridayClass" >
              <option>  </option>
                    <option value="Class1"> Class 1 </option>
                    <option value="Class2"> Class 2</option>
                    <option value="Class3"> Class 3 </option>
              </select>
        </p>
        <p>  <span class="style1">Saturday Class:</span> 
            <select id="saturdayClass" >
              <option>  </option>
                    <option value="Class1"> Class 1 </option>
                    <option value="Class2"> Class 2</option>
                    <option value="Class3"> Class 3 </option>
              </select>
        </p>
    </div>
      <div><span class="style1">Total Cost:</span>
        <input type="text" id="totalCost"/></div>
    
    <script>
    window.onload = function () {
      var friday = document.getElementById('fridayClass'),
          saturday = document.getElementById('saturdayClass');
    
       friday.onchange = function () {
        totalCost.value = '$99.00';
      };
    };
    </script>

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    hmmm...

    smells like homework.

    the first thing you should do is get the firebug extension for firefox - it will tell you your basic mistakes, like how you are trying to update the value in your text box.

    the next thing you should do is look at how changing the selection in the friday list updates the value displayed, and I guess replicate that somehow.

    and then maybe you should think about how to fulfill the requirements of your assignment and if you get stuck on something specific, post back.

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Location
    Sweden
    Posts
    154
    Thanks
    1
    Thanked 22 Times in 22 Posts
    Try:
    Code:
    window.onload = function () {
      var $ = function(x){return document.getElementById(x)},
          friday = $('fridayClass'),
          saturday = $('saturdayClass'),
          totalCost = $('totalCost');
      friday.onchange = saturday.onchange = function () {
        totalCost.value = '$' + [0,99,159][1*(friday.selectedIndex > 0) + 1*(saturday.selectedIndex > 0)] + '.00';
      };
    };

  • Users who have thanked ironboy for this post:

    jughead47 (09-27-2011)

  • #4
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thank you Iron Boy! That worked great!! Now to study it and see how it works.

    Sorry xelawho, not homework, just a graphic designer getting more familiar with web design and coding needing major help with javascript.

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    glad you got it working. and if you are trying to learn, the first two pieces of advice still apply...

  • #6
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts
    OK, I've implemented two separate automatic calculations for multiple attendees and have that working. Is it possible to add the two total costs for each attendee into another field? I've been trying some different calculation java scripts I found online but can't get them working. I'm guessing it has something to do with the fact that the two fields I want to add are dynamic? Any help is appreciated.


    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" xml:lang="en" lang="en">
    <head>
    <title>Test</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    
    </head>
    <body>
    <div>
      <div>
      <form name="form">
        <p><span class="style1">Friday Class:</span> 
            <select id="fridayClass" >
              <option>  </option>
                    <option value="Class1"> Class 1 </option>
                    <option value="Class2"> Class 2</option>
                    <option value="Class3"> Class 3 </option>
          </select>
        </p>
        <p>  <span class="style1">Saturday Class:</span> 
            <select id="saturdayClass" >
              <option>  </option>
                    <option value="Class1"> Class 1 </option>
                    <option value="Class2"> Class 2</option>
                    <option value="Class3"> Class 3 </option>
          </select>
        </p>
    
      <div><span class="style1"> Cost For Attendee 1:</span>
      <input type="text" name="sum1" id="totalCost" size="10" readonly="readonly" style="background-color:#E0E0E0; font-weight:bold;" /></div>
    
    
    <br />
    <br />
    
    <div>
      <div>
        <p><span class="style1">Friday Class:</span> 
            <select id="fridayClass2" >
              <option>  </option>
                    <option value="Class1"> Class 1 </option>
                    <option value="Class2"> Class 2</option>
                    <option value="Class3"> Class 3 </option>
          </select>
        </p>
        <p>  <span class="style1">Saturday Class:</span> 
            <select id="saturdayClass2" >
              <option>  </option>
                    <option value="Class1"> Class 1 </option>
                    <option value="Class2"> Class 2</option>
                    <option value="Class3"> Class 3 </option>
          </select>
        </p>
    </div>
      <div><span class="style1"> Cost For Attendee 2:</span>
      <input type="text" name="sum2" id="totalCost2" size="10" readonly="readonly" style="background-color:#E0E0E0; font-weight:bold;"/></div>
      
        <div><span class="style1"> <br />
          <br />
        TOTAL COST:</span>
          <input type="text" name="sum" id="totalCostAll"/>
      <br />
      <br />
      <br />
      </div>
    
    <script>
    window.onload = function () {
      var $ = function(x){return document.getElementById(x)},
          friday = $('fridayClass'),
          saturday = $('saturdayClass'),
          totalCost = $('totalCost');
      	friday.onchange = saturday.onchange = function () {
        totalCost.value = '$' + [0,99,159][1*(friday.selectedIndex > 0) + 1*(saturday.selectedIndex > 0)] + '.00';
      };
          fridayTwo = $('fridayClass2'),
          saturdayTwo = $('saturdayClass2'),
          totalCostTwo = $('totalCost2');
      	fridayTwo.onchange = saturdayTwo.onchange = function () {
        totalCostTwo.value = '$' + [0,99,159][1*(fridayTwo.selectedIndex > 0) + 1*(saturdayTwo.selectedIndex > 0)] + '.00';
      };
      	
    	totalCostAll = $('totalCostAll');
        totalCostAll.value = '$' + (totalCost.value * 1) + (totalCostTwo.value * 1) + '.00';
    };
    </script>
    </form>
    </div>
    </body>
    </html>

  • #7
    Regular Coder
    Join Date
    Sep 2011
    Location
    Sweden
    Posts
    154
    Thanks
    1
    Thanked 22 Times in 22 Posts
    Here you go:
    Code:
    window.onload = function () {
      // Variable declarations and a $-alias for document.getElementById;
      var $ = function(x){return document.getElementById(x)},
          friday = $('fridayClass'),
          saturday = $('saturdayClass'),
          totalCost = $('totalCost'),
          fridayTwo = $('fridayClass2'),
          saturdayTwo = $('saturdayClass2'),
          totalCostTwo = $('totalCost2'),
          totalCostAll = $('totalCostAll');
          
      // Onchange events for select elements
      friday.onchange = saturday.onchange = function () {
        totalCost.value = '$' + [0,99,159][1*(friday.selectedIndex > 0) + 1*(saturday.selectedIndex > 0)] + '.00';
        calcTotal();
      };     
      fridayTwo.onchange = saturdayTwo.onchange = function () {
        totalCostTwo.value = '$' + [0,99,159][1*(fridayTwo.selectedIndex > 0) + 1*(saturdayTwo.selectedIndex > 0)] + '.00';
        calcTotal();
      };
      
      // A function to calculate the total
      var calcTotal = function(){
        totalCostAll.value = '$' 
          + (totalCost.value.split('$').join('')/1 + totalCostTwo.value.split('$').join('')/1) 
          + '.00';
      }
    };
    B.t.w. shouldn't you make the "totalCostAll" field read only

  • Users who have thanked ironboy for this post:

    jughead47 (09-28-2011)

  • #8
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thank you!

  • #9
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts
    ironboy one more requests. This should be the last one! We're wanting to add a third day and multiple classes now.

    CONDITIONS:
    If a person selects one or multiple Friday Classes OR one or multiple Saturday Classes the cost is $99. (One Day Package $99)
    If a person selects one or multiple Friday Classes AND one or multiple Saturday Class the cost is $159. (Two Day Package $159)
    If a person then adds a Sunday class we add $39 to the total. (Add Sunday $39)

    (EXAMPLES: two Friday classes and a Sunday class would total $138; Two Friday Classes, One Saturday, and Sunday Class would be $198)

    I'm getting nowhere with my coding tries today.


    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" xml:lang="en" lang="en">
    <head>
    <title>Test</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    
    
    
    </head>
    <body>
    <div>
      <div>
      <form name="form">
        <p><span class="style1">Friday Class:</span> 
            <select id="fridayClass1-1" >
              <option>  </option>
                    <option value="Class1"> Class 1 </option>
                    <option value="Class2"> Class 2</option>
                    <option value="Class3"> Class 3 </option>
          </select>
        </p>
        <p><span class="style1">Friday Class:</span>
          <select id="fridayClass1-2" >
            <option> </option>
            <option value="Class1"> Class 1 </option>
            <option value="Class2"> Class 2</option>
            <option value="Class3"> Class 3 </option>
          </select>
    </p>
    <p>  <span class="style1">Saturday Class:</span>
      <select id="saturdayClass1-1" >
        <option> </option>
        <option value="Class1"> Class 1 </option>
        <option value="Class2"> Class 2</option>
        <option value="Class3"> Class 3 </option>
      </select>
    </p>
    <p><span class="style1">Saturday Class:</span>
      <select id="saturdayClass1-2" >
        <option> </option>
        <option value="Class1"> Class 1 </option>
        <option value="Class2"> Class 2</option>
        <option value="Class3"> Class 3 </option>
      </select>
    </p>
    <p>  <span class="style1">Sunday Class:</span> 
          <select id="sundayClass1" >
              <option>  </option>
                    <option value="Class1"> Class 1 </option>
                    <option value="Class2"> Class 2</option>
                    <option value="Class3"> Class 3 </option>
          </select>
        </p>
    
      <div><span class="style1"> Cost For Attendee 1:</span>
      <input type="text" id="totalCost1" size="10" readonly="readonly" style="background-color:#E0E0E0; font-weight:bold;" /></div>
    
    
    <br />
    <br />
    
    <div>
      <div>
        <p><span class="style1">Friday Class:</span> 
            <select id="fridayClass2-1" >
              <option>  </option>
                    <option value="Class1"> Class 1 </option>
                    <option value="Class2"> Class 2</option>
                    <option value="Class3"> Class 3 </option>
          </select>
        </p>
        <p><span class="style1">Friday Class:</span>
          <select id="fridayClass2-2" >
            <option> </option>
            <option value="Class1"> Class 1 </option>
            <option value="Class2"> Class 2</option>
            <option value="Class3"> Class 3 </option>
          </select>
    </p>
        <p>  <span class="style1">Saturday Class:</span> 
            <select id="saturdayClass2-1" >
              <option>  </option>
                    <option value="Class1"> Class 1 </option>
                    <option value="Class2"> Class 2</option>
                    <option value="Class3"> Class 3 </option>
          </select>
        </p>
        <p><span class="style1">Saturday Class:</span>
          <select id="saturdayClass2-2" >
            <option> </option>
            <option value="Class1"> Class 1 </option>
            <option value="Class2"> Class 2</option>
            <option value="Class3"> Class 3 </option>
          </select>
    </p>
        <p>  <span class="style1">Sunday Class:</span> 
            <select id="sundayClass2" >
              <option>  </option>
                    <option value="Class1"> Class 1 </option>
                    <option value="Class2"> Class 2</option>
                    <option value="Class3"> Class 3 </option>
          </select>
        </p>
    </div>
      <div><span class="style1"> Cost For Attendee 2:</span>
      <input type="text" id="totalCost2" size="10" readonly="readonly" style="background-color:#E0E0E0; font-weight:bold;"/></div>
      
        <div><span class="style1"> <br />
          <br />
        TOTAL COST:</span>
          <input type="text" id="totalCostAll" size="10" readonly="readonly" style="background-color:#E0E0E0; font-weight:bold;"/>
      <br />
      <br />
      <br />
      </div>
    
    <script>
    window.onload = function () {
      // Variable declarations and a $-alias for document.getElementById;
      var $ = function(x){return document.getElementById(x)},
          fridayOneOne = $('fridayClass1-1'),
    	  fridayOneTwo = $('fridayClass1-2'),
          saturdayOneOne = $('saturdayClass1-1'),
    	  saturdayOneTwo = $('saturdayClass1-2'),
    	  sundayOne = $('sundayClass1-2'),
          totalCostOne = $('totalCost1'),
          
    	  fridayTwoOne = $('fridayClass2-1'),
    	  fridayTwoTwo = $('fridayClass2-2'),
          saturdayTwoOne = $('saturdayClass2-1'),
    	  saturdayTwoTwo = $('saturdayClass2-2'),
    	  sundayTwo = $('sundayClass2'),
          totalCostTwo = $('totalCost2'),
         
    	  totalCostAll = $('totalCostAll');
          
      // Onchange events for select elements
      fridayOneOne.onchange = fridayOneTwo.onchange = saturdayOneOne.onchange = function () {
        totalCostOne.value = '$' + [0,99,99,159][1*(fridayOneOne.selectedIndex > 0) + 1*(fridayOneTwo.selectedIndex > 0) + 1*(saturdayOneOne.selectedIndex > 0)] + '.00';
        calcTotal();
      };     
      fridayTwoOne.onchange = saturdayTwoOne.onchange = function () {
        totalCostTwo.value = '$' + [0,99,159][1*(fridayTwoOne.selectedIndex > 0) + 1*(saturdayTwoOne.selectedIndex > 0)] + '.00';
        calcTotal();
      };
      
      // A function to calculate the total
      var calcTotal = function(){
        totalCostAll.value = '$' 
          + (totalCostOne.value.split('$').join('')/1 + totalCostTwo.value.split('$').join('')/1) 
          + '.00';
      }
    };
    </script>
    </form>
    </div>
    
    
    </body>
    </html>
    Last edited by jughead47; 09-29-2011 at 09:01 PM.

  • #10
    Regular Coder
    Join Date
    Sep 2011
    Location
    Sweden
    Posts
    154
    Thanks
    1
    Thanked 22 Times in 22 Posts
    This is the last one ;-)
    I've rewritten your code, since it was ill suited for expanding on.
    Your rules are a bit unclear to me --> if only Sunday --> 99 ?
    However the new rules section in the code should be easy to understand...


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Test</title>
    <style type="text/css">
    * {margin:0;padding:0;font:13px/130% Verdana, Geneva, sans-serif}
    body {margin:20px}
    p {padding-bottom:12px}
    p.extra {padding-bottom:36px}
    label {display:inline-block;width:200px}
    select {width:150px}
    input.cost {background-color:#E0E0E0; font-weight:bold; width:146px;text-align:right}
    </style>
    <script type="text/javascript">
    onload = function(){
      
      var formatPrice = function(x){
        x = (x + .0001) + '';
        x = '$' + x.substring(0,x.lastIndexOf('.')+3);
        return x
      };
      
      var createHTMLandEventHandlers = function(){
        // data
        var attendees = ['Attendee 1','Attendee 2'];
        var selects = ['Friday class*1','Friday class*2','Saturday class*1','Saturday class*2','Sunday class'];
        var options = ['','Class 1','Class 2','Class 3'];
        // create html
        var html = ['<form action="" id="regForm">'];
        for(var i = 0 ; i < attendees.length; i++){
          for(var j = 0 ; j < selects.length; j++){
            html.push('<p><label>' + selects[j].match(/[^\*]*/)[0] 
              + ':</label> <select name="' + (attendees[i] + '_' + selects[j]).replace(/\W/g,'') + '">');
            for(var k = 0 ; k < options.length; k++){
               html.push('<option value="' + options[k] + '">' + options[k] + '</option>');  
            };
            html.push('</select></p>');
          };
          html.push('<p class="extra"><label>Cost for ' + attendees[i] 
            + ':</label><input class="cost" name="' + attendees[i].replace(/\W/g,'') 
            + '_cost" type="text" readonly="readonly">');
        };
        html.push('<p class="extra"><label>TOTAL COST:</label>'
          + '<input class="cost" name="totalCost" type="text" readonly="readonly"></form>');
        document.body.innerHTML = html.join('');
        // assign event handers to select elements
        var sels = document.getElementById('regForm').getElementsByTagName('select');
        for(var i = 0; i < sels.length;i++){
          sels[i].onchange = function(){calculatePrice(sels)};
        };
        calculatePrice(sels);
      };
      
      var calculatePrice = function(sels){
        // collect data about chosen days for all attendees
        var days = {Friday:0,Saturday:0,Sunday:0};
        var attendees = {}, alabel;
        for(var i = 0; i < sels.length; i++){
          for(var j in days){
            alabel = sels[i].name.split('_')[0];
            attendees[alabel] = attendees[alabel] || {};
            attendees[alabel][j] = attendees[alabel][j] || 0;
            // only add to a day if it is 0, since same price for one or two classes a day
            if(sels[i].name.indexOf(j) >= 0 && sels[i].value && attendees[alabel][j] == 0){
              attendees[alabel][j]++
            }
          }
        };
        // calculate cost and write to form
        var f = document.forms.regForm, total = 0;
        for(var i in attendees){
          // for each attendee
          var a = attendees[i];
          a.sum = 0;
          // rules - pricing for one attendee (each day is either 0 or 1)
          a.Friday + a.Saturday + a.Sunday == 1 && (a.sum = 99);
          a.Friday + a.Saturday == 2 && (a.sum = 159);
          a.Friday + a.Saturday + a.Sunday == 2 && a.Sunday == 1 && (a.sum = 99 + 39);
          a.Friday + a.Saturday + a.Sunday == 3 && (a.sum = 159 + 39);
          // -- end rules
          total += a.sum;
          f[i+'_cost'].value = formatPrice(a.sum);
        };
        f.totalCost.value = formatPrice(total);
      };
    
      createHTMLandEventHandlers();
    };
    
    </script>
    </head>
    <body>
    </body>
    </html>

  • Users who have thanked ironboy for this post:

    jughead47 (09-30-2011)

  • #11
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts
    The form is gone. I see how your pushing the html out. But is it possible to do with regular html field inputs like we were previously. The way it is written now, I can't have different classes on different days.

    Thank you for all your help.
    Last edited by jughead47; 09-30-2011 at 05:00 PM.


  •  

    Posting Permissions

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