calculation using dropdown box and textbox

Question

Before you guys shoot me down for not trying the code, I am very new to Javascript and I need to implement this function into a very important work.

I got the basis dropdown calculation from this thread, Javascript drop-down form math calculation. I modified the code referred from the thread for my codes

Forgive me if my codes is totally wrong, I am still trying to do piece by piece. Will be grateful if you all can help me pinpoint the errors and/or issues.

So back to topic, I want to get the cost for each items, and then count the total cost to be calculated. The JSFiddle link is here. Appreciate for your helps rendered.

HTML CODES

<form name="priceCalc" action="">Laundry (Gentlemen)
<br/>Apparels:
<select name="gapparell" onchange="gentlemanl();">
    <option value="5.00">Tie</option>
    <option value="7.50">Shirt</option>
    <option value="12.50">Jacket</option>
</select>
<br>Quantity:
<input type="text" id="gqtyl" onchange="gentlemanl();" />
<br>
<br/>Dry Cleaning (Gentlemen)
<br/>Apparels:
<select name="gappareld" onchange="gentlemand();">
    <option value="6.00">Tie</option>
    <option value="8.50">Shirt</option>
    <option value="13.50">Jacket</option>
</select>
<br>Quantity:
<input type="text" id="gqtyd" onchange="gentlemand();" />
    <br/><br/><br/>Laundry (Ladies)
<br/>Apparels:
<select name="lapparell" onchange="ladiesl();">
    <option value="5.00">Tie</option>
    <option value="7.50">Shirt</option>
    <option value="12.50">Jacket</option>
</select>
<br>Quantity:
<input type="text" id="lqtyl" onchange="ladiesl();" />
<br>
<br/>Dry Cleaning (Ladies)
<br/>Apparels:
<select name="lappareld" onchange="ladiesd();">
    <option value="6.00">Tie</option>
    <option value="8.50">Shirt</option>
    <option value="13.50">Jacket</option>
</select>
<br>Quantity:
<input type="text" id="lqtyd" onchange="ladiesd();" />
<br>Total Cost:
<input type="text" id="prices">
<br/>
<input type="button" value="Figure out pricing!" onclick="total();">
<br>

JAVASCRIPT CODES

function gentlemanl() {
var Amt = document.priceCalc.gapparell;
var Qty = document.priceCalc.gqtyl;
var price = parseInt(Qty.value) * parseFloat(Amt.value);
document.getElementById("prices").value = price; 
}

function gentlemand() {
var Amt = document.priceCalc.gappareld;
var Qty = document.priceCalc.gqtyd;
var price = parseInt(Qty.value) * parseFloat(Amt.value);
document.getElementById("prices").value = price;
}

function ladiesl() {
var Amt = document.priceCalc.lapparell;
var Qty = document.priceCalc.lqtyl;
var price = parseInt(Qty.value) * parseFloat(Amt.value);
document.getElementById("prices").value = price;
}

function ladiesd() {
var Amt = document.priceCalc.lappareld;
var Qty = document.priceCalc.lqtyd;
var price = parseInt(Qty.value) * parseFloat(Amt.value);
document.getElementById("prices").value = price;
}

function total() {
//I am not sure how the function works
}

You have typos, gentlemanl and ladiesl, not gentleman1 and ladies1. — fuyushimoya
– fuyushimoya, Commented Aug 5, 2015 at 7:44
@fuyushimoya okay, I saw this. But is the code really correct in a sense? because it is still not working — Chris Lee
– Chris Lee, Commented Aug 5, 2015 at 8:20
You have to switch Frameworks & Exts's onload to no wrap - in XXX, see the altered jsfiddle. — fuyushimoya
– fuyushimoya, Commented Aug 5, 2015 at 8:23

Mteuahasan · Accepted Answer · 2015-08-05 08:24:54Z

1

this is a working exemple of what i think you want to do : http://jsfiddle.net/gd12k4mt/5/

function gentleman1() {
    var Amt = document.priceCalc.gapparell;
    var Qty = document.priceCalc.gqtyl;
    return parseInt(Qty.value) * parseFloat(Amt.value);
}

I designed the functions like that. With a return statement for the value of each product * the quantity.

function total() {
if(isNaN(gentleman1())) {
    gentleman_laundry = 0;
} else {
    gentleman_laundry = gentleman1();
}

if(isNaN(gentlemand())) {
     gentleman_dry = 0;   
} else {
     gentleman_dry = gentlemand();
}

if(isNaN(ladies1())) {
   ladies_laundry = 0;   
} else {
   ladies_laundry = ladies1();
}

if(isNaN(ladiesd())){
   ladies_dry = 0;   
} else {
   ladies_dry = ladiesd();
}

var totalPrice = gentleman_laundry+gentleman_dry+ladies_laundry+ladies_dry;

document.getElementById('prices').value = totalPrice;
}

The total function is like that with a test on empty fields. In this purpose I created the variables :

var gentleman_laundry,
    gentlemend_dry,
    ladies_laundry,
    ladies_dry;

Be sure that your functions's name is good : here you have two different names in you're html events and in your script.

I personally did without theses html listeners because we want the total price at the end I guess. So I declared only one listener on the final button.

document.getElementById('submit_button').addEventListener('click', function(){
    total();
})

Hope this helped.

answered Aug 5, 2015 at 8:24

Mteuahasan

5202 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Chris Lee Over a year ago

@Mteuahasn, it works! But i have some question to ask. Is it possible to implement into Wordpress and also have the email feature? For now, I just need the calculation feature but I may be asked to input all the selected field and total cost in an email to send

Mteuahasan Over a year ago

Glad to hear it :) I don't really got what you want to do with the email function. But I guess that it should be possible to implement it in a WordPress. However it's not easy to do and requires specific WordPress development

Chris Lee Over a year ago

Hi, the codes will be on the page (front end admin dashboard), not in the template or css or something.the process is like this: user fills in the field and send it by clicking the button. The email will have these information filled by the user. Because the form is actually meant as a order form. Hence the need for the email function.

Mteuahasan Over a year ago

So this form is like a contact form ? If it is, I think you can use Ninja Form WordPress plugin here and create you're form with it. Then build your script with the Ninja form's data. I think this would work !

Chris Lee Over a year ago

Actually, I would prefer to use free plugin. As far as I know, Ninja Form is not free right? And would the plugin have these functions as shown above which I had been pulling hair for past few hours?

|

Praveen Raj · Accepted Answer · 2015-08-05 11:03:34Z

You can try like this, HTML

<form name="priceCalc" action="">Laundry (Gentlemen)
  <br/>Apparels:
  <select id="gapparell" />
    <option value="5.00">Tie</option>
    <option value="7.50">Shirt</option>
    <option value="12.50">Jacket</option>
  </select>
  <br>Quantity:
  <input type="text" id="gqtyl" />
  <br>
  <br/>Dry Cleaning (Gentlemen)
  <br/>Apparels:
  <select id="gappareld">
    <option value="6.00">Tie</option>
    <option value="8.50">Shirt</option>
    <option value="13.50">Jacket</option>
  </select>
  <br>Quantity:
  <input type="text" id="gqtyd" />
  <br/>
  <br/>
  <br/>Laundry (Ladies)
  <br/>Apparels:
  <select id="lapparell" >
    <option value="5.00">Tie</option>
    <option value="7.50">Shirt</option>
    <option value="12.50">Jacket</option>
  </select>
  <br>Quantity:
  <input type="text" id="lqtyl"/>
  <br>
  <br/>Dry Cleaning (Ladies)
  <br/>Apparels:
  <select id="lappareld" onchange="ladiesd();">
    <option value="6.00">Tie</option>
    <option value="8.50">Shirt</option>
    <option value="13.50">Jacket</option>
  </select>
  <br>Quantity:
  <input type="text" id="lqtyd" onchange="ladiesd();" />
  <br>Total Cost:
  <input type="text" id="prices">
  <br/>
  <input type="button" value="Figure out pricing!" onclick="total()">
  <br>
</form>

This is JS,

 function gentleman1() {
  var price=0;
  var e = document.getElementById('gapparell')
  var Amt = e.options[e.selectedIndex].value;
  var Qty = document.getElementById('gqtyl').value;
  price = parseInt(Qty) * parseFloat(Amt);
  return (isNaN(price)) ? 0 : price;
  //document.getElementById("prices").value = price;
}

function gentlemand() {
  var price=0;
  var e = document.getElementById('gappareld')
  var Amt = e.options[e.selectedIndex].value;
  var Qty = document.getElementById('gqtyd').value;
  price = parseInt(Qty) * parseFloat(Amt);
  return (isNaN(price)) ? 0 : price;
}

function ladies1() {
  var price=0;
  var e = document.getElementById('lapparell')
  var Amt = e.options[e.selectedIndex].value;
  var Qty = document.getElementById('lqtyl').value;
  price = parseInt(Qty) * parseFloat(Amt);
  return (isNaN(price)) ? 0 : price;
}

function ladiesd() {
  var price=0;
  var e = document.getElementById('lappareld')
  var Amt = e.options[e.selectedIndex].value;
  var Qty = document.getElementById('lqtyd').value;
  price = parseInt(Qty) * parseFloat(Amt);
  return (isNaN(price)) ? 0 : price;
}

function total() {
  var price=gentleman1()+gentlemand()+ladiesd()+ladiesd();
 document.getElementById('prices').value=price;

}

Working Demo

Collectives™ on Stack Overflow

calculation using dropdown box and textbox

2 Answers 2

12 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related