CODEWITHSUNDEEP
javascriptphpjqueryajaxjquery-ui
yolo
yolo

Reputation: 41

calculating price with two values

So I have something like this...

I have a form where you select your gender and input your weight. each gender has different ranges of prices for example if your a male and your weight is greater than 200 your price is 20, if your a female and your weight is greater than 200 your price is 15, and if your male and your weight is less than 200 your price is 10, for the female if her weight is less than 200 her price is 7 . i have been trying to make it possible with jquery and PHP but it only seems to work with select option and won't work with input data.

this is my index.php

   <div class="container">

      <div class="row">
       <div class="col-xs-3 col-xs-offset-2">
        <h3>gender:</h3>
        <!-- select gender -->
         <select class="form-control" id="gender">
         <option>female</option>
        <option>male</option>
         </select>
        </div>
       <div class="col-xs-3">
         <h3>weight </h3>
          <!-- input weight -->
       <input type="" name="weight" id="weight">
        </div>

         </div>
      <div id="ticketInfo">
        <h3 id="yourTicket">No gender Selected</h3>
     </div>
     </div>
    <script src="js/jquery-1.12.2.js"></script>
   <script src="js/bootstrap.js"></script>
     <script src="js/scripts.js"></script>

this is my script 

  function Ticket(gender, weight) {
  this.gender=gender;
  this.weight=weight;

     }

   Ticket.prototype.getPrice=function() {
     var price;

   if((this.gender==="male ")||(this.weight=>"200 ")){
       price=20;
        }
    if((this.gender==="female ")||(this.weight=>"200 ")) {
      price=15;
     }
     if((this.gender==="male ")||(this.weight=<"200 ")) {
    price=10;
    }
   if((this.gender==="female ")||(this.weight=<"200 ")) {
    price=7;
   }

  return price;
 }



$("select").change(function() {
  var genderOptions=[];
  $("select option:selected").each(function() {
   genderOptions.push($(this).text() + " ");
 });
 var newTicket = new 
 Ticket(genderOptions[0],genderOptions[1],genderOptions[2]);
 $("#yourTicket").text(newTicket.gender + newTicket.weight + " $" + 
 newTicket.getPrice().toFixed(2));
   });

at the end in trying to multiply the price by the weight. any help will be really appreciated, thanks in advance.

Upvotes: 0

Views: 264

Answers (3)

Jeeva
Jeeva

Reputation: 3

Remove the empty string added in gender options.push.Afterwards ,working fine

genderOptions.push($(this).text())

Upvotes: 1

ph1409
ph1409

Reputation: 113

Try this with Syed's solution.

Logic should be using && operator not ||

    function Ticket(gender, weight) {
        this.gender=gender;
      this.weight=weight;
    }

    Ticket.prototype.getPrice=function() {
      var price;
      if(this.gender==="male" && this.weight > 200){
    price=20;
  }
  else if(this.gender==="female" && this.weight > 200) {
    price=15;
  }
  else if(this.gender==="male" && this.weight <= 200) {
    price=10;
  }
  else if(this.gender==="female" && this.weight <= 200) {
    price=7;

      }
      return price;
    }

    $("#calculate").click(function() {
        var genderOptions=[];
        $("select option:selected").each(function() {
            genderOptions.push($(this).text() + " ");
        });

        var newTicket = new 
        Ticket($("#gender").val(),$('#weight').val());
        var multiplyVal = newTicket.weight * newTicket.getPrice();
        $("#yourTicket").text("Gender: " + newTicket.gender + " Weight: " + newTicket.weight + " $" + newTicket.getPrice().toFixed(2) + " and your multiplied value is " + multiplyVal);
    });

<div class="col-xs-3 col-xs-offset-2">
  <h3>gender:</h3>
  <!-- select gender -->
  <select class="form-control" id="gender"> 
    <option value="female" selected>female</option>
    <option value="male">male</option>
  </select>
</div>
<div class="col-xs-3">
  <h3>weight </h3>
  <!-- input weight -->
  <input type="" name="weight" id="weight">
</div>
<div id="ticketInfo">
  <h3 id="yourTicket">No gender Selected</h3>
</div>
<button id="calculate" >Calculate</button>

Upvotes: 1

Syed mohamed aladeen
Syed mohamed aladeen

Reputation: 6755

Your question is unclear.as per my understanding I provide you a solution.

  1. You have mistakes in your if condition. for eg. you need to check as >= instead you checked as => which is wrong.
  2. Also it should be && instead of ||
  3. And you missed to pass the weight variable to the Ticket class.
  4. remove quotes around 200 in your if condition
  5. you have pushed a space in genderOptions. so I removed it.

I fixed these issues.

function Ticket(gender, weight) {
  this.gender=gender;
  this.weight=weight;
}

Ticket.prototype.getPrice=function() {
  var price;
  if(this.gender==="male" && this.weight > 200 ){
    price=20;
  }
  else if(this.gender==="female" && this.weight > 200 ) {
    price=15;
  }
  else if(this.gender==="male" && this.weight <= 200 ) {
    price=10;
  }
  else if(this.gender==="female" && this.weight <= 200 ) {
    price=7;
  }
  return price;
}



$("select").change(function() {
  var genderOptions=[];
  $("select option:selected").each(function() {
    genderOptions.push($(this).text());
  });

  var newTicket = new Ticket(genderOptions[0] , $('#weight').val());
  var multiplyVal = newTicket.weight * newTicket.getPrice();
  $("#yourTicket").text(newTicket.gender + newTicket.weight + " $" + newTicket.getPrice().toFixed(2) + " and your multiplied value is " + multiplyVal);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>   <div class="row">
       <div class="col-xs-3 col-xs-offset-2">
        <h3>gender:</h3>
        <!-- select gender -->
         <select class="form-control" id="gender">
         <option value="female">female</option>
        <option value="male">male</option>
         </select>
        </div>
       <div class="col-xs-3">
         <h3>weight </h3>
          <!-- input weight -->
       <input type="" name="weight" id="weight">
        </div>

         </div>
      <div id="ticketInfo">
        <h3 id="yourTicket">No gender Selected</h3>
     </div>
     </div>

Upvotes: 1

Related Questions