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/>
        <?php endif ?>
        <table border="0" cellspacing="0" cellpadding="2">
          <td width="150">A</td>
          <td><input type="text" name="a" value="<?php echo htmlspecialchars(@$_REQUEST['a']); ?>" size="50" /></td>
          <td width="150">B</td>
          <td><input type="text" name="b" value="<?php echo htmlspecialchars(@$_REQUEST['b']); ?>" size="50" /></td>
          <td width="150">A + B</td>
          <td><input type="text" name="c" value="<?php echo htmlspecialchars(@$_REQUEST['c']); ?>" size="50" /></td>
          <td colspan="2" align="center">
            <input type="submit" name="submit" value="Send Message &gt;&gt;">

How can I get the total of A + B to display in C? Prior to submitting the form?


Tim (

By Toledoh - April 9, 2013

Mate - it's brilliant!  Thanks.


Tim (

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 {

The Javascript:

<script type="text/javascript">
    $.fn.percentComplete = function(selector, color, size){
        return this.each(function(){
            var fieldCount = $(selector).not(":radio").length;
            var names = [];
var n = $(this).attr('name');
                if(names.indexOf(n) < 0){
            fieldCount = fieldCount + names.length;
                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>&nbsp;</div></div>").children("div").css({"width": size, "border": "1px solid"+color}).children("div").css({"width": percentComplete+"%", "background-color":color});

    $("#completion_meter").percentComplete(".percentage", "#006BAF", "306px");
        $("#completion_meter").percentComplete(".percentage", "#006BAF", "306px");

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:

By Toledoh - April 11, 2013

Hey, that's pretty cool also!  Bookmarked!


Tim (