Calculating within form

lati90

Hi , i'm trying to set up a script wich will calculate without going to another page almost like a calculator:p I have some basic knowledge and really did my research searching the internet, this is the first website i found with some real knowledge and expertise. ive gotten so far as setting up the desired form ( the variables or numbers need to be inputted ) and setting up my formula but there's something wrong. I hope someone can help me!!

Here's what i've got so far:

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
  <p>
    <label for="breedte">Breedte</label>
    <input type="text" name="breedte" id="breedte" />
  </p>
  <p>
    <label for="lengte">Lengte</label>
    <input type="text" name="lengte" id="lengte" />
  </p>
  <p>
    <label for="grs. omslag">Grs. omslag</label>
    <input type="text" name="grsomslag" id="grs. omslag" />
  </p>
  <p>
    <label for="paginasomslag">Pagina's omslag</label>
    <input type="text" name="paginasomslag" id="paginasomslag" />
  </p>
  <p>Gewicht omslag:<? php FORMULA 1 ?>
  </p>
  <p>
    <label for="grsbinnenwerk">Grs. Binnenwerk</label>
    <input type="text" name="grsbinnenwerk" id="grsbinnenwerk" />
  </p>
  <p>
    <label for="paginasbinnenwerk">Pagina's binnenwerk</label>
    <input type="text" name="paginasbinnenwerk" id="paginasbinnenwerk" />
  </p>
  <p>Gewicht binnenwerk: <?php FORMULA 2 ?> </p>
  <p>
    <label for="aantalboekjes">Aantal boekjes</label>
    <input type="text" name="aantalboekjes" id="aantalboekjes" />
  </p>
  <p>Gewicht 1 brochure :</p>
  <p>Totaal gewicht in kilo's : </p>
  <input name="bereken" type="submit" value="bereken" />
</form>
<?php $anwser = $_POST['breedte']/1000 * ['lengte']/1000) * ['grsomslag'] * ['paginasomslag']; 

echo $anwser;


?>

What i really need is a formula what will calculate the following:
This is needed to calculate the weight of a brochure or folder for my internship

1: 'breedte'/1000 'lengte'/1000 'grsomslag''paginasomslag'/2
+
2: 'breedte'/1000 'lengte'/1000 'grsbinnenwerk' 'paginasbinnenwerk'/2

It doesn't really matter if i combine the two formulas together or seperate them like you see above or add them later.

NogDog

First problem I see is that you need to use the $POST variable name for each form element, e.g.:

$anwser = $_POST['breedte']/1000 * $_POST['lengte']/1000 * $_POST['grsomslag'] * $_POST['paginasomslag'];

Just to avoid duplication, I might do the area calculation first and save in a variable, since it gets used in two places.

$area = $_POST['breedte']/1000 * $_POST['lengte']/1000 *;
$answer = ($area * $_POST['grsomslag'] * $_POST['paginasomslag'] / 2) +
          ($area * $_POST['grsbinnenwerk'] * $_POST['paginasbinnenwerk'] / 2);

Technically, due to PHP's operator precedence, the parentheses aren't really necessary, but they don't hurt and help to clarify what is being done (at least for me).

Roger_Ramjet

Personally I would do this in-page using javascript, or rather using a javascript library like jquery or prototype. Since you do not seem to be doing anything on the server except calculate and display the result I see no need to do the round trip to the server at all.

<script src="http://code.jquery.com/jquery-latest.js"></script>

function calc() {
	var breedte = $('#breedte').val();
	var lengte = $('#lengte').val();
	var grsomslag = $('#grsomslag').val();
	var paginasomslag = $('#paginasomslag').val();
	var grsbinnenwerk = $('#grsbinnenwerk').val();
	var paginasbinnenwerk = $('#paginasbinnenwerk').val();

var area = (breedte/1000) * (lengte/1000);
var a1 = (area * grsomslag * paginasomslag / 2);
var a2 = (area * grsbinnenwerk * paginasbinnenwerk / 2);
var a3 = a1 + a2;

$('.answer1').append(a1);
$('.answer2').append(a2);
$('.answer3').append(a3);

return false;
}

</head>
<body>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" onSubmit="return calc()">
  <p>
    <label for="breedte">Breedte</label>
    <input type="text" name="breedte" id="breedte" />
  </p>
  <p>
    <label for="lengte">Lengte</label>
    <input type="text" name="lengte" id="lengte" />
  </p>
  <p>
    <label for="grs. omslag">Grs. omslag</label>
    <input type="text" name="grsomslag" id="grs. omslag" />
  </p>
  <p>
    <label for="paginasomslag">Pagina's omslag</label>
    <input type="text" name="paginasomslag" id="paginasomslag" />
  </p>
  <p class="answer1">Gewicht omslag : </p>
  <p>
    <label for="grsbinnenwerk">Grs. Binnenwerk</label>
    <input type="text" name="grsbinnenwerk" id="grsbinnenwerk" />
  </p>
  <p>
    <label for="paginasbinnenwerk">Pagina's binnenwerk</label>
    <input type="text" name="paginasbinnenwerk" id="paginasbinnenwerk" />
  </p>
  <p class="answer2">Gewicht binnenwerk : </p>
  <p>
    <label for="aantalboekjes">Aantal boekjes</label>
    <input type="text" name="aantalboekjes" id="aantalboekjes" />
  </p>
  <p>Gewicht 1 brochure :</p>
  <p class-"answer3">Totaal gewicht in kilo's : </p>
  <input name="bereken" type="submit" value="bereken" />
</form> 
</body

PS I know this is a PHP forum, but that does not mean we don't do javascipt when that is what is required. Anyway, I'm just trying to get up to speed with jquery since that is what everyone seems to be using it instead of prototype these days.

lati90

Hey guys thank you for posting your replies as quick as you did!

I used NogDog's solution just because i really don't that awfull lot about javascript so thnx anyway Roger Ramjet!

This is how it is right now( you need to look aside the css bull*):

<!DOCTYPE html>
<html>
<head>

<title>
Gewicht berekenen van een brochure
</title>

<!-- Meta Tags -->
<meta charset="utf-8">
<meta name="generator" content="url.com" />

<!-- CSS -->
<link rel="stylesheet" href="css/structure.css" type="text/css" />
<link rel="stylesheet" href="css/form.css" type="text/css" />
<link rel="stylesheet" href="css/theme.css" type="text/css" />

<!-- JavaScript -->
<script type="text/javascript" src="scripts/wufoo.js"></script>

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body id="public">
<div id="container">

<h1 id="logo">
		<a>Company name</a>
	</h1><!--- hieronderBegint de formulier geen aanpassingen maken in id en name. --> 

<form id="form1" name="form1" class="wufoo topLabel page" autocomplete="off" enctype="multipart/form-data" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">

<header id="header" class="info">
	<h2>Gewicht berekenen van een brochure</h2>
	<div>Met dit formulier kun je het gewicht van een brochure berekenen.</div>
</header>

<ul>




<li id="foli2" 		class="     ">
	<label class="desc" id="breedte" for="Field2">
		Breedte
			</label>
	<div>
		<input id="Field2" 			name="breedte" 			type="text" 			class="field text nospin medium"  			value="" 											min="0" 												max="0" 								maxlength="255" 						tabindex="1" 			onkeyup="" 									/>
			</div>
		<p class="instruct" id="instruct2"><small>Hier vul je de breedte in van het drukwerk ( in milimeters )</small></p>
	</li>


<li id="foli3" 		class="     ">
	<label class="desc" id="lengte" for="Field3">
		Lengte
			</label>
	<div>
		<input id="Field3" 			name="lengte" 			type="text" 			class="field text nospin medium"  			value="" 						tabindex="2" 			onkeyup="" 									/>
			</div>
		<p class="instruct" id="instruct3"><small>Hier vul je de lengte in van het drukwerk ( in milimeters )</small></p>
	</li>


<li id="foli4" 		class="     ">
	<label class="desc" id="grsomslag" for="Field4">
		Papiergewicht omslag
			</label>
	<div>
		<input id="Field4" 			name="grsomslag" 			type="text" 			class="field text nospin medium"  			value="" 						tabindex="3" 			onkeyup="" 									/>
			</div>
		<p class="instruct" id="instruct4"><small>Hier vul je het papiergewicht in van de omslag</small></p>
	</li>


<li id="foli5" 		class="     ">
	<label class="desc" id="paginasomslag" for="Field5">
		Pagina's omslag
			</label>
	<div>
		<input id="Field5" 			name="paginasomslag" 			type="text" 			class="field text nospin medium"  			value="" 						tabindex="4" 			onkeyup="" 									/>
			</div>
		<p class="instruct" id="instruct5"><small>Hier vul je het aantal pagina's in van de omslag</small></p>
	</li>


<li id="foli6" 		class="     ">
	<label class="desc" id="grsbinnenwerk" for="Field6">
		Papiergewicht binnenwerk
			</label>
	<div>
		<input id="Field6" 			name="grsbinnenwerk" 			type="text" 			class="field text nospin medium"  			value="" 						tabindex="5" 			onkeyup="" 									/>
			</div>
		<p class="instruct" id="instruct6"><small>Hier vul je het papiergewicht van het binnenwerk in</small></p>
	</li>


<li id="foli7" 		class="     ">
	<label class="desc" id="paginasbinnenwerk" for="Field7">
		Pagina's binnenwerk
			</label>
	<div>
		<input id="Field7" 			name="paginasbinnenwerk" 			type="text" 			class="field text nospin medium"  			value="" 						tabindex="6" 			onkeyup="" 									/>
			</div>
		<p class="instruct" id="instruct7"><small>Hier vul je het aantal pagina's in van het binnenwerk</small></p>
	</li>


<li id="foli8" 		class="     ">
	<label class="desc" id="aantalboekjes" for="Field8">
		Aantal boekjes
			</label>
	<div>
		<input id="Field8" 			name="aantalboekjes" 			type="text" 			class="field text nospin medium"  			value="" 						tabindex="7" 			onkeyup="" 									/>
			</div>

	<p class="instruct" id="instruct8"><small>Het aantal exemplaren wat je wil berekenen</small></p>
</li> 
 <div>
            <input name="bereken" type="submit" value="bereken" />
            </div>
<li id="foli10" 		class="section      "> 
	<section> 
				<h3 id="title10">Samenvatting</h3> 
				<div id="instruct10">Hieronder zijn de ingevoerde waardes te zien</div> 
			</section> <!--- hieronder worden de ingevoerde waardes verzameld --> 
	</li> 	<p>
           <div>
           <p>Breedte:<?php 
		   $breedte= $_POST['breedte'];
		   echo $breedte;
		   ?></p>
           <div>
           <p>Lengte:<?php 
		   $lengte= $_POST['lengte'];
		   echo $lengte;
		   ?></p>
           <div>
           <p>Papiergewicht omslag:<?php 
		   $pgwomslag= $_POST['grsomslag'];
		   echo $pgwomslag;
		   ?></p>
           <div>
           <p>Pagina's omslag:<?php 
		   $paginasomslag= $_POST['paginasomslag'];
		   echo $paginasomslag;
		   ?></p>
            <p>Papiergewicht binnenwerk:<?php 
		   $pgwbinnenwerk= $_POST['grsbinnenwerk'];
		   echo $pgwbinnenwerk;
		   ?></p>
            <p>Pagina's binnenwerk:<?php 
		   $paginasbinnenwerk= $_POST['paginasbinnenwerk'];
		   echo $paginasbinnenwerk;
		   ?></p>
            <p>Aantal boekjes:<?php 
		   $aantallen= $_POST['aantalboekjes'];
		   echo $aantallen;
		   ?></p></div>
           <li id="foli10" 		class="section      "> 
	<section> 
				<h3 id="title10">Resultaten</h3> 
				<div id="instruct10">Hieronder zijn de resultaten te zien</div> 
			</section> 
	</li><div><!--- hieronder worden de ingevoerde waardes berekend --> 
Gewicht omslag:
 <?php
$area = ($_POST['breedte']/1000 * $_POST['lengte']/1000);
$answeromslag = $area * ($_POST['grsomslag'] * $_POST['paginasomslag'] / 2);

echo $answeromslag;


?>
  </p>
  <p>Gewicht binnenwerk: <?php
$answerbinnenwerk = $area * $_POST['grsbinnenwerk'] * $_POST['paginasbinnenwerk'] / 2;

echo $answerbinnenwerk;
?>
</p>
</div><div>

<p>Gewicht 1 brochure :

<?php

$answerexemplaar = ($area * $_POST['grsomslag'] * $_POST['paginasomslag'] / 2) + 
          ($area * $_POST['grsbinnenwerk'] * $_POST['paginasbinnenwerk'] / 2);
		  echo $answerexemplaar;
		   ?> 

       </p> 
<p>Totaal gewicht in gram :
<?php

$answertotaalgram = ($answerexemplaar * $_POST['aantalboekjes']);
		  echo $answertotaalgram;
		   ?> 
           </p>
                      </p> 
<p>Totaal gewicht in kilo's :
<?php

$answertotaalkilo = ($answerexemplaar * $_POST['aantalboekjes'])/ 1000;
		  echo $answertotaalkilo;
		   ?> 
           </p>
           </div>
	</li>

<li style="display:none">
	<label for="comment">Do Not Fill This Out</label>
	<textarea name="comment" id="comment" rows="1" cols="1"></textarea>
	<input type="hidden" id="idstamp" name="idstamp" value="" />
	<input type="hidden" id="stats" name="stats" value="" />
			<input type="hidden" id="clickOrEnter" name="clickOrEnter" value="" />
</li>
</ul>
</form>

</div><!--container-->
<img id="bottom" src="images/bottom.png" alt="" />

<b style="display:block !important;visibility:visible !important;text-indent:0 !important;position:static !important;height:auto !important;width:auto !important;overflow: auto !important;font-weight:normal;font-size:9px;color:#777;padding:0 0 0 3px;">Ontwikkeld door name</b>

</body>
</html>