CODEWITHSUNDEEP
javascriptjquery
user2495761
user2495761

Reputation:

Using one script to process multiple calculations from form inputs

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?

Upvotes: 0

Views: 91

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

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

Upvotes: 1

Related Questions