Interactive HTML and PHP form

Question

Interactive HTML and PHP form

Navigation

#1 by (1 votes)
#2 by (1 votes)

2

I'm having an activity and I'm stuck on this question:

Create a program in PHP , where the form has choices of geometric shapes (triangle, square, rectangle and trapezoid.). Once the user selects the figure, he can type in the fields the values of the sides of the figure and the system must calculate the value of the area.

I'm not asking for the answer, do not you see, I want tips on how to write this form. The basics I know how to do, but this one with a choice I do not know. If someone can tell me only the correct term that I should search for, it will be of great value.

<!DOCTYPE html>
<html>
<head>
	<title>Valor Area</title>
	<meta charset="utf-8">
</head>
<body>
	<form action="valorArea.php">
	<label>Escolha uma forma geométrica da lista para calcular a sua área:</label>
	<select >
		<option >Triângulo</option>
		<option >Quadrado</option>
		<option >Retângulo</option>
		<option >Trap ézio</option>
	</select>
	<br><br>
	<input type="submit" value="Calcular">
	</form>
</body>
</html>

php html

asked by anonymous 19.03.2018 / 00:28

2 answers

1

First add values for each option on your form because only then will you know which option the user clicked on.

<!DOCTYPE html>
<html>

<head>
  <title>Valor Area</title>
  <meta charset="utf-8">
</head>

<body>
  <form action="valorArea.php" method="GET">
    <label>Escolha uma forma geométrica da lista para calcular a sua área:</label>
    <select name="forma">
		<option value="1">Triângulo</option>
		<option value="2">Quadrado</option>
		<option value="3">Retângulo</option>
		<option value="4">Trap ézio</option>
	</select>
    <br><br>
    <input type="submit" value="Calcular">
  </form>
</body>

After leaving the form so you can decide whether to do 2-step processing or you can use a bit of javascript to submit the form once. If you use javascript you can create the fields to enter the values with change event of the select. If you want to do only with php you should edit the php page, there you get the option with $ _GET ['form'] and assign it to a variable and after that it will redirect to a page where the user can type the measurements in a new form, new form just do the processing using the formula.

Search for PHP variables, $ _GET [], form action php, header ("Location:"), PHP operations, Basic PHP, variable handling, variable types, operators.

If you want to make it more profitable look for javascript and jquery.

In addition to programming, you want to improve the look using CSS.

19.03.2018 / 01:05

how to make the div that has auto width not pick up 100% of the parent div Items in levels within an HTML ComboBox. It's possible?

score 1 · Accepted Answer

PHP receives the data via POST and makes the appropriate computations according to the conditional structure switch

<?php

$figura = $_POST['figura'];

switch ($figura) {
    case "triangulo":
        echo ($_POST['base']*$_POST['altura'])/2;
        break;
    case "quadrado":
        echo pow($_POST['lado'], 2);
        break;
    case "retangulo":
        echo $_POST['lado1']*$_POST['lado2'];
        break;
   case "trapesio":
        echo (($_POST['base1']+$_POST['base2'])*$_POST['haltura'])/2;
        break;
    default:
        //nada
}

?>

JavaScript - shows the inputs according to the selected option

<script language="javascript">
<!--
 function show(aval) {
    submeter.style.display='inline-block';
    if (aval == "triangulo") {
    hiddenDiv1.style.display='inline-block';
    } 
    else{
    hiddenDiv1.style.display='none';
    }

    if (aval == "quadrado") {
    hiddenDiv2.style.display='inline-block';
    } 
    else{
    hiddenDiv2.style.display='none';
    }

    if (aval == "retangulo") {
    hiddenDiv3.style.display='inline-block';
    } 
    else{
    hiddenDiv3.style.display='none';
    }

    if (aval == "trapesio") {
    hiddenDiv4.style.display='inline-block';
    } 
    else{
    hiddenDiv4.style.display='none';
    }
}
//-->
</script>

HTML

<form action="" method="post">
    <div class="text-center">           
    <label>Escolha uma forma geométrica da lista para calcular a sua área:</label><br>
    <select name="figura" onchange="java_script_:show(this.options[this.selectedIndex].value)">
        <option>Selecione</option>
        <option value="triangulo">Triângulo</option>
        <option value="quadrado">Quadrado</option>
        <option value="retangulo">Retângulo</option>
        <option value="trapesio">Trapézio</option>
    </select>
    </div>


    <div id="hiddenDiv1" style="display:none">
        <p>base:
        <input type="text" name="base" />
        </p>
        <p>altura:
        <input type="text" name="altura" />
        </p>
    </div>

    <div id="hiddenDiv2" style="display:none">
        <p>lado:
        <input type="text" name="lado" />
        </p>
    </div>

    <div id="hiddenDiv3" style="display:none">
        <p>Lado 1:
        <input type="text" name="lado1" />
        </p>
        <p>lado 2:
        <input type="text" name="lado2" />
        </p>
    </div>

    <div id="hiddenDiv4" style="display:none">
        <p>base 1:
        <input type="text" name="base1" />
        </p>
        <p>base 2:
        <input type="text" name="base2" />
        </p>
        <p>altura:
        <input type="text" name="haltura" />
        </p>
    </div>

    <div id="submeter" style="display:none">                
      <input type="submit" value="Calcular">
    </div>
</form>

Formulas for calculating areas