CODEWITHSUNDEEP
phpjavascriptformsjquery
Álvaro Burgos
Álvaro Burgos

Reputation: 11

Use form values to dynamically calculate another value on same page

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

I have two tables:

  1. with the input form
  2. 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>

Upvotes: 0

Views: 1973

Answers (1)

behz4d
behz4d

Reputation: 1849

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>

Upvotes: 1

Related Questions