输入框以美分显示全部美元金额

时间:2014-02-24 18:00:36

标签: javascript input

如何使我当前的脚本Estimate Total Box显示全价,包括美分?就目前而言,如果我在脚本中加上一个美分值,它只会在“估算总计”框中显示没有美分的美元金额。这是我的JS和HTML:

    <table id="order-table">
        <tr>
             <th class="thfiller" width="200px"></th>
             <th class="thname">Phone Type</th>
             <th class="thquantity">Quantity</th>
        </tr>
        <tr class="even">
            <td class="product-image"><a href="phoneimages/Polycom_SoundPoint_IP_650.png" title="Polycom SoundPoint IP 650" data-lightbox="Polycom_SoundPoint_IP_650"><img id="product-image" src="phoneimages/Polycom_SoundPoint_IP_650.png"></a><br><center><a href="pdf/soundpoint_ip650_datasheet.pdf" target="_new">View PDF</a></center></td>
            <td class="product-title"><p><b>Polycom SoundPoing IP 650</b></p><p>Designed to appeal to both executive users who require advanced features and applications, and telephone attendants who need multiple line support, the Polycom SoundPoint IP 650 sets a new standard for high-performance IP phones.</p></td>
            <td class="num-pallets"><input type="text" class="num-pallets-input" id="650-num-pallets" name="Polycom_SoundPoint_IP_650"></input></td>
            <td class="price-per-pallet" style="display:none">$<span>449</span></td>
            <td class="row-total" style="display:none"><input type="text" class="row-total-input" id="650-row-total" disabled="disabled"></input></td>
        </tr>
        <tr class="odd">
            <td class="product-image"><a href="phoneimages/Polycom_SoundPoint_IP_560.png" title="Polycom SoundPoint IP 560" data-lightbox="Polycom_SoundPoint_IP_560"><img id="product-image" src="phoneimages/Polycom_SoundPoint_IP_560.png"></a><br><center><a href="pdf/soundpoint_ip560_datasheet.pdf" target="_new">View PDF</a></center></td>
            <td class="product-title"><p><b>Polycom SoundPoint IP 560</b></p><p>The four-line SoundPoint IP 560 desktop phone delivers calls of unprecedented richness and clarity and supports a comprehensive range of cutting-edge features.</p></td>
            <td class="num-pallets"><input type="text" class="num-pallets-input" id="560-num-pallets" name="Polycom_SoundPoint_IP_560"></input></td>
            <td class="price-per-pallet" style="display:none">$<span>464.50</span></td>
            <td class="row-total" style="display:none"><input type="text" class="row-total-input" id="560-row-total" disabled="disabled"></input></td>
        </tr>
        <tr class="even">
            <td class="product-image"><a href="phoneimages/Polycom_soundPoint_IP_450.png" title="Polycom SoundPoint IP 450" data-lightbox="Polycom_soundPoint_IP_450"><img id="product-image" src="phoneimages/Polycom_soundPoint_IP_450.png"></a><br><center><a href="pdf/soundpoint_ip450_datasheet.pdf" target="_new">View PDF</a></center></td>
            <td class="product-title"><p><b>Polycom SoundPoint IP 450</b></p><p>The SoundPoint IP 450 desktop phone is designed to bring advanced telephony features and applications to cubicle/office workers handling a moderate volume of calls.</p></td>
            <td class="num-pallets"><input type="text" class="num-pallets-input" id="450-num-pallets" name="Polycom_soundPoint_IP_450"></input></td>
            <td class="price-per-pallet" style="display:none">$<span>391.60</span></td>
            <td class="row-total" style="display:none"><input type="text" class="row-total-input" id="450-row-total" disabled="disabled"></input></td>
        </tr>
        <tr class="odd">
            <td class="product-image"><a href="phoneimages/Polycom_soundPoint_IP_335.png" title="Polycom SoundPoint IP 335" data-lightbox="Polycom_soundPoint_IP_335"><img id="product-image" src="phoneimages/Polycom_soundPoint_IP_335.png"></a><br><center><a href="pdf/soundpoint_ip335_datasheet.pdf" target="_new">View PDF</a></center></td>
            <td class="product-title"><p><b>Polycom SoundPoint IP 335</b></p><p>The SoundPoint IP 335 phone delivers a business grade telephony endpoint at an entry-level price.</p></td>
            <td class="num-pallets"><input type="text" class="num-pallets-input" id="335-num-pallets" name="Polycom_soundPoint_IP_335.png"></input></td>
            <td class="price-per-pallet" style="display:none">$<span>314.53</span></td>
            <td class="row-total" style="display:none"><input type="text" class="row-total-input" id="335-row-total" disabled="disabled"></input></td>
        </tr>
        <tr class="even">
            <td class="product-image"><a href="phoneimages/Polycom_VVX_1500.png" title="Polycom VVX 1500" data-lightbox="Polycom_VVX_1500"><img id="product-image" src="phoneimages/Polycom_VVX_1500.png"></a><br><center><a href="pdf/vvx1500_datasheet.pdf" target="_new">View PDF</a></center></td>
            <td class="product-title"><p><b>Polycom VVX 1500</b></p><p>The VVX 1500 is an ideal all-in-one productivity tool for todays busy executives and professionals, whether they are in office, retail, professional services, or healthcare environments.</p></td>
            <td class="num-pallets"><input type="text" class="num-pallets-input" id="1500-num-pallets" name="Polycom_VVX_1500"></input></td>
            <td class="price-per-pallet" style="display:none">$<span>944</span></td>
            <td class="row-total" style="display:none"><input type="text" class="row-total-input" id="1500-row-total" disabled="disabled"></input></td>
        </tr>
        <tr class="odd">
            <td class="product-image"><a href="phoneimages/Aastra_9143i.png" title="Aastra 9143" data-lightbox="Aastra_9143i"><img id="product-image" src="phoneimages/Aastra_9143i.png"></a><br><center><a href="pdf/aastra_9143i_datasheet.pdf" target="_new">View PDF</a></center></td>
            <td class="product-title"><p><b>Aastra 9143i</b></p><p>Our standard basic phone. The 9143i is ideally suited as an everyday desk phone for moderate telephone users.</p></td>
            <td class="num-pallets"><input type="text" class="num-pallets-input" id="9143i-num-pallets" name="Aastra_9143i"></input></td>
            <td class="times" style="display:none">X</td>
            <td class="price-per-pallet" style="display:none">$<span>294.76</span></td>
            <td class="equals" style="display:none">=</td>
            <td class="row-total" style="display:none"><input type="text" class="row-total-input" id="9143i-row-total" disabled="disabled"></input></td>
        </tr>
        <tr class="even">
            <td class="product-image"><a href="phoneimages/Polycom_SoundStation_Phone_IP_6000.png" title="Polycom SoundStation Phone IP 6000" data-lightbox="Polycom_SoundStation_Phone_IP_6000"><img id="product-image" src="phoneimages/Polycom_SoundStation_Phone_IP_6000.png"></a><br><center><a href="pdf/soundstation_ip6000_datasheet.pdf" target="_new">View PDF</a></center></td>
            <td class="product-title"><p><b>Polycom SoundStation Phone IP 6000</b></p><p>The SoundStation IP 6000 is an advanced IP conference phone that delivers superior performance for small to midsize conference rooms.</p></td>
            <td class="num-pallets"><input type="text" class="num-pallets-input" id="6000-num-pallets" name="Polycom_SoundStation_Phone_IP_6000"></input></td>
            <td class="price-per-pallet" style="display:none">$<span>826.30</span></td>
            <td class="row-total" style="display:none"><input type="text" class="row-total-input" id="6000-row-total" disabled="disabled"></input></td>
        </tr>
        <tr class="odd">
            <td class="product-image"><a href="phoneimages/Polycom_SoundPoint_IP_650_Expansion_Module.png" title="Polycom SoundPoint Backlit IP 650 Expansion Module" data-lightbox="Polycom_SoundPoint_IP_650_Expansion_Module"><img id="product-image" src="phoneimages/Polycom_SoundPoint_IP_650_Expansion_Module.png"></a><br><center><a href="pdf/soundpoint_ip650_expansion_module_datasheet.pdf" target="_new">View PDF</a></center></td>
            <td class="product-title"><p><b>Polycom SoundPoint Backlit IP 650 Expansion Module</b></p><p>The SoundPoint IP Backlit Expansion Module boosts telephone attendant productivity with enhanced user interface and advanced call handling capabilities.</p></td>
            <td class="num-pallets"><input type="text" class="num-pallets-input" id="650-expansion-num-pallets" name="Polycom_SoundPoint_IP_650_Expansion_Module"></input></td>
            <td class="price-per-pallet" style="display:none">$<span>374.95</span></td>
            <td class="row-total" style="display:none"><input type="text" class="row-total-input" id="650-expansion-row-total" disabled="disabled"></input></td>
        </tr>
        <tr class="even">
            <td class="product-image"><a href="phoneimages/Panasonic_KX-TGP500_Cordless_Phone.png" title="Panasonic KX-TGP500 Cordless Phone" data-lightbox="Panasonic_KX-TGP500_Cordless_Phone"><img id="product-image" src="phoneimages/Panasonic_KX-TGP500_Cordless_Phone.png"></a></td>
            <td class="product-title"><p><b>Panasonic KX-TGP500 Cordless Phone</b></p></td>
            <td class="num-pallets"><input type="text" class="num-pallets-input" id="tgp500-num-pallets" name="Panasonic_KX-TGP500_Cordless_Phone"></input></td>
            <td class="price-per-pallet" style="display:none">$<span>250</span></td>
            <td class="row-total" style="display:none"><input type="text" class="row-total-input" id="tgp500-row-total" disabled="disabled"></input></td>
        </tr>
        <!-- <tr>
             <th class="thfiller" width="200px"></th>
             <th class="thname">Server Grade</th>
             <th class="thquantity">Quantity</th>
        </tr>
        <tr class="odd">
            <td class="product-image"><img id="product-image" src="phoneimages/Asterisk-Phone-System-Standard.jpg" width="149px" height="200px"></td>
            <td class="product-title"><p><b>Inexpensive Server</b></p><p>Recommended for up to 15 extensions</p></td>
            <td class="num-pallets"><input type="text" class="num-pallets-input" id="tgp500-num-pallets" name="Asterisk-Phone-System-Standard"></input></td>
            <td class="price-per-pallet" style="display:none">$<span>1500</span></td>
            <td class="row-total" style="display:none"><input type="text" class="row-total-input" id="tgp500-row-total" disabled="disabled"></input></td>
        </tr>
        <tr class="even">
            <td class="product-image"><img id="product-image" src="phoneimages/2941-1.jpg" width="149px" height="200px"></td>
            <td class="product-title"><p><b>Standard Server</b></p><p>Recommended for 5 to 25 extensions</p></td>
            <td class="num-pallets"><input type="text" class="num-pallets-input" id="tgp500-num-pallets" name="2941-1"></input></td>
            <td class="price-per-pallet" style="display:none">$<span>1750</span></td>
            <td class="row-total" style="display:none"><input type="text" class="row-total-input" id="tgp500-row-total" disabled="disabled"></input></td>
        </tr>
        <tr class="odd">
            <td class="product-image"><img id="product-image" src="phoneimages/Asterisk-Phone-System-Rack-Mount.jpg"></td>
            <td class="product-title"><p><b>Standard Server Rack Mount</b></p><p>Recommended for 5 to 25 extensions</p></td>
            <td class="num-pallets"><input type="text" class="num-pallets-input" id="tgp500-num-pallets" name="Asterisk-Phone-System-Rack-Mount"></input></td>
            <td class="price-per-pallet" style="display:none">$<span>1750</span></td>
            <td class="row-total" style="display:none"><input type="text" class="row-total-input" id="tgp500-row-total" disabled="disabled"></input></td>
        </tr>
        <tr class="even">
            <td class="product-image"><img id="product-image" src="phoneimages/dell_poweredge_t605.png" width="149px" height="200px"></td>
            <td class="product-title"><p><b>Enterprise Server</b></p><p>Recommended for 25 or more extensions</p></td>
            <td class="num-pallets"><input type="text" class="num-pallets-input" id="tgp500-num-pallets" name="dell_poweredge_t605"></input></td>
            <td class="price-per-pallet" style="display:none">$<span>3943</span></td>
            <td class="row-total" style="display:none"><input type="text" class="row-total-input" id="tgp500-row-total" disabled="disabled"></input></td>
        </tr>
        <tr class="odd">
            <td class="product-image"><img id="product-image" src="phoneimages/dell_poweredge_r200.png"></td>
            <td class="product-title"><p><b>Enterprise Server Rack Mount</b></p><p>Recommended for 25 or more extensions</p></td>
            <td class="num-pallets"><input type="text" class="num-pallets-input" id="tgp500-num-pallets" name="dell_poweredge_r200t"></input></td>
            <td class="price-per-pallet" style="display:none">$<span>4943</span></td>
            <td class="row-total" style="display:none"><input type="text" class="row-total-input" id="tgp500-row-total" disabled="disabled"></input></td>
        </tr> -->

        <tr style="display:none">
            <td colspan="6" style="text-align: right;"><br>
                <input type="text" class="total-box" value="$0" id="product-subtotal" disabled="disabled" name="order-subtotal"></input>
            </td>
        </tr>
    </table>

    <hr width="100%">

    <div class="clear"></div>

    <table width="100%">
    <tr>
    <td width="175px">
    <img src="phoneimages/Asterisk-Phone-System-Rack-Mount.jpg">
    </td>
    <td>
    <b>Which Server Grade would you like?</b><br><br>

      <input class="server-radio" name="server-radio" type="radio" value="1600"> Standard Server - <i>For offices up to 75 extensions</i></input><br>
      <input class="server-radio" name="server-radio" type="radio" value="1800"> Standard Server - <i>Rack Mount</i></input><br>
      <input class="server-radio" name="server-radio" type="radio" value="3793"> Enterprise Server - <i>For office over 75 extensions</i></input><br>
      <input class="server-radio" name="server-radio" type="radio" value="4793"> Enterprise Server - <i>Rack Mount</i></input><br>
      <input class="server-radio" name="server-radio" type="radio" value="1350"> Refurbished Server - <i>For offices with 10 or fewer extensions</i></input>
      <input style="display:none" class="server-radio" name="server-radio" type="radio" checked="checked" value="0"> None</input>
    </td>
    <td rowspan="2">
    <div style="text-align: right;">
        <span><b>Estimate:</b><br></span> 
        <input type="text" class="total-box" value="$0" id="order-total" disabled="disabled" name="order-total"></input>
            <!-- <br><br>
            <div style="float: right;">
            <p><b>Your Name:</b><input type="text" name="name" size="50"></p>
            <p><b>Your Email:</b><input type="text" name="email"></p>
            <p><b>Your Phone:</b><input type="text" name="phone"></p>
            <input type="submit" value="Submit Quote" class="submit-order" id="submit-order" name="submit" />
            </div> -->
    </div>
    </td>        
    </tr>
    <tr>
    <td colspan="2">
    <b>How will your phone system interface with the phone company?</b><br><br>

      <input class="equipment-radio" name="equipment-radio" type="radio" value="0" checked="checked" > SIP - <i>Digital, highest quality audio. Requires Business Grade VoIP carrier (Eventis, Popp, Integra, CenturyLink, XO, etc.)</i></input><br>
      <input class="equipment-radio" name="equipment-radio" type="radio" value="883.57"> PRI - <i>Most common method of interfacing with T1 carrier (CenturyLink, Comcast)</i></input><br>
      <input class="equipment-radio" name="equipment-radio" type="radio" value="758.82"> Analog (4 Lines)</input><br>
      <input class="equipment-radio" name="equipment-radio" type="radio" value="1009.72"> Analog (8 Lines)</input><br>
      <input class="equipment-radio" name="equipment-radio" type="radio" value="1747.75"> Analog (24 Lines)</input><br>
      <input class="equipment-radio" name="equipment-radio" type="radio" value="1000"> Dont Know</input>


    </td>
    </tr>
    </table>

这是我的JS:

// UTILITY FUNCTIONS 

function IsNumeric(n) {
    return !isNaN(n);
} 

function CleanNumber(value) {

    // Assumes string input, removes all commas, dollar signs, and spaces      
    newValue = value.replace(",","");
    newValue = newValue.replace("$","");
    newValue = newValue.replace(/ /g,'');
    return newValue;

}

function CommaFormatted(amount) {

    var delimiter = ","; 
    var i = parseInt(amount);

    if(isNaN(i)) { return ''; }

i = Math.abs(i);

var minus = '';
if (i < 0) { minus = '-'; }

var n = new String(i);
var a = [];

while(n.length > 3)
{
    var nn = n.substr(n.length-3);
    a.unshift(nn);
    n = n.substr(0,n.length-3);
}

if (n.length > 0) { a.unshift(n); }

n = a.join(delimiter);

amount = "$" + minus + n;

return amount;

}


// ORDER FORM UTILITY FUNCTIONS

function applyName(klass, numPallets) {

    var toAdd = $("td." + klass).text();

    var actualClass = $("td." + klass).attr("rel");

    $("input." + actualClass).attr("value", numPallets + " pallets");

}

function removeName(klass) {

    var actualClass = $("td." + klass).attr("rel");

    $("input." + actualClass).attr("value", "");

}

function calcTotalPallets() {

    var totalPallets = 0;

    $(".num-pallets-input").each(function() {

        var thisValue = parseInt($(this).val());

        if ( (IsNumeric(thisValue)) &&  (thisValue != '') ) {
        totalPallets += parseInt(thisValue);
        };

    });

    $("#total-pallets-input").val(totalPallets);

}

function calcProdSubTotal() {

    var prodSubTotal = 0;

    $(".row-total-input").each(function() {

        var valString = $(this).val() || 0;

        prodSubTotal += parseInt(valString);

    });

    $("#product-subtotal").val(CommaFormatted(prodSubTotal));

}

function calcShippingTotal() {

    var totalPallets = $("#total-pallets-input").val() || 0;
    var shippingRate = $("#shipping-rate").text() || 0;
    var shippingTotal = totalPallets * shippingRate;

    $("#shipping-subtotal").val(CommaFormatted(shippingTotal));

}

function calcOrderTotal() {

    var orderTotal = 0;

    var productSubtotal = $("#product-subtotal").val() || 0;
    var serverPrice = $('.server-radio:checked').val() || 0;
    var equipmentPrice = $('.equipment-radio:checked').val() || 0;
    var underTotal = $("#under-box").val() || 0;

    var orderTotal = parseInt(CleanNumber(productSubtotal)) + parseInt(CleanNumber(serverPrice)) + parseInt(CleanNumber(equipmentPrice));    

    $("#order-total").val(CommaFormatted(orderTotal));

    $("#fc-price").attr("value", orderTotal);

}

// DOM READY
$(function() {

    var inc = 1;

    $(".product-title").each(function() {

        $(this).addClass("prod-" + inc).attr("rel", "prod-" + inc);

        var prodTitle = $(this).text();

        $("#foxycart-order-form").append("<input type='hidden' name='" + prodTitle + "' value='' class='prod-" + inc + "' />");

        inc++;

    });

    // Reset form on page load, optional
    $("#order-table input[type=text]:not('#product-subtotal')").val("");
    $("#product-subtotal").val("$0");
    $("#shipping-subtotal").val("$0");
    $("#fc-price").val("$0");
    $("#order-total").val("$0");
    $("#total-pallets-input").val("0");

    // "The Math" is performed pretty much whenever anything happens in the quanity inputs
    $('.num-pallets-input, .server-radio, .equipment-radio').bind("focus blur change keyup", function(){

        // Caching the selector for efficiency 
        var $el = $(this);

        // Grab the new quantity the user entered
        var numPallets = CleanNumber($el.val());

        // Find the pricing
        var multiplier = $el
            .parent().parent()
            .find("td.price-per-pallet span")
            .text();

        // If the quantity is empty, reset everything back to empty
        if ( (numPallets == '') || (numPallets == 0) ) {

            $el
                .removeClass("warning")
                .parent().parent()
                .find("td.row-total input")
                .val("");

            var titleClass = $el.parent().parent().find("td.product-title").attr("rel");

            removeName(titleClass);

        // If the quantity is valid, calculate the row total
        } else if ( (IsNumeric(numPallets)) && (numPallets != '') ) {

            var rowTotal = numPallets * multiplier;

            $el
                .removeClass("warning")
                .parent().parent()
                .find("td.row-total input")
                .val(rowTotal);

            var titleClass = $el.parent().parent().find("td.product-title").attr("rel");

            applyName(titleClass, numPallets);

        // If the quantity is invalid, let the user know with UI change                                    
        } else {

            $el
                .addClass("warning")
                .parent().parent()
                .find("td.row-total input")
                .val("");

            var titleClass = $el.parent().parent().find("td.product-title").attr("rel");

            removeName(titleClass);

        };

        // Calcuate the overal totals
        calcProdSubTotal();
        calcTotalPallets();
        calcShippingTotal();
        calcOrderTotal();

    });

});

1 个答案:

答案 0 :(得分:0)

我通常使用此函数将逗号每3位数字放置一次:

    function parseThousand(str){
        str=str.toString();
        return str.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");        
    }

    console.log(parseThousand(parseFloat("1025.9233").toFixed(2)))

确保您的号码有2个或更少的小数位,由toFixed(2)

处理

所以在你的代码中:

function parseThousand(str){
    str=str.toString();
    return str.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");        
}


function CommaFormatted(amount) {

    var i = parseFloat(amount);

    if(isNaN(i)) { return ''; }


    var minus = '';
    if (i < 0) { minus = '-'; }

    var n = parseThousand(i.toFixed(2));

    amount = "$" + minus + n;

    return amount;

}