CODEWITHSUNDEEP
jquery
Paramasivan
Paramasivan

Reputation: 791

Dynamic currency conversion with jquery

I have one input field where numeric value will be entered and on another read only field the converted (calculated) value will be displayed dynamically.

I tried with jQuery but it is not working.

Html 

<form name="curconvert" method="get" action="script/conversion.php">
  <div class="field-row conversion">
       <div class="field1"><input type="text" name="strbasecurrency" id="strbasecurrency" tabindex="1"  value="Start typing..." onfocus="if (this.value == 'Start typing...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Start typing...';}" /></div>
        <div class="field2">=</div>
        <div class="field3"><input type="text" name="strconvcurrency" id="strconvcurrency" value="Result" readonly class="converted"></div>
   </div>
</form>

jQuery

$(document).ready(function() {


$("#strbasecurrency").keydown(function (e) {
    $('.field-row input').css({'color':'#162d3a'});
    // Allow: backspace, delete, tab, escape, enter and .
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
         // Allow: Ctrl+A
        (e.keyCode == 65 && e.ctrlKey === true) || 
         // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 39)) {
             // let it happen, don't do anything
             return;
    }
    // Ensure that it is a number and stop the keypress
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
        e.preventDefault();
    }
    $converted == ($("#strbasecurrency").val() * 0.73);
    $("#strconvcurrency").val("$converted");
   });
 });

JS Fiddle

Upvotes: 0

Views: 299

Answers (2)

Icarus
Icarus

Reputation: 63956

You had several issues:

  1. you use the $converted variable without preceding it with var.
  2. You tried to use the == operator to assign a value when you should have used =
  3. When you tried to set the value to the input field, you were enclosing the value in ""

The updated code should look like this:

$(document).ready(function() {


$("#strbasecurrency").keydown(function (e) {
    $('.field-row input').css({'color':'#162d3a'});
    // Allow: backspace, delete, tab, escape, enter and .
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
         // Allow: Ctrl+A
        (e.keyCode == 65 && e.ctrlKey === true) || 
         // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 39)) {
             // let it happen, don't do anything
             return;
    }
    // Ensure that it is a number and stop the keypress
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
        e.preventDefault();
    }
            //added "var" and used = instead of ==
    var $converted = ($("#strbasecurrency").val() * 0.73); 
    $("#strconvcurrency").val($converted); //removed double quotes around $converted

});

});

Updated fiddle

Upvotes: 2

Rory McCrossan
Rory McCrossan

Reputation: 337550

The issue is with the last two lines of your code where the syntax is a little off. Try this:

var converted = $("#strbasecurrency").val() * 0.73;
$("#strconvcurrency").val(converted);

Also you need to use the keypress or keyup event on your strbasecurrency field.

Updated fiddle

Upvotes: 1

Related Questions