CODEWITHSUNDEEP
javascript
Sugma
Sugma

Reputation: 67

Matching dropdown quantity and calculating total price

I want to select the number of person attending and it must be matched with meal quantity.

User must specify whether vegetarian meal or non-vegetarian. A veg meal costs $5 while a non-veg meal cost $10. For example, if there's 3 person attending with 2 vegetarian and 1 non-vegetarian, the total price of meal will be $20 total. Also the meal quantity options must have only 3 person in total. How do I do this in Javascript only?

How do I display the final price also?

function validate() {
  var dn = document.getElementById("dropDN").value;
  return false;
}

function showInput() {
  document.getElementById('displaydn').innerHTML =
    document.getElementById("dropDN").value;
}
<form class="myForm" onsubmit="return validate();">
  Number of person attending:
  <select id="dropDN">
    <option value="">Select one</option>
    <option value="One">1</option>
    <option value="Two">2</option>
    <option value="Three">3</option>
    <option value="Four">4</option>
  </select>
  <br />
  <br />Meal Quantity Options: Vegetarian
  <input type="checkbox" onclick="" name="" id="veg">
  <input type="number" max="4" />
  <br /> Non-Vegetarian
  <input type="checkbox" onclick="" name="" id="nonveg">
  <input type="number" max="4" />
  <br />
  <br />

  <br />
  <input type="submit" onclick="showInput()">
  <br>
  <br> Number of person attending: <span id="displaydn"> </span>
  <br />
</form>

Upvotes: 0

Views: 88

Answers (1)

Lee Taylor
Lee Taylor

Reputation: 7994

  1. Listen to the change event for both input controls.
  2. When they change, update the respective global variable (either vegetarian or nonVegetarian and then update the total meals and cost values.

var vegetarian = 0;
var nonVegetarian = 0;
var cost = 0.00;

document.querySelector('#veg').addEventListener('change', function(e)
{
  vegetarian = parseInt(document.querySelector('#veg').value, 10);
  
  if(vegetarian + nonVegetarian > 4) // Make sure we never have more than 4 customers
  {
    nonVegetarian--;
    document.querySelector('#nonveg').value = nonVegetarian;
  }
    
  update();
});

document.querySelector('#nonveg').addEventListener('change', function(e)
{
  nonVegetarian = parseInt(document.querySelector('#nonveg').value, 10);
  if(vegetarian + nonVegetarian > 4) // Make sure we never have more than 4 customers
  {
    vegetarian--;
    document.querySelector('#veg').value = vegetarian;
  }
  update();
});

var update = function()
{
  document.querySelector('#attending').innerText = vegetarian + nonVegetarian;
  document.querySelector('#cost').innerText = (vegetarian*5) + (nonVegetarian *10);
};

update();
<form class="myForm" onsubmit="return validate();">
  Meal Quantity Options: Vegetarian
  <input id="veg" type="number" min="0" max="4" value="0" /><br /> 
  Non-Vegetarian
  
  <input id="nonveg" type="number" min="0" max="4" value="0" /><br />
  <br />

  <br> Number of people attending: <span id="attending"></span>
  <br> Cost : $<span id="cost"></span>
  <br />
</form>

Upvotes: 1

Related Questions