Javascript variable automatically changing

Question

I have a small issue with a currency calculator that I have created. Everything works as I wish, but when I change the currencies in the dropdown, the values don't change until I manually input a new amount. How would I adapt the code so that the conversion updates to the correct amount without the need to re-input the number you want?

Thanks in advance.

<script>
$(document).ready(function() {
$("#from").msDropdown();
})
</script>

<script>
$(document).ready(function() {
   $("#to").msDropdown();
    })
</script>

<script>
$(document).change(function() {
  getSingleExchange();
});


function getSingleExchange() {
  var fromCurr = $("#to option:selected").val();
  var toCurr = $("#from option:selected").val();
  var from = $('input[name=target_value]').val();
  var to = $('input[name=base_value]').val();

 rate = parseInt(from) / parseInt(to);

  output = " Exchange Rate: " + toCurr + " to " + fromCurr + " = " + rate.toFixed(2) + ". Please input new figures if changing currency. ";

  $("#singleExchangeValue").html(output);
}
</script>

<form class="frConverter">
<div class="field-row">
            <div class="from">
                <label for="from">Sending From:</label>
                <select id="from" value="gbp" name="base_currency" class="select-box">
                      <option value="USD">United States (Dollar) - USD</option>
                      <option value="GBP">United Kingdom (Pound) - GBP</option>
                      <option value="EUR">Albania (Euro) - EUR</option>
                      <option value="EUR">Andorra (Euro) - EUR</option>
                      <option value="ARS">Argentina (Peso) - ARS</option>
                      <option value="AUD">Australia (Dollar) - AUD</option>
                      <option value="EUR">Austria (Euro) - EUR</option>
                      <option value="EUR">Belgium (Euro) - EUR</option>
                      <option value="BOB">Bolivia (Boliviano) - BOB</option>
                      <option value="BRL">Brazil (Real) - BRL</option>
                      <option value="EUR">Bulgaria (Euro) - EUR</option>
                      <option value="CAD">Canada (Dollar) - CAD</option>
                      <option value="CLP">Chile (Peso) - CLP</option>
                      <option value="CNY">China (Yuan Renminbi) - CNY</option>
                      <option value="COP">Colombia (Peso) - COP</option>
                      <option value="CRC">Costa Rice (Colon) - CRC</option>
                      <option value="EUR">Cyprus (Euro) - EUR</option>
                      <option value="DKK">Denmark (Krona) - DKK</option>
                      <option value="DOP">Dom. Rep. (Peso) - DOP</option>
                      <option value="USD">Dom. Rep. (Dollar) - USD</option>
                      <option value="USD">Ecuador (Dollar) - USD</option>
                      <option value="USD">El Salvador (Dollar) - USD</option>
                    </select>
                    <input type="text" name="base_value" size="10" value="500">
                    <input type="hidden" name="default_base" value="gbp">
                </div>

                <div class="to">
                    <label for="to">Sending To:</label>
                <select id="to" value="USD" name="target_currency" class="select-box">
                      <option value="USD">United States (Dollar) - USD</option>
                      <option value="GBP">United Kingdom (Pound) - GBP</option>
                      <option value="EUR">Albania (Euro) - EUR</option>
                      <option value="EUR">Andorra (Euro) - EUR</option>
                      <option value="ARS">Argentina (Peso) - ARS</option>
                      <option value="AUD">Australia (Dollar) - AUD</option>
                      <option value="EUR">Austria (Euro) - EUR</option>
                      <option value="EUR">Belgium (Euro) - EUR</option>
                      <option value="BOB">Bolivia (Boliviano) - BOB</option>
                      <option value="BRL">Brazil (Real) - BRL</option>
                      <option value="EUR">Bulgaria (Euro) - EUR</option>
                      <option value="CAD">Canada (Dollar) - CAD</option>
                      <option value="CLP">Chile (Peso) - CLP</option>
                      <option value="CNY">China (Yuan Renminbi) - CNY</option>
                      <option value="COP">Colombia (Peso) - COP</option>
                      <option value="CRC">Costa Rice (Colon) - CRC</option>
                      <option value="EUR">Cyprus (Euro) - EUR</option>
                      <option value="DKK">Denmark (Krona) - DKK</option>
                      <option value="DOP">Dom. Rep. (Peso) - DOP</option>
                      <option value="USD">Dom. Rep. (Dollar) - USD</option>
                      <option value="USD">Ecuador (Dollar) - USD</option>
                      <option value="USD">El Salvador (Dollar) - USD</option>
                    </select>
<input type="hidden" name="default_target" value="usd">
<input type="text" name="target_value" size="10" value="">
                </div>
            </div>
<div id="singleExchangeValue" style="color:white !important; font-size:12px"></div>
<br>
</form>

Answer 1

Bind the change event on all four form elements. The conversion doesn't work in the example but this is purely for event handling purposes.

 $('#target_value,#base_value,#to,#from').change(function() { getSingleExchange(); }); function getSingleExchange() { var fromCurr = $("#from option:selected").val(); var toCurr = $("#to option:selected").val(); var from = $('input[name=target_value]').val(); var to = $('input[name=base_value]').val(); alert('Convert from ' + fromCurr + ' - ' + toCurr); rate = parseInt(from) / parseInt(to); output = " Exchange Rate: " + toCurr + " to " + fromCurr + " = " + rate.toFixed(2) + ". Please input new figures if changing currency. "; $("#singleExchangeValue").html(output); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class="frConverter"> <div class="field-row"> <div class="from"> <label for="from">Sending From:</label> <select id="from" value="gbp" name="base_currency" class="select-box"> <option value="USD">United States (Dollar) - USD</option> <option value="GBP">United Kingdom (Pound) - GBP</option> <option value="EUR">Albania (Euro) - EUR</option> <option value="EUR">Andorra (Euro) - EUR</option> <option value="ARS">Argentina (Peso) - ARS</option> <option value="AUD">Australia (Dollar) - AUD</option> <option value="EUR">Austria (Euro) - EUR</option> <option value="EUR">Belgium (Euro) - EUR</option> <option value="BOB">Bolivia (Boliviano) - BOB</option> <option value="BRL">Brazil (Real) - BRL</option> <option value="EUR">Bulgaria (Euro) - EUR</option> <option value="CAD">Canada (Dollar) - CAD</option> <option value="CLP">Chile (Peso) - CLP</option> <option value="CNY">China (Yuan Renminbi) - CNY</option> <option value="COP">Colombia (Peso) - COP</option> <option value="CRC">Costa Rice (Colon) - CRC</option> <option value="EUR">Cyprus (Euro) - EUR</option> <option value="DKK">Denmark (Krona) - DKK</option> <option value="DOP">Dom. Rep. (Peso) - DOP</option> <option value="USD">Dom. Rep. (Dollar) - USD</option> <option value="USD">Ecuador (Dollar) - USD</option> <option value="USD">El Salvador (Dollar) - USD</option> </select> <input type="text" id="base_value" name="base_value" size="10" value="500"> <input type="hidden" name="default_base" value="gbp"> </div> <div class="to"> <label for="to">Sending To:</label> <select id="to" value="USD" name="target_currency" class="select-box"> <option value="USD">United States (Dollar) - USD</option> <option value="GBP">United Kingdom (Pound) - GBP</option> <option value="EUR">Albania (Euro) - EUR</option> <option value="EUR">Andorra (Euro) - EUR</option> <option value="ARS">Argentina (Peso) - ARS</option> <option value="AUD">Australia (Dollar) - AUD</option> <option value="EUR">Austria (Euro) - EUR</option> <option value="EUR">Belgium (Euro) - EUR</option> <option value="BOB">Bolivia (Boliviano) - BOB</option> <option value="BRL">Brazil (Real) - BRL</option> <option value="EUR">Bulgaria (Euro) - EUR</option> <option value="CAD">Canada (Dollar) - CAD</option> <option value="CLP">Chile (Peso) - CLP</option> <option value="CNY">China (Yuan Renminbi) - CNY</option> <option value="COP">Colombia (Peso) - COP</option> <option value="CRC">Costa Rice (Colon) - CRC</option> <option value="EUR">Cyprus (Euro) - EUR</option> <option value="DKK">Denmark (Krona) - DKK</option> <option value="DOP">Dom. Rep. (Peso) - DOP</option> <option value="USD">Dom. Rep. (Dollar) - USD</option> <option value="USD">Ecuador (Dollar) - USD</option> <option value="USD">El Salvador (Dollar) - USD</option> </select> <input type="hidden" name="default_target" value="usd"> <input type="text" id="target_value" name="target_value" size="10" value=""> </div> </div> <div id="singleExchangeValue" style="color:white !important; font-size:12px"></div> <br> </form>