www.webdeveloper.com
Results 1 to 5 of 5

Thread: Dropdown to totalvalue

  1. #1
    Join Date
    Apr 2010
    Posts
    3

    Dropdown to totalvalue

    Hi dear Scripters,

    Im working on a payment site and have my radio and checkbox buttons redirected to a totalvalue field. I only cant get my dropdown to work aswell.
    Each value of te dropdown is worth $95 x value.

    Thanks in advance
    Code:
    <body onload="InitForm();" onreset="InitForm();">
    
      <form method="POST" name="selectionForm">
        <b>Pizza Order</b><br>
        Small $10.00
        <input type="checkbox" name="Steak"   value="10.00"  onclick="this.form.total.value=calculateTotal(this);">  
        Medium $12.00
        <input type="checkbox" name="Chicken" value="12.00" onclick="this.form.total.value=calculateTotal(this);">  
        Large $15.00
        <input type="checkbox" name="Sushi"   value="15.00"  onclick="this.form.total.value=calculateTotal(this);">
        <br><br>
        <b>Extra Toppings (only one selection allowed):</b> <br>
          <input type="radio" name="Sauce" value="0.00" onclick="this.form.total.value=calculateTotal(this);"> None
        <br>
          <input name="Sauce" type="radio"  value="1.00" onclick="this.form.total.value=calculateTotal(this);"> Extra Cheese $1.00
        <br>
          <input type="radio" name="Sauce" value="2.00" onclick="this.form.total.value=calculateTotal(this);"> Vegetarian $2.00
        <br>
          <input type="radio" name="Sauce" value="3.00" onclick="this.form.total.value=calculateTotal(this);"> Meat $3.00
        <br>
        <br>
                <select name="correctieronde" >
              <option value="0" onclick="this.form.total.value=calculateTotal(this);">0</option>
              <option value="95" onclick="this.form.total.value=calculateTotal(this);">1</option>
              <option value="190" onclick="this.form.total.value=calculateTotal(this);">2</option>
              <option value="285">3</option>
              <option value="380">4</option>
              <option value="475">5</option>
              <option value="570">6</option>
              <option value="665">7</option>
              <option value="760">8</option>
              <option value="855">9</option>
              <option value="950">10</option>
            </select>
    
    <br >
        <input type="hidden" name="calculatedTotal" value="0">
        <input type="hidden" name="previouslySelectedRadioButton" value="0">
        <strong>Your total is:</strong>
        <input type="text" name="total" readonly onfocus="this.blur();">
      </form>
    
    </body>
    [/QUOTE]
    
    [QUOTE]
    <!-- Paste this code into an external JavaScript file  -->
    
    /* This script and many more are available free online at
    The JavaScript Source :: http://javascript.internet.com
    Created by: Kevin Hartig :: http://www.grafikfx.net/ */
    
    // Calculate the total for items in the form which are selected.
    function calculateTotal(inputItem) {
      with (inputItem.form) {
        // Process each of the different input types in the form.
        if (inputItem.type == "radio") {   // Process radio buttons.
          // Subtract the previously selected radio button value from the total.
          calculatedTotal.value = eval(calculatedTotal.value) - eval(previouslySelectedRadioButton.value);
          // Save the current radio selection value.
          previouslySelectedRadioButton.value = eval(inputItem.value);
          // Add the current radio button selection value to the total.
          calculatedTotal.value = eval(calculatedTotal.value) + eval(inputItem.value);
        } else {   // Process check boxes.
          if (inputItem.checked == false) {   // Item was uncheck. Subtract item value from total.
              calculatedTotal.value = eval(calculatedTotal.value) - eval(inputItem.value);
          } else {   // Item was checked. Add the item value to the total.
              calculatedTotal.value = eval(calculatedTotal.value) + eval(inputItem.value);
          }
    	}
    
    	
    
        // Total value should never be less than 0.
        if (calculatedTotal.value < 0) {
          InitForm();
        }
    
        // Return total value.
        return(formatCurrency(calculatedTotal.value));
      }
    }
    
    // Format a value as currency.
    function formatCurrency(num) {
      num = num.toString().replace(/\$|\,/g,'');
      if(isNaN(num))
         num = "0";
      sign = (num == (num = Math.abs(num)));
      num = Math.floor(num*100+0.50000000001);
      cents = num%100;
      num = Math.floor(num/100).toString();
      if(cents<10)
          cents = "0" + cents;
      for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
          num = num.substring(0,num.length-(4*i+3)) + ',' + num.substring(num.length-(4*i+3));
      return (((sign)?'':'-') + '$' + num + '.' + cents);
    }
    
    // This function initialzes all the form elements to default values.
    function InitForm() {
      // Reset values on form.
      document.selectionForm.total.value='$0';
      document.selectionForm.calculatedTotal.value=0;
      document.selectionForm.previouslySelectedRadioButton.value=0;
      document.selectionForm.previouslySelectedOption.value=0;
    
      // Set all checkboxes and radio buttons on form to unchecked.
      for (i=0; i < document.selectionForm.elements.length; i++) {
        if (document.selectionForm.elements[i].type == 'checkbox' | document.selectionForm.elements[i].type == 'radio') {
          document.selectionForm.elements[i].checked = false;
        }
      }
    }
    I've created a test environment on my site:
    http://www.rolandvparidon.nl/test/test.html

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    where in your html is the element this line

    Code:
     
    document.selectionForm.previouslySelectedOption.value=0;
    is referring to?

  3. #3
    Join Date
    Apr 2010
    Posts
    3
    Its refering to the previously selected radio button. Which is in the js file aswell.

    Im not sure if it clarify's your question. The radio buttons and checkboxes are working fine.
    Only the dropdown values just keep adding. The previously selected for radio button clears that error for radio buttons i think.

    I;ve rewritten some code, its not origanally mine.
    You can play around with the code on the testsite ive set-up.

    Thanks for your time.

  4. #4
    Join Date
    Apr 2010
    Posts
    3
    I've made a small update.
    The dropdown is working correct now. The only problem is when a 2nd dropdown value is selected. It's overwriting the first dropdown selected value.
    See: http://www.rolandvparidon.nl/test/test.html
    Does anyone have a tip for me?

    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" />
    <script type="text/javascript">
    <!-- Paste this code into an external JavaScript file -->

    /* This script and many more are available free online at
    The JavaScript Source :: http://javascript.internet.com
    Created by: Kevin Hartig :: http://www.grafikfx.net/ */

    // Calculate the total for items in the form which are selected.
    function calculateTotal(inputItem) {
    var frm=inputItem.form
    // Process each of the different input types in the form.
    if (inputItem.type == "radio") { // Process radio buttons.
    // Subtract the previously selected radio button value from the total.
    frm.calculatedTotal.value = frm.calculatedTotal.value - frm.previouslySelectedRadioButton.value;
    // Save the current radio selection value.
    frm.previouslySelectedRadioButton.value = inputItem.value;
    // Add the current radio button selection value to the total.
    frm.calculatedTotal.value = frm.calculatedTotal.value*1 + inputItem.value*1;
    }
    else if (inputItem.type == "checkbox"){ // Process check boxes.
    if (inputItem.checked == false) { // Item was uncheck. Subtract item value from total.
    frm.calculatedTotal.value = frm.calculatedTotal.value - inputItem.value;
    } else { // Item was checked. Add the item value to the total.
    frm.calculatedTotal.value = frm.calculatedTotal.value*1 + inputItem.value*1;
    }
    }
    else if (inputItem.type == "select-one"){
    frm.calculatedTotal.value = frm.calculatedTotal.value - frm.previouslySelectedOption.value;
    frm.previouslySelectedOption.value = inputItem.value;
    frm.calculatedTotal.value = frm.calculatedTotal.value*1 + inputItem.value*1;

    }


    // Total value should never be less than 0.
    if (frm.calculatedTotal.value < 0) {
    InitForm();
    }
    frm.total.value=formatCurrency(frm.calculatedTotal.value);
    // Return total value.
    }

    // Format a value as currency.
    function formatCurrency(num) {
    num = num.toString().replace(/\$|\,/g,'');
    if(isNaN(num))
    num = "0";
    sign = (num == (num = Math.abs(num)));
    num = Math.floor(num*100+0.50000000001);
    cents = num&#37;100;
    num = Math.floor(num/100).toString();
    if(cents<10)
    cents = "0" + cents;
    for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
    num = num.substring(0,num.length-(4*i+3)) + ',' + num.substring(num.length-(4*i+3));
    return (((sign)?'':'-') + '$' + num + '.' + cents);
    }

    // This function initialzes all the form elements to default values.
    function InitForm() {
    // Reset values on form.
    document.selectionForm.total.value='$0';
    document.selectionForm.calculatedTotal.value=0;
    document.selectionForm.previouslySelectedRadioButton.value=0;
    document.selectionForm.previouslySelectedOption.value=0;

    // Set all checkboxes and radio buttons on form to unchecked.
    for (i=0; i < document.selectionForm.elements.length; i++) {
    if (document.selectionForm.elements[i].type == 'checkbox' | document.selectionForm.elements[i].type == 'radio') {
    document.selectionForm.elements[i].checked = false;
    }
    }
    }
    </script>

    <title>Untitled Document</title>
    </head>
    <body onload="InitForm();" onreset="InitForm();">
    <form method="POST" name="selectionForm">
    <b>Pizza Order</b><br>

    Small $10.00
    <input type="checkbox" name="Steak" value="10.00" onclick="calculateTotal(this);">
    Medium $12.00
    <input type="checkbox" name="Chicken" value="12.00" onclick="calculateTotal(this);">
    Large $15.00
    <input type="checkbox" name="Sushi" value="15.00" onclick="calculateTotal(this);">
    <br><br>
    <b>Extra Toppings (only one selection allowed):</b> <br>
    <input type="radio" name="Sauce" value="0.00" onclick="calculateTotal(this);"> None
    <br>

    <input name="Sauce" type="radio" value="1.00" onclick="calculateTotal(this);"> Extra Cheese $1.00
    <br>
    <input type="radio" name="Sauce" value="2.00" onclick="calculateTotal(this);"> Vegetarian $2.00
    <br>
    <input type="radio" name="Sauce" value="3.00" onclick="calculateTotal(this);"> Meat $3.00
    <br>
    <br>
    <select name="correctieronde" onchange="calculateTotal(this);">
    <option value="0" >0</option>

    <option value="95" >1</option>
    <option value="190" >2</option>
    <option value="285">3</option>
    <option value="380">4</option>
    <option value="475">5</option>
    <option value="570">6</option>

    <option value="665">7</option>
    <option value="760">8</option>
    <option value="855">9</option>
    <option value="950">10</option>
    </select>
    <input type="hidden" name="previouslySelectedOption" value="0" />

    <br >
    <input type="hidden" name="calculatedTotal" value="0">

    <input type="hidden" name="previouslySelectedRadioButton" value="0">
    <strong>Your total is:</strong>
    <input type="text" name="total" readonly onfocus="this.blur();">
    </form>

    </body>
    </html>

  5. #5
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,662
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Thread Information

Users Browsing this Thread

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

Posting Permissions

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



Recent Articles