Form submission, auto-submit field names
HTML
<form name="enterVitals" action="">
<fieldset>
<br />
<legend>Enter Vitals</legend>
<fieldset>
<legend>Blood Pressure</legend>
<label>
Diastolic:
<input type="text" name="diastolic" size="10" />
</label>
<br />
<label>
Systolic:
<input type="text" name="systolic" size="10" />
</label>
<br />
</fieldset>
<br />
<br />
<fieldset>
<legend></legend>
<label>
Heart Rate:
<input type="text" name="heartRate" size="10" />
</label>
<br />
</fieldset>
<br />
<br />
<fieldset>
<legend>Temperature</legend>
<label>
Temperature(F°):
<input type="text" name="tempF" size="10" />
</label>
<br />
<label>
Temperature(C°):
<input type="text" name="tempC" size="10" />
</label>
<br />
</fieldset>
<br />
<br />
<fieldset>
<legend>Weight</legend>
<label>
Weight(lbs):
<input type="text" name="weightlbs" size="10" />
</label>
<br />
<label>
Weight(kgs):
<input type="text" name="weightkgs" size="10" />
</label>
<br />
</fieldset>
<br />
<br />
<fieldset>
<legend>Height</legend>
<label>
Height(Inches):
<input type="text" name="heightInches" size="10" />
</label>
<br />
<label>
Height(Cms):
<input type="text" name="heightCms" size="10" />
</label>
<br />
...
CSS
<style>
padding:5px;
margin:5px;
</style>
JavaScript 1.7
$("#addVitalRecord").click(function() {
var $formVital = $(this).closest("form");
var data = {};
$.map($(":text", $formVital), function (n, i) { data[n.name] = $(n).val(); });
$.post(
'postVitals.php',
data,
function(response) {
$("#vitalListing").load("vitalsPull.php");
$formVital.find(":text").val("");
}
);
return false;
});