Simple Calculation prior to sending form.
5 posts by 3 authors in: Forums > CMS Builder
Last Post: April 11, 2013 (RSS)
By Toledoh - April 8, 2013
Hi All.
I've got a simple emailForm.php that is acting as a booking form. ie.
<form method="POST" action="">
<input type="hidden" name="submitForm" value="1" />
<?php if (@$errorsAndAlerts): ?>
<div style="color: red; font-weight: bold; font-size: 16px; font-family: arial;"><br/>
<?php echo $errorsAndAlerts; ?><br/><br/>
</div>
<?php endif ?>
<table border="0" cellspacing="0" cellpadding="2">
<tr>
<td width="150">A</td>
<td><input type="text" name="a" value="<?php echo htmlspecialchars(@$_REQUEST['a']); ?>" size="50" /></td>
</tr>
<tr>
<td width="150">B</td>
<td><input type="text" name="b" value="<?php echo htmlspecialchars(@$_REQUEST['b']); ?>" size="50" /></td>
</tr>
<tr>
<td width="150">A + B</td>
<td><input type="text" name="c" value="<?php echo htmlspecialchars(@$_REQUEST['c']); ?>" size="50" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<br/>
<input type="submit" name="submit" value="Send Message >>">
</td>
</tr>
</table>
</form>
How can I get the total of A + B to display in C? Prior to submitting the form?
Tim (toledoh.com.au)
By Djulia - April 8, 2013
Hi
I think that you can use Javascript.
An example here:
Hope that helps!
Djulia
By Mikey - April 11, 2013
Funny... I was working with that just last night. Works well.
Here's another neat block of code that you find interesting for calculating the form's progress to completion:
A little CSS:
<style type="text/css">
#completion_meter {
float:right;
position:fixed;
margin-top:20px;
background-color:#FFF;
}
</style>
The Javascript:
<script type="text/javascript">
(function($){
$.fn.percentComplete = function(selector, color, size){
return this.each(function(){
var fieldCount = $(selector).not(":radio").length;
var names = [];
$(selector+":radio").each(function(){
var n = $(this).attr('name');
if(names.indexOf(n) < 0){
names.push(n);
}
});
fieldCount = fieldCount + names.length;
if(fieldCount){
var completeCount = $(selector+"[value!='']").not(":checkbox").not(":radio").length + $(selector+":checked").length;
var percentComplete = Math.round((completeCount / fieldCount) * 100);
$(this).empty().append(percentComplete + "% Complete<br><div><div> </div></div>").children("div").css({"width": size, "border": "1px solid"+color}).children("div").css({"width": percentComplete+"%", "background-color":color});
}
});
};
})(jQuery);
$("document").ready(function(){
$("#completion_meter").percentComplete(".percentage", "#006BAF", "306px");
$(":input").blur(function(){
$("#completion_meter").percentComplete(".percentage", "#006BAF", "306px");
});
});
</script>
A litte bit of form code as a sample... see the word "percentage" placed inside the class="text-field percentage"
<div class="field-description">First Name:</div>
<input type="text" name="first_name" class="text-field percentage" size="48" tabindex="1" value = "<?php echo @$_REQUEST['first_name'];?>" />
<div class="field-description">Last Name:</div>
<input type="text" name="last_name" class="text-field percentage" size="48" tabindex="2" value = "<?php echo @$_REQUEST['last_name'];?>" />
And the percentage meter:
<div id="completion_meter"></div>
Sourced from: http://forrst.com/posts/jQuery_Percent_Completed_Meter_a_jquery_plugin-Rv3