I have a PHP textBox that allows user to input an amount
<input id="inputAmount" type="number" class="form-control" name="amount" required>
and a label to display a message.
<label id="Message" style="display:none"> 'ExchangeRate is ' . $Rate . 'and converted amount is '. $ConvertedAmount </label>
and this is my concept of a JavaScript for calculation
<script> $("#inputAmount").change(function(){ var ConvertedAmount = Rate * inputAmount; return ConvertedAmount; }); </script>
How should I do for making it work to show an instant converted result to the user?
Here it is in action without the PHP bits.
And the PHP would look like
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="inputAmount" type="number" class="form-control" name="amount" required> <label id="Message"></label> <script> var rate = <?php echo $rate; ?> //inserted with PHP $("#inputAmount").change(function(){ var inputAmount = this.value; var ConvertedAmount = rate * inputAmount; var text = 'ExchangeRate is '+rate+' and converted amount is ' + ConvertedAmount; $('#Message').text(text); }); </script>
I think it will solve your problem.
<label id="Message" style="display:none"> 'ExchangeRate is <i id='rate'></i> and converted amount is <i id='convertedAmount'></i> </label>
Your Javascript
<script> $("#inputAmount").change(function(){ var ConvertedAmount = Rate * inputAmount; $("#convertedAmount").html(ConvertedAmount); $("#rate").html(Rate); }); </script>
put the content of your php variable inside the input then get the value of input using javascript then go to your javascript calculation. like this.
<input id="inputAmount" type="number" class="form-control" name="amount" required> <input id="rate" type="hidden" class="form-control" value="<?php $Rate ?>">
then your javascript code
<script> $("#inputAmount").change(function(){ var Rate = document.getElementById('rate').value; var ConvertedAmount = Rate * inputAmount; return ConvertedAmount; }); </script>
$("#inputAmount").change(function(){ var Rate = <?php echo $rate; ?> var ConvertedAmount = Rate * inputAmount; document.getElementById('Message').innerHTML = 'ExchangeRate is ' + Rate + 'and converted amount is ' + ConvertedAmount ; });
JavaScript needs to be able to see the rate, so:
<input type="hidden" id="rate" value="<?php echo $Rate; ?>" />
Then as the input is typed, use the keyup event:
$("#inputAmount").on('keyup', function(){ // Get the rate var Rate = $('#rate').val(); // Get the input amount var inputAmount = $(this).val(); // Do calculation var ConvertedAmount = Rate * inputAmount; // Change the message $('#Message').text('ExchangeRate is ' + Rate + ' and converted amount is ' + ConvertedAmount); });
I think you should try this my be help for you:
<input type="hidden" id="Rate" value="{{$Rate}}" /> $("#inputAmount").on('keyup', function(){ // Get the Rate value var Rate = $('#rate').val(); // Get the inputAmount value var inputAmount = $(this).val(); // Multiplication var ConvertedAmount = Rate * inputAmount; $('#Message').text('ExchangeRate is ' + Rate + ' and converted amount is ' + ConvertedAmount); });
Hope this work for you