How do you use a select box input for a calculation? HTML and JS

Question

How do I go about getting an amount from a selected drop down box? For instance

 var alertMessage = 'Thanks for the order ' + field1 + ' ' + field2 + '. Your total is $' + String(parseInt() * parseInt()) + '.00.'; alert(alertMessage);

 Select a product: <br> <select id="productselection"> <option value="blank"></option> <option value="5">Widget 1</option> <option value="10">Widget 2</option> </select> <br>Select a quantitiy: <br> <select id="quantityselection"> <option value="blank"></option> <option value="5">5</option> <option value="10">10</option> </select> <br>Select a Shipping Method: <br> <select id="shippingselection"> <option value="blank"></option> <option value="0">Standard - Free</option> <option value="10">3 day - $10</option> <option value="25">Next Day - $25</option> </select>

I need to calculate an order total with the following constraints

a select box which incorporates a shipping method selection (values should be Standard - free; 3-day - $10; and Next Day - $25)

add 7% sales tax to any order.

Widget 1 is worth $5

Widget 2 is worth $10

I need it to take widget 1 or 2s cash value and multiply it by the quanitity selected, for this case lets just say 5, or 10. It then will add another amount for the shipping cost that is selected. With that it will add a tax of 7% and then sends you and alert message with final cost. I already have part of the final message started from my other code. In the below code field 1 and field 2 are the customers first and last name.

This is what I am trying to implement this for

<!DOCTYPE html>
<html>

<head>
 <link rel="stylesheet" href="styles.css">   <!-- links stylesheet -->
    <h1>JS Order Form</h1> <!-- Heading -->
</head>
<body>

<script src="script.js"> <!--links js -->
</script>

<div align="center">    
<form id="myForm">
 <fieldset>
  <legend>Personal Information:</legend>                       <!-- first Form with first and last name-->
 First Name: <input type="text" id="field1" name="fname"><br><br>
 Last Name: <input type="text" id="field2" name="lname"><br>

 </fieldset>
</form>
</div>
<br>
<div align="center">

<form id="myForm1">                                                 <!-- form 2-->
 <fieldset>
  <legend>Order Info:</legend>
<table style="width:100%">
        <table align="left">         <!-- Setting table constraints-->
        <table border="1">  
  <tr>
    <td>Product</td>
    <td>Price</td>      

  </tr>
  <tr>
    <td>Widget 1</td>            <!-- table contents-->
    <td>$5</td>     

  </tr>
  <tr>
    <td>Widget 2</td>
    <td>$10</td>        

  </tr>
</table>
<br>

  <!-- form 2 with price and quanitity-->
  <!--Price   : <input type="text" id="field3" name="pname"><br><br>
  Quantity: <input type="text" id="field4" name="qname"><br> -->

    Select a product:<br>
                    <select id="productselection">
                        <option value="blank"></option>
                        <option value="5">Widget 1</option>
                        <option value="10">Widget 2</option>
                    </select>
                    <br>
    Select a quantitiy:<br>
                    <select id="quantityselection">
                        <option value="blank"></option>
                        <option value="5">5</option>
                        <option value="10">10</option>
                    </select>
                    <br>
    Select a Shipping Method:<br>
                    <select id="shippingselection">
                        <option value="blank"></option>
                        <option value="0">Standard - Free</option>
                        <option value="10">3 day - $10</option>
                        <option value="25">Next Day - $25 2</option>
                    </select>


    </div>
 </fieldset>
</form>
<div align="center">
<input type="button" onclick="myFunction();myFunction2() ;blankElement('productselection') ;blankElement('shippingselection') ;blankElement('quantityselection');" value="Clear">     <!-- submit and clear buttons-->
<input type="button" onclick="myFunction1()" value="Order">
</div>

function myFunction() {
    document.getElementById("myForm").reset();  //grabs form and clears entrys
}   
function myFunction2() {
    document.getElementById("myForm1").reset(); // clears bottom form
}

function blankElement(id)
{    
    var element = document.getElementById(id);
    element.value = blank;
}



function myFunction1()
{
  var field1 = document.getElementById("field1").value.trim();
  var field1Valid= true;
 var field2 = document.getElementById("field2").value.trim();  // checks to see that a value is inputed 
var field2Valid= true;

if ( field1.length == 0)
 {
        field1Valid= false;
 }                                  // the following checks to see if anything is inputed and returns a true or false/yes or no
 if ( field2.length == 0)
 {
        field2Valid= false;
 }

var formValid= field1Valid && field2Valid && field3Valid && field4Valid; //true if all fields are valid else false 
if( !formValid){
    var alertMessage= 'Please fill in the following ';          //sets a var alert message if it meets criteria
    if( !field1Valid){ alertMessage+= '[First Name] '; }
    if( !field2Valid){ alertMessage+= '[Last Name] '; }       // adds the following fields to the alert if they did not meet criteria of being full

   alert(alertMessage);
    return false;
}
else{
     var alertMessage= 'Thanks for the order '+ field1+ ' '+ field2+ '. Your total is $'+ String(parseInt() * parseInt() )+ '.00.';
    alert(alertMessage);
    return true;           // pushes out alert message by using field1 and field 2 and then multipling field 3 and 4 together to get a total
}


}


</body>
</html>

Answer 1

Check the below answer.

 function Calculate() { var f1 = document.getElementById("productselection"); var field1 = parseInt(f1.options[f1.selectedIndex].value); var f2 = document.getElementById("quantityselection"); var field2 = parseInt(f2.options[f2.selectedIndex].value); var alertMessage = 'Thanks for the order ' + field1 + ' x ' + field2 + '. Your total is $' + (field1 * field2).toFixed(2); alert(alertMessage); }

 Select a product: <br> <select id="productselection"> <option value="blank"></option> <option value="5">Widget 1</option> <option value="10">Widget 2</option> </select> <br>Select a quantitiy: <br> <select id="quantityselection"> <option value="blank"></option> <option value="5">5</option> <option value="10">10</option> </select> <br>Select a Shipping Method: <br> <select id="shippingselection"> <option value="blank"></option> <option value="0">Standard - Free</option> <option value="10">3 day - $10</option> <option value="25">Next Day - $25</option> </select> <br> <br> <button type="button" onClick="Calculate()">Calculate</button>

How do you use a select box input for a calculation? HTML and JS

Question

1 answers

solution1
0 ACCPTED 2016-03-30 06:09:27

How do you use a select box input for a calculation? HTML and JS

Question

1 answers

solution1 0 ACCPTED 2016-03-30 06:09:27

solution1
0 ACCPTED 2016-03-30 06:09:27