[PHP] Wrapping plus/minus calculation in p tags

1

So. There’s 4 calculations. All of them work on their own without anything added when i echo them. I want to style them. So I wrap them in p tags and apply styling. Why does it work all fine for multiply and divide, but it doesn’t for add and subtract? I’m guessing it’s something to do with the plus and minus signs, but why exactly does it happen? and what is the work around? I’ve tried wrapping it in just simple plain p tags, without any styling or anything and it doesn’t work either.

And when I run it on my own localhost, not only does it not work but it gives me an error too:

Warning: A non-numeric value encountered in C:\XAMPP\htdocs\phplearning\calculator\php calculator.php on line 36

Here’s the php in cloud9. - https://ide.c9.io/sandrisk/example

<body>

	<form style="text-align: center; margin-top: 50px;">
		<input type="text" name="num1" style="margin: 40px;" placeholder="number1">
		<input type="text" name="num2" style="margin: 40px;" placeholder="number2">
		<select name="operator">
			<option>None</option>
			<option>Add</option>
			<option>Subtract</option>
			<option>Multiply</option>
			<option>Divide</option>
		</select>
		<br>
		<button type="submit" name="submit" value="submit">Calculate!</button>
	</form>
	<p style="text-align: center;">The answer is this:</p>
<?php
	
	if(isset($_GET['submit'])) {
		$result1 = $_GET['num1'];
		$result2 = $_GET['num2'];
		$operator = $_GET['operator'];
		switch($operator) {
			case "None":
				echo "No method selected";
			break;

			case "Add":
				echo '<p style="text-align: center; border: 1px solid black; padding: 10px; width: 100px; margin: 0 auto;">' . $result1 + $result2 . '</p>';
			break;

			case "Subtract":
				echo '<p style="text-align: center; border: 1px solid black; padding: 10px; width: 100px; margin: 0 auto;">' . $result1 - $result2 . '</p>';
			break;

			case "Multiply":
				echo '<p style="text-align: center; border: 1px solid black; padding: 10px; width: 100px; margin: 0 auto;">' . $result1 * $result2 . '</p>';
			break;

			case "Divide":
				echo '<p style="text-align: center; border: 1px solid black; padding: 10px; width: 100px; margin: 0 auto;">' . $result1 / $result2 . '</p>';
		}
	}

?>

</body>

Does anyone have any ideas? Thanks.

P.S. I’m very new to PHP.

2

The values you get back from $_GET are going to be strings. You can perform mathematical operations on strings. Below I have add the (float) before each input received to try and convert them to a number. I also made your code more DRY (Do Not Repeat Yourself) by only having a single line for echoing the result in the p element.

<?php
if (isset($_GET['submit'])) {
    $result1  = (float) $_GET['num1'];
    $result2  = (float) $_GET['num2'];
    $operator = $_GET['operator'];
    if ($operator == 'None') {
        echo "No method selected";
    } else {
        switch ($operator) {
            case "Add":
                $calcResult = $result1 + $result2;
                break;
            
            case "Subtract":
                $calcResult = $result1 - $result2;
                break;
            
            case "Multiply":
                $calcResult = $result1 * $result2;
                break;
            
            case "Divide":
                $calcResult = $result1 / $result2;
        }
        echo '<p style="text-align: center; border: 1px solid black; padding: 10px; width: 100px; margin: 0 auto;">' . $calcResult . '</p>';
    }
}
?>

You still need to account how you will validate the two inputs are actually numbers, so you don’t try to add 4 + C.

1 Like