Welcome Guest, Not a member yet? Register   Sign In
calculating values based on the form input
#1

I want to multiply the values in the form . output should be in same form and same line.
I attached a image of that queries.

First field is 
echo '<td  align="center"><input type="number" min="1" max="999" value="1" style=""></td>';

second value in (from db)

                    echo '<td>'.$row['fee'].'</td>';

once i changed the value from first field automatically calculate and display the values in the FEE field.
suggestion please

Attached Files Thumbnail(s)
   
Reply
#2

If you want to change it on screen when user changes values in form, it has to be JS solution.
Reply
#3

(This post was last modified: 08-20-2018, 04:26 AM by Marcel.)

Yes JS is the Way to go

here is a small snippet that should get you going.
Carefull, this is far from professional quality code just a basic implementation using jquery.

Code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<input type="text" name="value1" id="textone">
<input type="text" name="value2" id="texttwo">
<input type="text" name="result" id="result">

<script>
   $('#texttwo').keyup(function(){
       var textone;
       var texttwo;
       textone = parseFloat($('#textone').val());
       texttwo = parseFloat($('#texttwo').val());
       var result = textone + texttwo;
       $('#result').val(result.toFixed(2));
   });
</script>

here is a pure javascript example (no jquery needed).

Code:
<input type="text" id="textone"  onkeyup="sum();" />
<input type="text" id="texttwo"  onkeyup="sum();" />
<input type="text" id="textthree" />

<script>
function sum() {
           var txtFirstNumberValue = document.getElementById('textone').value;
           var txtSecondNumberValue = document.getElementById('texttwo').value;
           var result = parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue);
           if (!isNaN(result)) {
               document.getElementById('textthree').value = result;
           }
       }
</script>
Reply
#4

(This post was last modified: 08-20-2018, 11:32 PM by kvanaraj.)

(08-20-2018, 04:19 AM)Marcel Wrote: Yes JS is the Way to go

here is a small snippet that should get you going.
Carefull, this is far from professional quality code just a basic implementation using jquery.

Code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<input type="text" name="value1" id="textone">
<input type="text" name="value2" id="texttwo">
<input type="text" name="result" id="result">

<script>
   $('#texttwo').keyup(function(){
       var textone;
       var texttwo;
       textone = parseFloat($('#textone').val());
       texttwo = parseFloat($('#texttwo').val());
       var result = textone + texttwo;
       $('#result').val(result.toFixed(2));
   });
</script>

here is a pure javascript example (no jquery needed).

Code:
<input type="text" id="textone"  onkeyup="sum();" />
<input type="text" id="texttwo"  onkeyup="sum();" />
<input type="text" id="textthree" />

<script>
function sum() {
           var txtFirstNumberValue = document.getElementById('textone').value;
           var txtSecondNumberValue = document.getElementById('texttwo').value;
           var result = parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue);
           if (!isNaN(result)) {
               document.getElementById('textthree').value = result;
           }
       }
</script>
i try with all possibilities but result not came
echo '<td id="textone">'.$row['fee'].  '</td>'; 
echo '<td id="texttwo" align="center"><input type="number" min="0" max="999" name="cnt"     value="0"   onkeyup="sum();"></td>';
echo '<td> <input type="text" name="result" id="result"></td>'; 


<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
function sum() {
           var txtFirstNumberValue = document.getElementById('textone').value;
           var txtSecondNumberValue = document.getElementById('texttwo').value;
           var result = parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue);
           if (!isNaN(result)) {
               document.getElementById('result').value = result;
           }
       }
</script>

Attached Files Thumbnail(s)
   
Reply




Theme © iAndrew 2016 - Forum software by © MyBB