How to update second textbox automatically with update value using JS

Question

I have a PHP Script and two text box. Its kind of currency convert.

If the user want to buy 1 credit which is $5 using the first text box and by hitting tab the next textbox will update automatically by multiplying with a php variable.

Can it possible using simple inline JavaScript ?

My PHP variable is $currentValue.

1st Test-box is name & id="credit"
2nd Text-box is name & id="finalRupee"

Please see the below code its in a function.php file

<form action="index.php" method="post" name="userFormJob" onSubmit="return   validateForm()" enctype="multipart/form-data">
<table width= "100%">
<tr>
<td colspan="2"><strong><?php echo JText::_( 'PRICE FOR 1 CREDIT' ); ?> = <?php echo  $currencytype . ' ' . $currency.' '; ?> &nbsp;<?php echo $price_credit; ?> (Please Note:   For One credit value you can post 1 Job for 1 Day)</strong></td>
</tr>
<tr>
<td><p> <b>
<?php 
$content = file_get_contents("http://www.xe.com/ucc/convert.cgi?From=USD&To=INR&    Amount=1.&template=pca-xetrade"); 
$content = explode('<TABLE BORDER=0 CELLPADDING=3 CELLSPACING=0>',$content);
$content = str_replace('<TD VALIGN=MIDDLE ALIGN=RIGHT><FONT     FACE="Arial,Helvetica"><B>', "", "$content[1]");
$content = explode('<TD COLSPAN=3 ALIGN=CENTER><FONT FACE="Arial,Helvetica"     SIZE=-2>',$content);
$toremove = array("a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", ">", "<", "\"", "\'", "=", ",", "/", "-1");

$content = str_replace($toremove, "", "$content[0]");
$final = explode('+1',$content);

$from_code  = "USD";
$to_code    = "INR";
$currency   = $config-> get('currency');

echo '<b>' .$final[0]. ' ' .$from_code. ' =' .$final[1]. ' ' .$to_code. '</b>';
?>
</b></p></td>
</tr>
<tr>
<td><?php echo JText::_( 'BUY' ); ?></td>
<td><input type="text" name="credit" id="credit" class="inputbox"     onKeyPress="return     isNumberKey(event)" />
<?php 
$currentValue = $final[1];
?>
<?php echo JText::_('CREDIT'); ?>
<input name="finalRupee" type="text" class="inputbox" id="finalRupee" onKeyPress="return isNumberKey(event)" value="<?php ?>" readonly /></td>
</tr>
<tr>
<td colspan="2" >Please Use Currency Convert for Dollar to Rupees <a     href="http://www.xe.com/ucc/convert.cgi?Amount=1&From=USD&To=INR&template=8n"     target="_blank">Click Here</a></td>
</tr>
<tr>
<td colspan="2" ><b><?php echo JText::_('BILLING ADDRESS'); ?></b></td>
</tr>
<tr>
<td><?php echo JText::_('ADDRESS'); ?></td>
<td><input class="inputbox" type="text" name="address" id ="address" size="40"     maxlength="255" value="<?php echo $row->bill_addr; ?>"/></td>
</tr>
<tr>
<td><?php echo JText::_('ADDRESS CONT'); ?>:</td>
<td><input class="inputbox" type="text" size="40" maxlength="255" name="address_cont" id ="address_cont" value="<?php echo $row->bill_addr_cont; ?>"/></td>
</tr>
<tr>
<td><?php echo JText::_('CITY'); ?>: </td>
<td><input class="inputbox" type="text" name="city" id ="city" value="<?php echo     $row->bill_city; ?>"/></td>
</tr>
<tr>
<td><?php echo JText::_('STATE'); ?>:</td>
<td><input class="inputbox" type="text" name="state" id ="state" value="<?php echo     $row->bill_state; ?>"/></td>
</tr>
<tr>
<td><?php echo JText::_('COUNTRY'); ?>:</td>
<td><?php 
$list_country = getSelectCountry('id_country',$row->bill_id_country,'');
echo $list_country;
?></td>
</tr>
<tr>
<td><?php echo JText::_('ZIP POSTAL'); ?>:</td>
<td><input class="inputbox" type="text" name="zip" id ="zip" value="<?php echo         $row->bill_zip; ?>"/></td>
</tr>
<tr>
<td><?php echo JText::_('PHONE'); ?>:</td>
<td><input class="inputbox" type="text" name="phone" id ="phone" value="<?php echo     $row->bill_phone; ?>"/></td>
</tr>
<tr>
<td><?php echo JText::_('PAYMENT'); ?>:</td>
<td><select name="mode_pay">
<option value="m"><?php echo JText::_('MANUAL'); ?> / <?php echo JText::_('TRANSFER');     ?></option>
<option value="p">PayPall Secure Pay</option>
</select></td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td colspan="2"><center>
<img src="http://www.jobodisha.com/images/stories/powered_by.png" alt="Pay Pal Secure Payments" width="497" height="149" align="absmiddle">
</center></td>
</tr>
</table>
<input type="submit" value="<?php echo JText::_( 'BUY' ); ?>" class="button" />
<input type="hidden" name="option" value="<?php echo $option; ?>" />
<input type="hidden" name="task" value="savebuycredit" />
<input type="hidden" name="boxchecked" value="0" />
<?php echo JHTML::_('form.token'); ?>
</form>

Answer 1

I tried below method and its work for me.

<?php 

    $content = file_get_contents("http://www.xe.com/ucc/convert.cgi?From=USD&To=INR&Amount=1.&template=pca-xetrade"); 

    $content = explode('<TABLE BORDER=0 CELLPADDING=3 CELLSPACING=0>',$content);

    $content = str_replace('<TD VALIGN=MIDDLE ALIGN=RIGHT><FONT FACE="Arial,Helvetica"><B>', "", "$content[1]");

    $content = explode('<TD COLSPAN=3 ALIGN=CENTER><FONT FACE="Arial,Helvetica" SIZE=-2>',$content);

    $toremove = array("a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", ">", "<", "\"", "\'", "=", ",", "/", "-1");

    $content = str_replace($toremove, "", "$content[0]");

    $final = explode('+1',$content);

    $from_code  = "USD";

    $to_code    = "INR";

    $currency   = $config-> get('currency');

    echo '<h3> Today Cost of ' .$final[0]. ' ' .$from_code. ' =' .$final[1]. ' ' .$to_code. '</h3>';
?>

Answer 2

I would get the variable into JavaScript from PHP using

<script>var conversionRate = <?php echo $currentValue; ?>;</script>

And then process the conversion in JavaScript when the first text box losses focus:

<script>
    document.getElementById("credit").onblur = function() {
        document.getElementById("finalRupee").value = this.value * conversionRate;
    };
</script>

The code works without any add-on libraries. If you are already using jQuery or another library, you may prefer shorter code, but this works without any dependencies.

Please tell me if there is anything I can elaborate on, or if there is something I didn't answer.

Update
Just realized I had put <?php echo $currentValue; ?> in quotes, which it shouldn't be. The code has been fixed.

Answer 3

You don't need php to do the simple multiplication calculation. Simple inline jquery code for this would be:

var individualCost= 5;
var amount = $("#credit").val();
$("#finalRupee").val(amount * individualCost);