Auto Update Amount (USD) using onchange with javascript

Question

I need help with this code. I have looked at tons of related questions but none has helped so far. Please help. These are exactly what I need:

To auto-update "Amount(USD)" once the value of "Amount(NGN)" is changed. Preferably with Vanilla Js.
I would also like to pick the final value of "Amount(USD)" and store in a PHP session to use in other pages.

See my code below:

<?php $grandTotal=10; ?>

<script type="text/javascript">
  function calculateTotal() {

    var nairaRate = document.pricecalculator.nairaRateToday.value; //get NGN rate today from admin and assign to nairaRate


    dollarValue = eval(document.pricecalculator.nairaInput.value * nairaRate); //multiply nairaInput by nairaRate to get dollarValue


    document.getElementById('dollar').innerHTML = dollarValue; //pass dollarValue to dollar to show auto-calculation onscreen
  }
</script>

<form name="pricecalculator" action="">
  <legend>Price Calculator (Buy BTC)</legend>
  <label>Amount (NGN)</label><input type="number" name="nairaInput" onchange="calculateTotal()" value="1" /> <br />
  <label>Amount (USD):</label><span id="dollar">1</span> <br />
  <input type="hidden" name="nairaRateToday" value="<?= $grandTotal ?>">
</form>

You **do** get an error message and the problem is you made a typo (voting to close as off-topic). You used the wrong variable name. — Quentin, Jul 20 '20 at 16:51
It's just hardcoded you can replace with your value wich is: document.pricecalculator.nairaRateToday.value, right? — Jérémie Bardon, Jul 20 '20 at 19:57
@JérémieBardon Pls could you show me an example pls. I already tried it and it doesnt work. Maybe yours will be different — codes4life, Jul 24 '20 at 08:48

score 0 · Answer 1 · edited Oct 07 '20 at 21:35

I was able to solve the problem like this:

<?php $grandTotal=10; ?> // set PHP variable


        <form name="pricecalculator" action=""> 
            <legend>Price Calculator (Buy BTC)</legend>
            <label>Amount (NGN)</label><input type="number" id="naira-input" name="naira-input" onchange="calculateTotl()" value="1"/> <br />
            <label>Amount (USD):</label><span id="dollar">1</span> <br />
        </form>


        <script type="text/javascript">
            function calculateTotl() {
                var nairaRate = document.getElementById("naira-input").value;
                // Select your current input

                let phpval = "<?= $grandTotal ?>"; // grab php value
                
                    var dollarResult = document.querySelector('#dollar'); 
                    var total = Number(nairaRate) * Number(phpval); evaluate current input * php value
                  return dollarResult.innerHTML = total; // write result to #dollar
                }
        </script>

score -1 · Answer 2 · answered Jul 20 '20 at 16:54

-1

Try this (worked for me):

var ngn = document.getElementById('ngn');
var dollar = document.getElementById('dollar');
ngn.onchange = ()=>{dollar.innerText=ngn.value*0.0026}

answered Jul 20 '20 at 16:54

St.Nicholas

104
5

No hardcoding. The value of nairaRateToday must be gotten from the PHP variable $grandTotal. Pls try using the PHP var – codes4life Jul 24 '20 at 08:45

score -1 · Answer 3 · answered Jul 20 '20 at 17:11

-1

Check the following code. I have used a hardcoded value, that is 7 as nairaRate

let nairaInput = document.querySelector("input[name='NairaValue']")

nairaInput.addEventListener('change', (e) => calculateTotal(e.target.value, 7))

function calculateTotal(input, nairaRate) {
  var resultInDollar = document.querySelector('#dollar');
  var total = Number(input) / Number(nairaRate);
  return resultInDollar.innerHTML = total
}

<form name="pricecalculator" action="">
  <legend>Price Calculator (Buy BTC) Naira At 7</legend>
  <label>Amount (NGN)</label><input type="number" name="NairaValue" onchange="calculateTotal()" value="0" /> <br />
  <label>Amount (USD):</label><span id="dollar">0</span> <br />
  <input type="hidden" name="nairaRateToday" value="<?= $grandTotal ?>">
</form>

Good Luck!

answered Jul 20 '20 at 17:11

Basil

1,664
13
25

the nairaRate must be the value of the php variable $grandTotal as seen in – codes4life Jul 20 '20 at 19:06
Sure, But in code snippet there is no option to take value from `= $grandTotal ?>">` as it is PHP. Code snippet supports only pure html,JavaScript and CSS. So I have given a working example with pure JavaScript. You can change the code as you need instead of downvoting. – Basil Jul 21 '20 at 05:03
Then possibly, your variable may not be accessible for your code. need to recheck again. – Basil Jul 22 '20 at 14:11
My variable is okay. Used it once in the page and it is okay. Pls try using it directly in your code. That will really help – codes4life Jul 24 '20 at 08:46
I can't, because this is pure JavaSript and you need solution in PHP. I am sorry about it. Try to apply the logic with your code. – Basil Jul 24 '20 at 08:48

Auto Update Amount (USD) using onchange with javascript

3 Answers3