by pvijeh
4 replies
Can any one suggest a tutorial that would teach me to build something like this "bottle service price calculator"

https://www.ezvip.com/events/36025/#tables-estimate

Looks pretty simple, but I don't know any PHP


Thanks

Peter
#php #tutorial
  • Profile picture of the author phpg
    You don't need php for this, it's javascript.
    {{ DiscussionBoard.errors[8267936].message }}
    • Profile picture of the author Brandon Tanner
      Looks like they are using jQuery AND PHP for that particular calculator. If you look at that page's source code, then scroll about half way down it -- you'll see a bunch of <option> tags and then jQuery code below it. One of the jQuery lines calls a PHP file (orderprocess.php) and extracts data from it.

      But phpg is correct that you don't need to use PHP to create a calculator like this. You can do it in pure Javascript / jQuery.

      Here's a quick example how something like that could be accomplished using jQuery (assuming that you want the cost for each person to be $100)...

      HTML Code:
      <!DOCTYPE html>
      <html>
      <head>
          <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
      </head>
      
      <body>
      
      <label>Guys</label>
      <select id="guys" class="people">
          <option value="0" selected>0</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
      </select>
      
      <label>Girls</label>
      <select id="girls" class="people">
          <option value="0" selected>0</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
      </select>
      
      <label>Total Cost</label>
      <input type="text" id="cost" value="$0">
      
      <script>
      $('.people').change(function() { 
          var quantity = $('#guys').val() * 1 + $('#girls').val() * 1;
          var price = "$" + quantity * 100;
          $('#cost').val(price);
      });
      </script>
      
      </body>
      </html>
      Signature

      {{ DiscussionBoard.errors[8268495].message }}
  • Profile picture of the author pvijeh
    thanks! very helpful
    {{ DiscussionBoard.errors[8269316].message }}

Trending Topics