Using one script to process multiple calculations from form inputs

Question

I have a jQuery function that calculates numbers from user inputs and outputs the result in a new readonly input. The code below shows the script I'm using, but the form is just for illustration purposes because the real form has 12 or more of these inputs. My questions is, is there a way to make my one script do all calculations for all the different inputs? Or, do I have to write out 12 or more of these scripts for each set?

<html>
<head>

<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>

<script type='text/javascript'>//<![CDATA[

$(window).load(function(){
$(':input').bind('keypress keydown keyup change',function(){
    var pp_result = parseFloat($(':input[name="pp_month_result"]').val(),10),
        pp_goal = parseFloat($(':input[name="pp_month_goal"]').val(),10);

    var day = "<?php echo date('d'); ?>";
    var monthDays = "<?php echo date('t'); ?>";

    var v = '';
    if (!isNaN(pp_result) && !isNaN(pp_goal)){
        v = parseFloat((pp_result) / (day) * (monthDays) / (pp_goal) * 100).toFixed(0)+"%";
    }
    $(':input[name="pp_month_trend"]').val(v.toString());
});
});//]]>  

</script>
</head>

<body>

<form>
    Result 1 <input type="text" name="pp_month_result"><br>
    Goal 1 <input type="text" name="pp_month_goal"><br>
    Trend 1 <input type="text" name="pp_month_trend" readonly>

    Result 2 <input type="text" name="aa_month_result"><br>
    Goal 2 <input type="text" name="aa_month_goal"><br>
    Trend 2 <input type="text" name="aa_month_trend" readonly>
</form>


</body>
<html>

The problem I did not clarify earlier is that the second set of inputs have different names so they can be posted to a separate PHP file.

            <div>
        <tr>
        <td>POST</td>
        <td>
        <input type="text" name="pp_today_result" class="numbox">
        </td>
        <td>
        <input type="text" name="pp_today_goal" class="numbox">
        </td>
        <td style="padding: 0 0 0 10px; border-left: 1px solid #D6D6D6;">
        <input type="text" name="pp_month_result" class="numbox">
        </td>
        <td style="padding: 0 0 0 5px;">
        <input type="text" name="pp_month_goal" class="numbox">
        </td>
        <td style="padding: 0 0 0 5px;">
        <input type="text" name="pp_month_trend" class="numbox" readonly>
        </td>
        </tr>
        </div>

My inputs are inside a table as show above, is this what's preventing the suggested solution from working for me?

Arun P Johny · Accepted Answer · 2014-01-17 09:51:03Z

1

Group the elements using a container so that you can find the related input elements easily

<form>
    <div>
        Result 1 <input type="text" name="pp_month_result"/><br/>
        Goal 1 <input type="text" name="pp_month_goal"/><br/>
        Trend 1 <input type="text" name="pp_month_trend" readonly />
    </div>
    <div>
        Result 2 <input type="text" name="pp_month_result"/><br/>
        Goal 2 <input type="text" name="pp_month_goal"/><br/>
        Trend 2 <input type="text" name="pp_month_trend" readonly />
    </div>
</form>

then

$(window).load(function(){
    $(':input').bind('keypress keydown keyup change',function(){
        var $div = $(this).closest('div');
        var pp_result = parseFloat($div.find(':input[name$="_month_result"]').val(),10),
            pp_goal = parseFloat($div.find(':input[name$="_month_goal"]').val(),10);

        var day = 5;
        var monthDays = 2;

        var v = '';
        if (!isNaN(pp_result) && !isNaN(pp_goal)){
            v = parseFloat((pp_result) / (day) * (monthDays) / (pp_goal) * 100).toFixed(0)+"%";
        }
        $div.find(':input[name$="_month_trend"]').val(v.toString());
    });
});

Demo: Fiddle

edited Jan 17, 2014 at 9:51

answered Jan 17, 2014 at 9:42

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user2495761 Over a year ago

Sorry! I should have clarified that the name of the inputs is different for the next section of inputs. Looking at my code now I realize that I left it the same. I will update.

Arun P Johny Over a year ago

@Mike see the update... a minor tweak to the input name selector could fix it

user2495761 Over a year ago

Arun, this is great! Only, it doesn't seem to work if the inputs are part of a table. Check out what my actual inputs look like on my updated post.

Arun P Johny Over a year ago

@Mike in that case there i no need for the div, instead of var $div = $(this).closest('div'); use var $div = $(this).closest('tr');

user2495761 Over a year ago

let us continue this discussion in chat

Collectives™ on Stack Overflow

Using one script to process multiple calculations from form inputs

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related