Use form values to dynamically calculate another value on same page

Question

I am trying to use the form values to dynamically calculate another value on the same page.

I have two tables:

with the input form
Where I want to use the input form values dynamically before posting.

I have already used php but it doesn't work as I have to submit in order to get the values. I am not really familiar with j script and ajax, however i heard it is possible to do it using these. Let me know what you think is the best solution. thanks in advice.

Here the example:

<table><form name="form1" method="post" action="results.php">
    <tr>
        <td> </td><td> a </td><td> b </td>
    </tr>
    <tr>
        <td> Line 1 </td><td><input name="a1" type="number"></td><td><input name="b1" type="number"></td>
    </tr>
    <tr>
        <td> Line 2 </td><td><input name="a2" type="number"></td><td><input name="b2" type="number"></td>
    </tr>
    <tr>
        <td><input type="submit" name="Submit" value="Submit"></td>
    </tr>
</form></table>

<table>
    <tr>
        <td> Dynamic Result </td>
    </tr>
    <tr>
        <td> a1/b1 (to be calculated dynamically)</td>
    </tr>
    <tr>
        <td> a2/b2 (to be calculated dynamically) </td>
    </tr>
</table>

a few things: jscript !== javascript, ajax === javascript, and yes, javascript is a possible solution. You should read up on it. — Yoshi
– Yoshi, Commented Dec 22, 2012 at 13:56

behz4d · Accepted Answer · 2012-12-22 14:02:05Z

You need to start reading jQuery, but for now:

// Load jQuery Library, put jquery.js in current directory
<script type="text/javascript" src="jquery.js"></script>
<table><form name="form1" id="form1" method="post" action="results.php">
    <tr>
        <td> </td><td> a </td><td> b </td>
    </tr>
    <tr>
        <td> Line 1 </td><td><input name="a1" id="a1" type="number"></td><td><input name="b1" id="b1" type="number"></td>
    </tr>
    <tr>
        <td> Line 2 </td><td><input name="a2" id="a2" type="number"></td><td><input name="b2" id="b2" type="number"></td>
    </tr>
    <tr>
        <td><input type="submit" name="Submit" value="Submit"></td>
    </tr>
</form></table>

<table>
    <tr>
        <td> Dynamic Result </td>
    </tr>
    <tr>
        <td id="first-result"> a1/b1 (to be calculated dynamically)</td>
    </tr>
    <tr>
        <td id="second-result"> a2/b2 (to be calculated dynamically) </td>
    </tr>
</table>


<script>
$(document).ready(function(){
    $('input').on('change', function(){
        var a1 = $('#a1').val();
        var a2 = $('#a2').val();
        var b1 = $('#b1').val();
        var b2 = $('#b2').val();
        $('#first-result').text(parseInt(a1)/parseInt(a2));
        $('#second-result').text(parseInt(a2)/parseInt(b2));
    }); 
});
</script>

Collectives™ on Stack Overflow

Use form values to dynamically calculate another value on same page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related