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>&nbsp;</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

I think that you can use Javascript.

An example here:

http://stackoverflow.com/questions/7563879/how-to-calculate-active-total-using-javascript-for-html-form

Hope that helps!

Djulia

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 &gt;&gt;">
          </td>
         </tr>
        </table>
        
        </form>

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