Some JS Help Requested

vsloathe

Ok, I'm looking for a more elegant, compact, easily managed way to do this. I've got a .js file that looks like this:

var i=0;
function addTank()
{
i=i+1;
var newrow;
newrow ='<table>';

newrow+='<tr><th colspan="2">Tank Information</th><th colspan="2">Calculations</th>';

newrow+='<tr><td>Tank # Per V-R</td><td><input type="text" id="'+i+'tank_no" /></td>';

newrow+='<td>95% Gallons</td><td><input type="text" id="'+i+'gal_95" disabled="disabled" /></td>';

newrow+='<tr><td>Product</td><td><input type="text" id="'+i+'product" /></td>';

newrow+='<td>Inches to tank top (A)</td><td><input type="text" id="'+i+'in_tank_top" disabled="disabled" /></td>';

newrow+='<tr><td>Manufacturer</td><td><input type="text" id="'+i+'manufacturer" /></td>';

newrow+='<td>Z95</td><td><input type="text" id="'+i+'z_95" disabled="disabled" /></td>';

newrow+='<tr><td>Tank type/model</td><td><input type="text" id="'+i+'tank_type" /></td>';

newrow+='<td>Fill to flapper</td><td><input type="text" id="'+i+'top_to_flapper" disabled="disabled" /></td>';

newrow+='<tr><td> Applause

ate of install</td><td><input type="text" id="'+i+'date_install" /></td>';

newrow+='<td> Applause

ifference (C Actual - C 95)</td><td><input type="text" id="'+i+'difference" disabled="disabled" /></td>';

newrow+='<tr><td>Flapper Model</td><td><input type="text" id="'+i+'flapper_model" /></td>';

newrow+='<td>Inches at C95 Actual</td><td><input type="text" id="'+i+'inches_C95_actual" disabled="disabled" /></td>';

newrow+='<tr><td>Flapper installed on manway?</td><td><input type="text" id="'+i+'flapper_installed_manway" /></td>';

newrow+='<td>Flapper is set at</td><td><input type="text" id="'+i+'flapper_set_at" disabled="disabled" /></td>';

newrow+='<tr><td>Type of fill</td><td><input type="text" id="'+i+'type_fill" /></td>';

newrow+='<th colspan="2">Conclusion</th>';

newrow+='<tr><td>Float orientation</td><td><input type="text" id="'+i+'float_orientation" /></td>';

newrow+='<th colspan="2"><input type="text" id="'+i+'conclusion" /></th>';

newrow+='<tr><td>Cut Orientation</td><td><input type="text" id="'+i+'cut_orientation" /></td>';

newrow+='<tr><td>Jack Screws</td><td><input type="text" id="'+i+'jack_screws" /></td>';

newrow+='<tr><td>Size in gallons</td><td><input onKeyUp="calcValues('+i+');" type="text" id="'+i+'size_gallons" /></td>';

newrow+='<tr><td>Tank diameter (Y)</td><td><input onKeyUp="calcValues('+i+');" type="text" id="'+i+'tank_diameter" /></td>';

newrow+='<tr><td>Top of drop tube to tank bottom(inches) (B)</td><td><input onKeyUp="calcValues('+i+');" type="text" id="'+i+'fill_to_bottom" /></td>';

newrow+='<tr><td>Inches at 95% total volume (X95)</td><td><input onKeyUp="calcValues('+i+');" type="text" id="'+i+'inches_95" /></td>';

newrow+='<tr><td>Top of fill to flapper (inches)</td><td><input onKeyUp="calcValues('+i+');" type="text" id="'+i+'fill_to_flapper" /></td>';

newrow+='<tr><td>Gallons at C95 Actual</td><td><input onKeyUp="calcValues('+i+');" type="text" id="'+i+'gallons_95" /></td>';

newrow+='<tr><td>Remotes only: Inches to bottom of tee (E)</td><td><input type="text" id="'+i+'inches_bottom_tee" /></td>';

newrow+='<tr><td>Remotes only: Riser Height Below Tee to TT (min = 13" Applause

</td><td><input type="text" id="'+i+'riser_height_below_tee" /></td>';

newrow+='<tr><td> Applause

T Height above tank bottom</td><td><input type="text" id="'+i+'dt_height" /></td></tr>';

newrow+='</table><br />';

document.getElementById('tanks').innerHTML+=newrow;
document.getElementById('numtanks').innerHTML='<input type="hidden" name="numtanks" value="'+i+'" />';
}
function calcValues(x)
{
var size_gallons = document.getElementById(x+'size_gallons').value;
document.getElementById(x+'gal_95').value = Math.round(size_gallons * .95);
document.getElementById(x+'in_tank_top').value = (document.getElementById(x+'fill_to_bottom').value - document.getElementById(x+'tank_diameter').value);
var t = (document.getElementById(x+'gallons_95').value / document.getElementById(x+'size_gallons').value)* 100;
document.getElementById(x+'flapper_set_at').value = (t+'%');
document.getElementById(x+'z_95').value = (document.getElementById(x+'tank_diameter').value - document.getElementById(x+'inches_95').value);
var g = document.getElementById(x+'in_tank_top').value - 0;
var k = document.getElementById(x+'z_95').value - 0;
document.getElementById(x+'top_to_flapper').value = (g + k);
document.getElementById(x+'difference').value = (document.getElementById(x+'fill_to_flapper').value - document.getElementById(x+'top_to_flapper').value);
document.getElementById(x+'inches_C95_actual').value = (document.getElementById(x+'inches_95').value - document.getElementById(x+'difference').value);
if(t == 0)
{
}
else
{
if(t > 90 && t < 95)
{
document.getElementById(x+'conclusion').value = 'Flapper OK.';
}
else if(t > 95)
{
document.getElementById(x+'conclusion').value = 'Flapper too high.';
}
else if(t < 90)
{
document.getElementById(x+'conclusion').value = 'Flapper too low.';
}
}
}

Now, the function addTank is fired off by a button on the main part of the form to add a "tank" element to the page which is seen above - series of inputs etc.

Any insight on how I could do this better? Just point me to something I could read or give me an example, I am a HUGE JS n00b. No idea about the more advanced stuff like OO JS and all that.

perkiset

I'm gonna take this in pieces rather than the whole deal... and I'm gonna start with some simple stuff until you can hit us with a diagram or something to show what you want the final result to be... I'm just too lazy to walk that code and figger out what you want it to look like.

So first:
the newrow +=, newrow += hooie has got to go. Without even looking it over I'd tell you to put all of that in a DIV with a replacement marker for the I variable your inserting. Example:

Then do the work with something like:

var newTemplate = document.getElementById('template').innerHTML;
newTemplate.replace(/{I}/, i);
document.getElementById('targetNode').innerHTML = newTemplate;

In the calcValue function you're actually reasonably close to a nice solution - you are using the HTML itself as your storage space rather than variables which is a handy technique. One of the ways that I will do this looks like the following:

<tr>
<td>
<div style="display: none">
<span>100</span>
<span>20</span>
<span>The Really Big Flusher</span>
<span>0.81</span>
</div>
Some Text</td>
<td>Some More Text</td>
<td><input type="button" value="do stuff" onClick="getValuesFor(this)"></td>
</tr>
</table>

<script>
function getValuesFor(target)
{
while (target.nodeName <> 'TR') { target = target.parentNode; }
var spans = target.getElementsByName('SPAN');
valueA = spans[0].innerHTML;
valueB = spans[1].innerHTML;
itemName = spans[2].innerHTML;
taxRate = spans[3].innerHTML;

// Now I can do stuff with the values I've gathered...
}

So what I've done here, is put all the pertinent data that I want to keep into spans in a cell in a row in a table. When someone clickes the button, I move up the DOM tree until I find the closest-to-me containing row, then ask THAT ROW for all elements underneath it of type "span." This is almost like a hash list for a variable stack if you think about it. Clearly, this technique can be used to identify all of the cells, divs, spans etc under a row and then "do stuff" with each one. Perhaps you remember the "Smart List" JS emulator I wrote (I can show you again if you like) - I use this exact technique to handle all the values and visual elements of an unknown number of rows and unknown set of contents in each row.

Although this is not immediately applicable, knowing how you think I believe that this might be the gear spinning you are looking for. Ping if you need more bumps.

/p

vsloathe

OK Perk the suggestion regarding the replace for i is absolutely a lifesaver. I do the += thing so that the code is easier for me to read and that's the only reason.

That should save me a lot of time and I want to have this relatively in a state of *done* tomorrow. At least done enough for government work anyway.

perkiset

Hey VS -
Please note that the replace() function returns a value, it doesn't affect the calling string as I laid out... so it needs to be

newTemplate = newTemplate.replace(/patt/, $replValue);

Sorry,
/p

vsloathe

Thanks man. I am going to overlay the inputs on the top of the drawing of a tank on the parts where they correspond so you've caught the discrepancy in time. I haven't started that part yet.

vsloathe

Do I need to put the pattern in quotes?

vsloathe

Nvm previous question. I looked it up and the replace is happening, but somehow it's not "going through" all the way. I echo the number out to the screen so I know it's being replaced, but somehow it comes through in the POST vars as {i} every time.

Here's what I've got and where I am:

flapper.

php

<html>
<head>
<script src="flapper.js"></script>
<style type="text/css">
body {
color: black;
background-color: white; }
table {
color: black;
background-color: #226185;
}
.tanks {
padding-left: 18em;
}
.site {
position: absolute;
left: 1em;
}
.results {
position: absolute;
left: 1em;
top: 20em;
}
</style>
</head>
<body>
<form name="form1" action="<?

php

echo($_SERVER['

PHP

_SELF']);?>" method="POST" />
<div id="site" class="site">
<table>
<tr><th colspan="2">Site Information</th></tr>
<tr><td>Site Number</td><td><input type="text" name="site_no" /></td></tr>
<tr><td>Name</td><td><input type="text" name="name_site" /></td></tr>
<tr><td>Address</td><td><input type="text" name="site_address" /></td></tr>
<tr><td>City</td><td><input type="text" name="site_city" /></td></tr>
<tr><td>Inspection Date</td><td><input type="text" name="inspection_date" /></td></tr>
<tr><td>Gemstar Inspector</td><td><input type="text" name="gemstar_inspector" /></td></tr>
<tr><td>JD2 Inspector</td><td><input type="text" name="jd2_inspector" /></td></tr>
<tr><td><input type="button" value="Add Tank" onclick="addDirectTank();" /></td><td><input type="submit" value="Submit" /></td></tr>
</table>
</div>
<div id="tanks" class="tanks"></div>
<div id="numtanks"></div>
</form>
</body>
</html>
<?

php

if(isset($_POST['site_no']))
{
echo("<pre> <div id="results" class="results"> ");
print_r($_POST);
echo("</div> </pre> ");
}
?>
<div style="display: none">
<div id="templateDirect">
<table>
<tr><th colspan="2">Tank Information {i}</th><th colspan="2">Calculations</th></tr>
<tr><td>Tank # Per V-R</td><td><input type="text" name="{i}tank_no" /></td><td>95% Gallons</td><td><input type="text" name="{i}gal_95" disabled="disabled" /></td></tr>
<tr><td>Product</td><td><input type="text" name="{i}product" /></td><td>Inches to tank top (A)</td><td><input type="text" name="{i}in_tank_top" disabled="disabled" /></td></tr>
<tr><td>Manufacturer</td><td><input type="text" name="{i}manufacturer" /></td><td>Z95</td><td><input type="text" name="{i}z_95" disabled="disabled" /></td></tr>
<tr><td>Tank type/model</td><td><input type="text" name="{i}tank_type" /></td><td>Fill to flapper</td><td><input type="text" name="{i}top_to_flapper" disabled="disabled" /></td></tr>
<tr><td> Applause

ate of install</td><td><input type="text" name="{i}date_install" /></td><td> Applause

ifference (C Actual - C 95)</td><td><input type="text" name="{i}difference" disabled="disabled" /></td></tr>
<tr><td>Flapper Model</td><td><input type="text" name="{i}flapper_model" /></td><td>Inches at C95 Actual</td><td><input type="text" name="{i}inches_C95_actual" disabled="disabled" /></td></tr>
<tr><td>Flapper installed on manway?</td><td><input type="text" name="{i}flapper_installed_manway" /></td><td>Flapper is set at</td><td><input type="text" name="{i}flapper_set_at" disabled="disabled" /></td></tr>
<tr><td>Type of fill</td><td><input type="text" name="{i}type_fill" /></td><th colspan="2">Conclusion</th></tr>
<tr><td>Float orientation</td><td><input type="text" name="{i}float_orientation" /></td><th colspan="2"><input type="text" name="{i}conclusion" /></th></tr>
<tr><td>Cut Orientation</td><td><input type="text" name="{i}cut_orientation" /></td><th colspan="2" rowspan="11"><img src="directsmall.jpg" /></th></tr>
<tr><td>Jack Screws</td><td><input type="text" name="{i}jack_screws" /></td></tr>
<tr><td>Size in gallons</td><td><input onKeyUp="calcValues({i});" type="text" name="{i}size_gallons" /></td></tr>
<tr><td>Tank diameter (Y)</td><td><input onKeyUp="calcValues({i});" type="text" name="{i}tank_diameter" /></td></tr>
<tr><td>Top of drop tube to tank bottom(inches) (B)</td><td><input onKeyUp="calcValues({i});" type="text" name="{i}fill_to_bottom" /></td></tr>
<tr><td>Inches at 95% total volume (X95)</td><td><input onKeyUp="calcValues({i});" type="text" name="{i}inches_95" /></td></tr>
<tr><td>Top of fill to flapper (inches)</td><td><input onKeyUp="calcValues({i});" type="text" name="{i}fill_to_flapper" /></td></tr>
<tr><td>Gallons at C95 Actual</td><td><input onKeyUp="calcValues({i});" type="text" name="{i}gallons_95" /></td></tr>
<tr><td> Applause

T Height above tank bottom</td><td><input type="text" name="{i}dt_height" /></td></tr>
</table>
<br />
</div>
<div id="templateRemote">
<table>
<tr><th colspan="2">Tank Information</th><th colspan="2">Calculations</th></tr>
<tr><td>Tank # Per V-R</td><td><input type="text" name="{i}tank_no" /></td><td>95% Gallons</td><td><input type="text" name="{i}gal_95" disabled="disabled" /></td></tr>
<tr><td>Product</td><td><input type="text" name="{i}product" /></td><td>Inches to tank top (A)</td><td><input type="text" name="{i}in_tank_top" disabled="disabled" /></td></tr>
<tr><td>Manufacturer</td><td><input type="text" name="{i}manufacturer" /></td><td>Z95</td><td><input type="text" name="{i}z_95" disabled="disabled" /></td></tr>
<tr><td>Tank type/model</td><td><input type="text" name="{i}tank_type" /></td><td>Fill to flapper</td><td><input type="text" name="{i}top_to_flapper" disabled="disabled" /></td></tr>
<tr><td> Applause

ate of install</td><td><input type="text" name="{i}date_install" /></td><td> Applause

ifference (C Actual - C 95)</td><td><input type="text" name="{i}difference" disabled="disabled" /></td></tr>
<tr><td>Flapper Model</td><td><input type="text" name="{i}flapper_model" /></td><td>Inches at C95 Actual</td><td><input type="text" name="{i}inches_C95_actual" disabled="disabled" /></td></tr>
<tr><td>Flapper installed on manway?</td><td><input type="text" name="{i}flapper_installed_manway" /></td><td>Flapper is set at</td><td><input type="text" name="{i}flapper_set_at" disabled="disabled" /></td></tr>
<tr><td>Type of fill</td><td><input type="text" name="{i}type_fill" /></td><th colspan="2">Conclusion</th></tr>
<tr><td>Float orientation</td><td><input type="text" name="{i}float_orientation" /></td><th colspan="2"><input type="text" name="{i}conclusion" /></th></tr>
<tr><td>Cut Orientation</td><td><input type="text" name="{i}cut_orientation" /></td><th colspan="2" rowspan="11"><img src="remotesmall.jpg" /></th></tr>
<tr><td>Jack Screws</td><td><input type="text" name="{i}jack_screws" /></td></tr>
<tr><td>Size in gallons</td><td><input onKeyUp="calcValues({i});" type="text" name="{i}size_gallons" /></td></tr>
<tr><td>Tank diameter (Y)</td><td><input onKeyUp="calcValues({i});" type="text" name="{i}tank_diameter" /></td></tr>
<tr><td>Top of drop tube to tank bottom(inches) (B)</td><td><input onKeyUp="calcValues({i});" type="text" name="{i}fill_to_bottom" /></td></tr>
<tr><td>Inches at 95% total volume (X95)</td><td><input onKeyUp="calcValues({i});" type="text" name="{i}inches_95" /></td></tr>
<tr><td>Top of fill to flapper (inches)</td><td><input onKeyUp="calcValues({i});" type="text" name="{i}fill_to_flapper" /></td></tr>
<tr><td>Gallons at C95 Actual</td><td><input onKeyUp="calcValues({i});" type="text" name="{i}gallons_95" /></td></tr>
<tr><td>Remotes only: Inches to bottom of tee (E)</td><td><input type="text" name="{i}inches_bottom_tee" /></td></tr>
<tr><td>Remotes only: Riser Height Below Tee to TT (min = 13" Applause

</td><td><input type="text" name="{i}riser_height_below_tee" /></td></tr>
<tr><td> Applause

T Height above tank bottom</td><td><input type="text" name="{i}dt_height" /></td></tr>
</table>
<br />
</div>
</div>

flapper.js

vsloathe

Figured it out. Need to do a GLOBAL replace.

so /{i}/g instead of just /{i}/

perkiset

Cool, glad you figgered it out - sorry about the modifier.

May I make another suggestion?

The form of coding your doing is VERY old schol

PHP

- that came about when

PHP

was really just an HTML helper as opposed to a full-fledged language. Adding little chunks like that in the middle was about the best it could do.

The problem is that in the file you've shown, the very first <H of that file will go out before

PHP

gets a shot to do anything and POW you're committed headers, that page etc. I never, ever code that way because it's too limiting.

Here is how it looks as a pure

PHP

rather than an HTML with a little

PHP

:

<?

php

$main = <<<HTML
<html>
<head>
<script src="flapper.js"></script>
<style type="text/css">
body {
color: black;
background-color: white; }
table {
color: black;
background-color: #226185;
}
.tanks {
padding-left: 18em;
}
.site {
position: absolute;
left: 1em;
}
.results {
position: absolute;
left: 1em;
top: 20em;
}
</style>
</head>
<body>
<form name="form1" action="<?

php

echo($_SERVER['

PHP

_SELF']);?>" method="POST" />
<div id="site" class="site">
<table>
<tr><th colspan="2">Site Information</th></tr>
<tr><td>Site Number</td><td><input type="text" name="site_no" /></td></tr>
<tr><td>Name</td><td><input type="text" name="name_site" /></td></tr>
<tr><td>Address</td><td><input type="text" name="site_address" /></td></tr>
<tr><td>City</td><td><input type="text" name="site_city" /></td></tr>
<tr><td>Inspection Date</td><td><input type="text" name="inspection_date" /></td></tr>
<tr><td>Gemstar Inspector</td><td><input type="text" name="gemstar_inspector" /></td></tr>
<tr><td>JD2 Inspector</td><td><input type="text" name="jd2_inspector" /></td></tr>
<tr><td><input type="button" value="Add Tank" onclick="addDirectTank();" /></td><td><input type="submit" value="Submit" /></td></tr>
</table>
</div>
<div id="tanks" class="tanks"></div>
<div id="numtanks"></div>
</form>

<div style="display: none">
<div id="templateDirect">
<table>
<tr><th colspan="2">Tank Information {i}</th><th colspan="2">Calculations</th></tr>
<tr><td>Tank # Per V-R</td><td><input type="text" name="{i}tank_no" /></td><td>95% Gallons</td><td><input type="text" name="{i}gal_95" disabled="disabled" /></td></tr>
<tr><td>Product</td><td><input type="text" name="{i}product" /></td><td>Inches to tank top (A)</td><td><input type="text" name="{i}in_tank_top" disabled="disabled" /></td></tr>
<tr><td>Manufacturer</td><td><input type="text" name="{i}manufacturer" /></td><td>Z95</td><td><input type="text" name="{i}z_95" disabled="disabled" /></td></tr>
<tr><td>Tank type/model</td><td><input type="text" name="{i}tank_type" /></td><td>Fill to flapper</td><td><input type="text" name="{i}top_to_flapper" disabled="disabled" /></td></tr>
<tr><td> Applause

ate of install</td><td><input type="text" name="{i}date_install" /></td><td> Applause

ifference (C Actual - C 95)</td><td><input type="text" name="{i}difference" disabled="disabled" /></td></tr>
<tr><td>Flapper Model</td><td><input type="text" name="{i}flapper_model" /></td><td>Inches at C95 Actual</td><td><input type="text" name="{i}inches_C95_actual" disabled="disabled" /></td></tr>
<tr><td>Flapper installed on manway?</td><td><input type="text" name="{i}flapper_installed_manway" /></td><td>Flapper is set at</td><td><input type="text" name="{i}flapper_set_at" disabled="disabled" /></td></tr>
<tr><td>Type of fill</td><td><input type="text" name="{i}type_fill" /></td><th colspan="2">Conclusion</th></tr>
<tr><td>Float orientation</td><td><input type="text" name="{i}float_orientation" /></td><th colspan="2"><input type="text" name="{i}conclusion" /></th></tr>
<tr><td>Cut Orientation</td><td><input type="text" name="{i}cut_orientation" /></td><th colspan="2" rowspan="11"><img src="directsmall.jpg" /></th></tr>
<tr><td>Jack Screws</td><td><input type="text" name="{i}jack_screws" /></td></tr>
<tr><td>Size in gallons</td><td><input onKeyUp="calcValues({i});" type="text" name="{i}size_gallons" /></td></tr>
<tr><td>Tank diameter (Y)</td><td><input onKeyUp="calcValues({i});" type="text" name="{i}tank_diameter" /></td></tr>
<tr><td>Top of drop tube to tank bottom(inches) (B)</td><td><input onKeyUp="calcValues({i});" type="text" name="{i}fill_to_bottom" /></td></tr>
<tr><td>Inches at 95% total volume (X95)</td><td><input onKeyUp="calcValues({i});" type="text" name="{i}inches_95" /></td></tr>
<tr><td>Top of fill to flapper (inches)</td><td><input onKeyUp="calcValues({i});" type="text" name="{i}fill_to_flapper" /></td></tr>
<tr><td>Gallons at C95 Actual</td><td><input onKeyUp="calcValues({i});" type="text" name="{i}gallons_95" /></td></tr>
<tr><td> Applause

T Height above tank bottom</td><td><input type="text" name="{i}dt_height" /></td></tr>
</table>
<br />
</div>
<div id="templateRemote">
<table>
<tr><th colspan="2">Tank Information</th><th colspan="2">Calculations</th></tr>
<tr><td>Tank # Per V-R</td><td><input type="text" name="{i}tank_no" /></td><td>95% Gallons</td><td><input type="text" name="{i}gal_95" disabled="disabled" /></td></tr>
<tr><td>Product</td><td><input type="text" name="{i}product" /></td><td>Inches to tank top (A)</td><td><input type="text" name="{i}in_tank_top" disabled="disabled" /></td></tr>
<tr><td>Manufacturer</td><td><input type="text" name="{i}manufacturer" /></td><td>Z95</td><td><input type="text" name="{i}z_95" disabled="disabled" /></td></tr>
<tr><td>Tank type/model</td><td><input type="text" name="{i}tank_type" /></td><td>Fill to flapper</td><td><input type="text" name="{i}top_to_flapper" disabled="disabled" /></td></tr>
<tr><td> Applause

ate of install</td><td><input type="text" name="{i}date_install" /></td><td> Applause

ifference (C Actual - C 95)</td><td><input type="text" name="{i}difference" disabled="disabled" /></td></tr>
<tr><td>Flapper Model</td><td><input type="text" name="{i}flapper_model" /></td><td>Inches at C95 Actual</td><td><input type="text" name="{i}inches_C95_actual" disabled="disabled" /></td></tr>
<tr><td>Flapper installed on manway?</td><td><input type="text" name="{i}flapper_installed_manway" /></td><td>Flapper is set at</td><td><input type="text" name="{i}flapper_set_at" disabled="disabled" /></td></tr>
<tr><td>Type of fill</td><td><input type="text" name="{i}type_fill" /></td><th colspan="2">Conclusion</th></tr>
<tr><td>Float orientation</td><td><input type="text" name="{i}float_orientation" /></td><th colspan="2"><input type="text" name="{i}conclusion" /></th></tr>
<tr><td>Cut Orientation</td><td><input type="text" name="{i}cut_orientation" /></td><th colspan="2" rowspan="11"><img src="remotesmall.jpg" /></th></tr>
<tr><td>Jack Screws</td><td><input type="text" name="{i}jack_screws" /></td></tr>
<tr><td>Size in gallons</td><td><input onKeyUp="calcValues({i});" type="text" name="{i}size_gallons" /></td></tr>
<tr><td>Tank diameter (Y)</td><td><input onKeyUp="calcValues({i});" type="text" name="{i}tank_diameter" /></td></tr>
<tr><td>Top of drop tube to tank bottom(inches) (B)</td><td><input onKeyUp="calcValues({i});" type="text" name="{i}fill_to_bottom" /></td></tr>
<tr><td>Inches at 95% total volume (X95)</td><td><input onKeyUp="calcValues({i});" type="text" name="{i}inches_95" /></td></tr>
<tr><td>Top of fill to flapper (inches)</td><td><input onKeyUp="calcValues({i});" type="text" name="{i}fill_to_flapper" /></td></tr>
<tr><td>Gallons at C95 Actual</td><td><input onKeyUp="calcValues({i});" type="text" name="{i}gallons_95" /></td></tr>
<tr><td>Remotes only: Inches to bottom of tee (E)</td><td><input type="text" name="{i}inches_bottom_tee" /></td></tr>
<tr><td>Remotes only: Riser Height Below Tee to TT (min = 13" Applause

</td><td><input type="text" name="{i}riser_height_below_tee" /></td></tr>
<tr><td> Applause

T Height above tank bottom</td><td><input type="text" name="{i}dt_height" /></td></tr>
</table>
<br />
</div>
</div>

</body>
</html>

HTML;

if(isset($_POST['site_no']))
{
echo("<pre> <div id="results" class="results"> ");
print_r($_POST);
echo("</div> </pre> ");
}

echo $main;

?>

Again, you may ask why - well, with this form, my output is explicit, rather than implied - and it's also at the exact moment of my choosing rather than when

PHP

runs across a character and pukes it out. Note that a file like this MUST NOT have any carriage returns on either side of the <?

php

?> or you'll defeat the whole purpose.

My standard MO is to do all my work (whatever it is) - and create an array that contains everything that will be going back out and then dump it at the last minute. This gives me the opportunity, at any time during processing, to completely change course (ie., send back a 404, change the output utterly, redirect, you name it) which I find in dynamic sites as very helpful.

Note that the TEXTHERE operator ( <<< ) will dereference variables, so you could put all kinds of vars right in that block. eg:

<?

php

$theDate = date('Y-m-d H:i:s', time());
$aString = 'Hello World';
$buff = <<<SOMETEXT
The date is $theDate and I'd like to say "$aString."
SOMETEXT;
?>

If you get used to this form, you'll find LOTS of wonderfulness in how you can code efficiently.

/p

vsloathe

Cool, thanks Perkomatic. I generally do separate my HTML and

PHP

and put all the HTML in a variable in my

PHP

and then just echo it, but I wrote this up quickly to be functional, I wanted to see what was being POSTed before I started doing all the database stuff. This is a little app to enter and report on data regarding the flapper valves that prevent underground petroleum tanks from being overfilled. Most contractors install them wrong so we have to go recheck them.