Dropdown values

**rolandvp** · 04-28-2010, 10:51 AM

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

Live test:
http://www.rolandvparidon.nl/test/test.html
Code

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>

Code:

<!-- 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;
    }
  }
}

**vwphillips** · 04-28-2010, 11:48 AM

a strange way of calculating the total but

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%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>

**rolandvp** · 04-28-2010, 12:39 PM

hey vic,

Thanks for the code.

Im only stumbling on a small error as soon as I ad a second dropdown menu. They wont work together. If I set dropdown A to value 10 and then put dropdown B to 1 it shows the latest value change "B1=$95.00" instead of A10 + B1.

Any chance you know how to add this?

Thanks in advance,
I've changed it on my test site:
http://www.rolandvparidon.nl/test/test.html

**vwphillips** · 04-28-2010, 03:44 PM

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.name == "correctieronde"){
      frm.calculatedTotal.value = frm.calculatedTotal.value - frm.previouslySelectedOption.value;
      frm.previouslySelectedOption.value = inputItem.value;
      frm.calculatedTotal.value = frm.calculatedTotal.value*1 + inputItem.value*1;

    }

    else if (inputItem.name == "correctieronde2"){
      frm.calculatedTotal.value = frm.calculatedTotal.value - frm.previouslySelectedOption2.value;
      frm.previouslySelectedOption2.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%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;
  document.selectionForm.previouslySelectedOption2.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" />

           <select name="correctieronde2" 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="previouslySelectedOption2" 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>

Thread: Dropdown values

Thread Tools

Search Thread

Dropdown values

Bookmarks

Bookmarks

Posting Permissions