Calculator using Dropdown in PHP

Submitted by: 
Language: 
Visitors have accessed this post 2013 times.

In this tutorial, we are going to create Calculator using Dropdown in PHP. I create this simple program in PHP using the drop-down menu to select a mathematical operator such as Addition, Subtraction, Multiplication, and Division.

Check the live demo, click the button below.

First, we have to create the markup for this program. This source code contains two TextBox where the user enters the desired numeric value and one combo box where they can select in what mathematical operator they have to use.

  1. <form method="post" class="form-inline">
  2. <div>
  3. <label>First Value</label>
  4. <input type="text" name="first_value" value="<?php echo $first_value; ?>" placeholder="First Value . . . . ." autofocus="autofocus" />
  5. </div>
  6. <div>
  7. <label>Select Operations</label>
  8. <select size="1" name="operations">
  9. <option value="+">Add</option>
  10. <option value="-">Subtract</option>
  11. <option value="*">Multiply</option>
  12. <option value="/">Divide</option>
  13. </select>
  14. </div>
  15. <div>
  16. <label>Second Value</label>
  17. <input type="text" name="second_value" value="<?php echo $second_value; ?>" placeholder="Second Value . . . . ." autofocus="autofocus" />
  18. </div>
  19. <button type="submit" name="calculate">Calculate . . .</button>
  20. </form>

To execute the calculator, we need to construct the PHP query where the operators can run after hit the calculate button on the web page. Let's create one by one.

For Addition

  1. <div style="width:35%; font-size:20px; text-align:center; margin-top:10px;">
  2. <?php if ($_REQUEST['operations'] == '+') {?>
  3. <div class="alert alert-info" role="alert">Result: <?php echo $first_value + $second_value; ?></div>
  4. <?php } ?>
  5. </div>

Sample Output for Addition

Result

For Subtraction

  1. <div style="width:35%; font-size:20px; text-align:center; margin-top:10px;">
  2. <?php if ($_REQUEST['operations'] == '-') {?>
  3. <div class="alert alert-info" role="alert">Result: <?php echo $first_value - $second_value; ?></div>
  4. <?php } ?>
  5. </div>

Sample Output for Subtraction

Result

For Multiplication

  1. <div style="width:35%; font-size:20px; text-align:center; margin-top:10px;">
  2. <?php if ($_REQUEST['operations'] == '*') {?>
  3. <div class="alert alert-info" role="alert">Result: <?php echo $first_value * $second_value; ?></div>
  4. <?php } ?>
  5. </div>

Sample Output for Multiplication

Result

For Division

  1. <div style="width:35%; font-size:20px; text-align:center; margin-top:10px;">
  2. <?php if ($_REQUEST['operations'] == '/') {?>
  3. <div class="alert alert-info" role="alert">Result: <?php echo $first_value / $second_value; ?></div>
  4. <?php } ?>
  5. </div>

Sample Output for Division

Result

For the complete source code.

Using the source code below, you can use a mathematical operator such as Addition, Subtraction, Multiplication, and Division.

  1. <div style="width:35%; font-size:20px; text-align:center; margin-top:10px;">
  2. <?php
  3. if ($_REQUEST['operations'] == '+')
  4. { ?>
  5. <div class="alert alert-info" role="alert">Result: <?php echo $first_value + $second_value; ?></div>
  6. <?php
  7. }
  8. elseif ($_REQUEST['operations'] == '-')
  9. { ?>
  10. <div class="alert alert-success" role="alert">Result: <?php echo $first_value - $second_value; ?></div>
  11. <?php
  12. }
  13. elseif ($_REQUEST['operations'] == '*')
  14. { ?>
  15. <div class="alert alert-warning" role="alert">Result: <?php echo $first_value * $second_value; ?></div>
  16. <?php
  17. }
  18. elseif ($_REQUEST['operations'] == '/')
  19. { ?>
  20. <div class="alert alert-warning" role="alert">Result: <?php echo $first_value / $second_value; ?></div>
  21. <?php
  22. } ?>
  23. </div>

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.