CODEWITHSUNDEEP
javascriptphphtmlcss
Ciprian Kis
Ciprian Kis

Reputation: 89

price discount for quantity html/java/php

I need a slider on my "Prices" page, that slider will adjust the Quantity just so the customer can get a instant quote for the service..

The quantity should go from 1 to 500 or 1000 but a box to enter the quantity next to it would help.

Another problem is I need different prices for different quantity ranges,

example: 

quantity=1-3 price=20/unit
quantity=4-10 price=17/unit
quantity=11-50 price=15/unit

and so on..

so far I have this, I'm not even sure if I'm miles away or very close and don't realize it... please help.

    <input type="range" min="1" max="1000" value="1" step="1" onchange="sliderChange(this.value)" style="margin-left:5%; margin-right:5%; width:90%;" />
    <br />
    <br />Slider Value = <span id="sliderStatus">1</span> 
    <p id="demo"></p>

    <script>
      var x = 30;
      var z = x * y;


      if (0 < x) {
        var y = 13;
      }
      if (10 < x < 21) {
        var y = 12;
      }
      if (20 < x < 31) {
        var y = 11;
      }
      if (30 < x < 41) {
        var y = 10;
      }
      document.getElementById("demo").innerHTML = z;
    </script>

Upvotes: 2

Views: 927

Answers (3)

devlin carnate
devlin carnate

Reputation: 8591

Here's a start which should start you on the right path to completion: https://jsfiddle.net/adebu2bs/

html:

<input id="slider" type="range" min="1" max="1000" value="1" step="1" style="margin-left:5%; margin-right:5%; width:90%;" />
<br />
<br />Slider Value = <span id="sliderStatus">1</span> 
<p id="demo"></p>

jquery:

$("#slider").on('change',function() {
var selectedQty = $(this).val();
$('#sliderStatus').text(selectedQty);


var itemTotal = 0;
 switch (true) {
    case (selectedQty <= 3) :
        itemTotal = 20 * selectedQty;
        break;
    case (selectedQty <= 10) :
        itemTotal = 17 * selectedQty;
        break;
    default:
        itemTotal = 25 * selectedQty;
        break;
  }
  alert(itemTotal);
  $('#demo').text(itemTotal);
});

Upvotes: 1

raney24
raney24

Reputation: 133

You need a function to call your javascript. Add a button like this:

<button onclick="myFunction()">Try it</button>

Then inside your script, call that function

    function myFunction() {
         var x = document.getElementById("myRange").value;
         // your code with prices
    }

Upvotes: 0

SidTheBeard
SidTheBeard

Reputation: 379

Your html calls the sliderChange function so your JS should be

function sliderChange(number) {
    if(number > 10 && number < 51) {
        $(".demo").html((number*15));
    } else if(number > 4 && number < 11){
        $(".demo").html((number*17));
    } else {
        $(".demo").html((number*20));
    }
}

Then any higher quantity discounts can be made with the copy and paste of the else if block and simply change those numbers to the number you want to have e.g("number > 50 && number < 100)

Upvotes: 1

Related Questions