Member Avatar for Riteman

A website is under construction. Am struck to a point here:

In the website am building, the clients requirement is that, He offers some works under some payment. So he needs in his services page the kind of drop down list in such a manner that its as below:

say, He offers WEB-DESIGNING is 3 types HTML, Flash and combined one. For HTML he charges Rs.150/page and for Flash Rs.250/page and for combined Rs.200/page (In Indian Rupees). For this I chose 3 Drop down lists:

1. To choose the type of work : Web designing / other works (blah..blah)
2. To choose the type of page : Html / Flash / Combined
3. To choose the no. of pages : 4 / 5 / 6 / 7

then A text field to calculate the sum of amount:
say,
choosing
1. Web designing
2. Combined
3. 4

in text field i should get Rs.800 (becoz 4 X 200 = 800).

How to get this. Pls help me. Thanks in advance to the one who helps me soon.

  • 2 Contributors
  • 2 Replies
  • 141 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Riteman

Dani AI

Generated

Good start and thanks for the initial idea — multiplying a unit price by the page count is the right approach. The simplest, reliable pattern is to keep the unit price on each page-type option (using a data-price attribute), enable/disable dependent selects as the user chooses, and recompute whenever any select changes. Below is a compact, working example you can drop into your page and adapt.

<select id="service">
  <option value="">Select service</option>
  <option value="web">Web designing</option>
  <option value="other">Other</option>
</select>

<select id="pageType" disabled>
  <option value="">Select page type</option>
  <option value="html" data-price="150">HTML</option>
  <option value="flash" data-price="250">Flash</option>
  <option value="combined" data-price="200">Combined</option>
</select>

<select id="pages" disabled>
  <option value="">Pages</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
</select>

<input id="total" type="text" readonly />
<script>
document.addEventListener('DOMContentLoaded', function () {
  var service = document.getElementById('service');
  var pageType = document.getElementById('pageType');
  var pages = document.getElementById('pages');
  var total = document.getElementById('total');

  function calc() {
    var opt = pageType.selectedOptions[0];
    var unit = opt ? Number(opt.dataset.price || 0) : 0;
    var qty = Number(pages.value) || 0;
    var amount = unit * qty;
    total.value = amount ? 'Rs ' + amount.toFixed(0) : '';
  }

  service.addEventListener('change', function () {
    pageType.disabled = !this.value;
    pages.disabled = true;
    pageType.selectedIndex = 0;
    pages.selectedIndex = 0;
    calc();
  });

  pageType.addEventListener('change', function () {
    pages.disabled = !this.value;
    calc();
  });

  pages.addEventListener('change', calc);
});
</script>

Notes and troubleshooting

  • Use Number() or parseInt(x,10) instead of parseInt without a radix to avoid surprises.
  • disabled inputs are not submitted with forms; use a hidden input or readonly if you need the total sent to the server.
  • Always re-check prices on the server — clients can edit data-price in the browser.
  • If services have different page-type lists, generate pageType options dynamically from a server-provided map instead of hard-coding them.

Recommended Answers

All 2 Replies

Member Avatar for floatingDivs

Hi Riteman,

It's failry easy to get the "total" from two fields and output it into a third field.

<script type="text/javascript">
function calculateCost() {
var cost = parseInt(document.getElementById("cost").value);
var quantity = parseInt(quantity.getElementById("quantity").value);
var total = parseInt(document.getElementById("total").value);

total.value = cost * quantity;
}
</script>

<input type="text" id="cost" value="200" disabled />
<input type="text" id="quantity" onkeydown="/>
<input type="text" id="total" disabled />

Member Avatar for Riteman

Thanks for ur reply.. But the code u have specified s useful for me to create a receipt or a bill. But am dealing with the drop down menu.. am having problem there only..! Will pls help me with the question? Thanks 4 ur code...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.