CODEWITHSUNDEEP
phpradio-buttoncalculator
Azam Khan
Azam Khan

Reputation: 9

Simple Calculator using radio button in php

i made a simple calculator.But the problem is not radio buttons are not working properly to select the operation to be performed my code for input is as follow:

<form action="output.php" method="post" class="form">
    <label for="">Value 1</label>
    <input type="text" name="value1" placeholder="Enter 1st value">

    <br>
    <label for="">Value 2</label>
    <input type="text" name="value2" placeholder="Enter 2nd value">

    <h1>Select Operator </h1>
    <input type="radio" name="addition"       value="add">+
    <br>
    <input type="radio" name="subtraction"    value="sub">-
    <br>
    <input type="radio" name="multiplication" value="mul">*
    <br>
    <input type="radio" name="division"       value="div">/
    <br>

    <input type="submit" class="btn btn-success" value="Show Result">
</form>

and output php code is as follow:

<?php

    $value_1=$_POST['value1'];
    $value_2=$_POST['value2'];
    
    if(isset($_POST['submit'])) {
        if($_POST['operation'] == add) {
            echo "$value_1 + $value_2";
        }else if($_POST['operation'] == sub){
            echo "$value_1 - $value_2";
        }else if($_POST['operation'] == mul){
            echo "$value_1 * $value_2";
        }else if($_POST['operation'] == div){
            echo "$value_1 / $value_2";
        }
    }
?>

Upvotes: 0

Views: 1568

Answers (2)

Professor Abronsius
Professor Abronsius

Reputation: 33813

The submit button has no name - so it will not appear in the POST array and the logic will never be processed. Rather than test for the presence ( or not ) of a button in the POST array you really should test for the actual form elements that you will use in your calculations.

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>simple calculator</title>
    </head>
    <body>
        <form method="post" class="form">

            <label>Value 1 <input type="text" name="value1" placeholder="Enter 1st value"></label>
            <label>Value 2<input type="text" name="value2" placeholder="Enter 2nd value"></label>
            

            <h1>Select Operator </h1>
            <input type="radio" name="operator" value="add">+
            <br>
            <input type="radio" name="operator" value="sub">-
            <br>
            <input type="radio" name="operator" value="mul">*
            <br>
            <input type="radio" name="operator" value="div">/
            <br>

            <input type="submit" class="btn btn-success" value="Show Result">
        </form>
        <?php

            /*
                Ensure that ALL post fields are set
            */
            if( isset(
                $_POST['value1'],
                $_POST['value2'],
                $_POST['operator']
            )) {
                /*
                    Assign POST values as variables.
                */
                $value_1=(int)$_POST['value1'];
                $value_2=(int)$_POST['value2'];     
                $operator=$_POST['operator'];
                
                /*
                    Perform the relevant calculation
                    and assign the correct symbol for display
                */
                switch( $operator ){
                    case 'add':$symbol='+';$res=$value_1 + $value_2;break;
                    case 'sub':$symbol='-';$res=$value_1 - $value_2;break;
                    case 'mul':$symbol='*';$res=$value_1 * $value_2;break;
                    case 'div':$symbol='/';$res=$value_1 / $value_2;break;
                }
                
                /*
                    print the sum and result
                */
                printf(
                    '%d %s %s=%d',
                    $value_1,
                    $symbol,
                    $value_2,
                    $res
                );
            }
        ?>
    </body>
</html>

Upvotes: 1

cam
cam

Reputation: 3626

The radio buttons need to share the same name, only the value should change.

label {
  display: block;
}
<label><input type="radio" name="operation" value="add">+</label>
<label><input type="radio" name="operation" value="sub">-</label>
<label><input type="radio" name="operation" value="mul">*</label>
<label><input type="radio" name="operation" value="div">/</label>

Upvotes: 1

Related Questions