[JS] Updating Variable Live

[Mike]

I would like in the Total (US Dollars) box to have a variable $totalcost, but need it to update live based on the Select Gold Quantity input. I've never used Javascript/Ajax/whatever I need before, so any help is appreciated.

theme/orderform.html.php:

<div class="mainimage"><br />
    <div class="ordergold">
        <div class="orderform">
            <div class="tablehead">
                Secure Order Form
            </div>
            <form action="includes/orderform.php" method="post" enctype="multipart/form-data">
                <div class="goldquantity">
                    Select Gold Quantity (Millions)<br />
                    <input type="text" class="forminput" name="goldquantity" value="0" required="required">
                </div>
                <div class="totalcost">
                    Total (US Dollars)<br />
                    <div class="formnoninput" id="Update">$ 0</div>
                </div>
                <div class="displayname">
                    Display Name<br />
                    <input type="text" class="forminput" name="displayname" value="" required="required">
                </div>
                <div class="paymentmethod">
                    Payment Method<br />
                    <div class="formnoninput">Paypal</div>
                </div>
                <div class="clear">
                </div>
                <input class="continue" type="submit" value="" />
            </form>
        </div>
    </div>
</div>

includes/orderform.php

<?php
include('config.php');
include('functions.php');

        
    
        $goldquantity = $_POST['goldquantity'];
        $pricemil = 0.35;
        $totalcost = $goldquantity * $pricemil;
        $displayname = $_POST['displayname'];
        $invoiceid = time();
        $ipaddress = $_SERVER['REMOTE_ADDR'];



         
    mysql_query("INSERT INTO orders(`goldquantity`, `totalcost`, `displayname`, `paymentmethod`, `invoiceid`, `ipaddress`, `complete`) VALUES('" . $goldquantity . "', '" . $totalcost . "', '" . $displayname . "', 'Paypal', '" . $invoiceid . "', '" . $ipaddress . "', '0')") or die(mysql_error());
echo '<meta http-equiv="REFRESH" content="0;url=../loginform.php?invoiceid=' . $invoiceid . '">';  


?>

 

[TimeBomb]

Try:

        <div class="goldquantity">
            Select Gold Quantity (Millions)<br />
            <input type="text" class="forminput" id="GoldQuantity" name="goldquantity" value="0" required="required">
        </div>
        <div class="totalcost">
            Total (US Dollars)<br />
            <div class="formnoninput" id="Update">$0</div>
        </div>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript">
            $('input#GoldQuantity').keyup(function() {
                var goldQuantity = $('input#GoldQuantity').val();
                if (parseInt(goldQuantity) != goldQuantity) {
                    $('#Update').html('Input Error');
                } else {
                    var algorithm = goldQuantity * 1000000; // This algorithm can be modified as you see fit.
                    $('#Update').html('$' + algorithm); 
                }
            });
        </script>

 

[Mike]

Try:

        <div class="goldquantity">
            Select Gold Quantity (Millions)<br />
            <input type="text" class="forminput" id="GoldQuantity" name="goldquantity" value="0" required="required">
        </div>
        <div class="totalcost">
            Total (US Dollars)<br />
            <div class="formnoninput" id="Update">$0</div>
        </div>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript">
            $('input#GoldQuantity').keyup(function() {
                var goldQuantity = $('input#GoldQuantity').val();
                if (parseInt(goldQuantity) != goldQuantity) {
                    $('#Update').html('Input Error');
                } else {
                    var algorithm = goldQuantity * 1000000; // This algorithm can be modified as you see fit.
                    $('#Update').html('$' + algorithm); 
                }
            });
        </script>

Already thanked you on MSN for this. But just in case anyone else needs it, this does work great.

Thanks again Timebomb. <3

 

[jMerliN]

You must be registered to see links

 

[NubPro]

Try:

        <div class="goldquantity">
            Select Gold Quantity (Millions)<br />
            <input type="text" class="forminput" id="GoldQuantity" name="goldquantity" value="0" required="required">
        </div>
        <div class="totalcost">
            Total (US Dollars)<br />
            <div class="formnoninput" id="Update">$0</div>
        </div>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript">
            $('input#GoldQuantity').keyup(function() {
                var goldQuantity = $('input#GoldQuantity').val();
                if (parseInt(goldQuantity) != goldQuantity) {
                    $('#Update').html('Input Error');
                } else {
                    var algorithm = goldQuantity * 1000000; // This algorithm can be modified as you see fit.
                    $('#Update').html('$' + algorithm); 
                }
            });
        </script>

is that Ajax thingy?
btw, can u explain how it works?

 

[TimeBomb]

is that Ajax thingy?
btw, can u explain how it works?

You must be registered to see links

You must be registered to see links

You must be registered to see links

You must be registered to see links

 

[Mike]

Are you able to make it only have 2 digits after the decimal, timebomb? Right now for certain amounts it goes on for like 10 digits.

 

[EliteGM]

.toFixed will do that most likely