How to pass PHP input text to JavaScript and back to PHP label

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