JavaScript：提交表单前移除数字输入框中的逗号-html教程-PHP中文网

JavaScript：提交表单前移除数字输入框中的逗号

花韻仙語

发布： 2025-10-28 13:45:01

原创

360人浏览过

javascript：提交表单前移除数字输入框中的逗号

本文旨在解决JavaScript表单提交时，由于数字输入框中存在逗号分隔符而导致计算错误的问题。我们将通过简单的代码修改，实现在用户输入时保留逗号，但在提交前自动移除逗号，确保后端能够正确解析数值，从而避免计算错误。

在Web开发中，为了提升用户体验，我们经常需要在数字输入框中添加千位分隔符（逗号）。然而，在提交表单进行计算时，这些逗号会干扰JavaScript的数值解析，导致计算结果出错。本教程将介绍如何在使用 JavaScript 格式化数字输入框的同时，确保在表单提交前移除逗号，从而保证计算的准确性。

问题分析

用户希望在贷款计算器中，输入金额时自动添加逗号作为千位分隔符，方便阅读。但是，直接提交带有逗号的金额值会导致 JavaScript 的 parseInt() 或 parseFloat() 函数解析错误。因此，我们需要在提交前将逗号移除。

解决方案

核心思路是在 JavaScript 代码中，于获取输入框的值时，先将逗号移除，再进行后续的计算。以下是具体步骤：

立即学习“Java免费学习笔记（深入）”；

获取输入框的值： 使用 document.getElementById() 或 jQuery 的 $("#id").val() 获取输入框的值。
移除逗号： 使用 replace(/,/g, '') 方法将字符串中的所有逗号替换为空字符串。 /,/g 是一个正则表达式，g 表示全局匹配，即替换所有匹配到的逗号。
转换为数值类型： 使用 parseInt() 或 parseFloat() 将处理后的字符串转换为数值类型，以便进行计算。或者使用一元加号 + 运算符，它也可以将字符串转换为数字。

代码示例

以下代码展示了如何修改原有的 Calculate2 函数，以移除逗号并进行计算：

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

function Calculate2(event) {
    var years = $("#cal2_txtTenor").val();
    var rate = $("#cal2_txtInterestRate").val();
    // 移除逗号并转换为数值类型
    var pv = +$("#cal2_txtLoan").val().replace(/,/g, '');

    if (CheckForDigit(years) && CheckForDigit(rate) && CheckForDigit(pv)) {
        var ir = (rate / 100) * 100; // For LH, add 1 more
        var installment = CalculatePMT(pv, ir, years);
        $("#cal2_txtInstallment").val(FormatNumberToString(installment));
        $("#cal2_txtMinimumIncome").val(FormatNumberToString(installment ));
    } else
        alert("processing error");
}

登录后复制

在这个示例中，我们使用 + 运算符将移除了逗号的字符串转换为数字。

完整代码

以下是修改后的完整 JavaScript 代码：

$(document).ready(function() {
    $('.project-selector select').change(function() {
        $.ajax({
            url: '/project/get-pattern-list?id=' + $(this).val(),
            type: 'get',
            success: function(response) {
                $('.pattern-selector select').html(response);
                if (response.trim() == "") $('.pattern-selector').hide();
                else $('.pattern-selector').show();
                reload_data();
            }
        });
    });

    $('.pattern-selector select').change(function() {
        reload_data();
    });

    function reload_data() {
        $.ajax({
            url: '/project/get-pattern-info?projectid=' + $('.project-selector select').val() + "&id=" + $('.pattern-selector select').val(),
            type: 'get',
            dataType: 'json',
            success: function(response) {
                if (response.length > 0) {
                    $('.pattern-name').text(response[0].name);
                    $('.pattern-area').text(response[0].total_area);
                    $('.pattern-price').text(parseInt(response[0].price));
                } else {
                    $('.pattern-name').text("-");
                    $('.pattern-area').text("-");
                    $('.pattern-price').text("-");
                }
            }
        });
    }

    function CheckForDigit(checkValue) {
        var valid = true;
        if (isNaN(checkValue))
            valid = false;
        if (checkValue == "")
            valid = false;
        return valid;
    }

    function FormatNumberToString(nStr) {
        nStr += '';
        x = nStr.split('.');
        x1 = x[0];
        x2 = x.length > 1 ? '.' + x[1] : '';
        var rgx = /(\d+)(\d{3})/;
        while (rgx.test(x1)) {
            x1 = x1.replace(rgx, '$1' + ',' + '$2');
        }
        return x1 + x2;
    }

    function CalculatePMT(pv, rate, years) {
        return Math.round(pv * (rate / 100 / 12) / (1 - 1 / Math.pow((1 + rate / 100 / 12), (years * 12))));
    }

    $("#cal2_btnCalculate").click(Calculate2);

    function Calculate2(event) {
        var years = $("#cal2_txtTenor").val();
        var rate = $("#cal2_txtInterestRate").val();
        // 移除逗号并转换为数值类型
        var pv = +$("#cal2_txtLoan").val().replace(/,/g, '');

        if (CheckForDigit(years) && CheckForDigit(rate) && CheckForDigit(pv)) {
            var ir = (rate / 100) * 100;
            var installment = CalculatePMT(pv, ir, years);
            $("#cal2_txtInstallment").val(FormatNumberToString(installment));
            $("#cal2_txtMinimumIncome").val(FormatNumberToString(installment));
        } else
            alert("processing error");
    }
});

var cal2_txtLoan = document.getElementById('cal2_txtLoan');

cal2_txtLoan.addEventListener('keyup', function() {
    var val = this.value;
    val = val.replace(/[^0-9\.]/g, '');

    if (val != "") {
        valArr = val.split('.');
        valArr[0] = (parseInt(valArr[0], 10)).toLocaleString();
        val = valArr.join('.');
    }

    this.value = val;
});

登录后复制

HTML 代码

HTML 代码保持不变，无需修改。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script>
function deleteThousandSeparator(){
  const cal2_txtLoan = document.getElementById('cal2_txtLoan');
  cal2_txtLoan.value = cal2_txtLoan.value.replace('.','')
}
</script>
                    <form onsubmit="return deleteThousandSeparator()">


                        <div class="row mt20">
                            <div class="col-md-3 col-sm-12 col-xs-12">
                            </div>
                            <div>
                                <input id="cal2_txtLoan" class="wpcf7-form-control wpcf7-text form-control investment-class-form"  type="text" placeholder="amount">
                            </div>
                        </div>
                        <div class="row mt20">

                            <div class="col-md-6 col-sm-9 col-xs-9">
                                <input id="cal2_txtTenor" class="wpcf7-form-control wpcf7-text form-control investment-class-form" type="number" placeholder="1-30 years">
                            </div>
                        </div>
                        <div class="row mt20">
                            <div class="col-md-6 col-sm-9 col-xs-9">
                                <input id="cal2_txtInterestRate" class="wpcf7-form-control wpcf7-text form-control investment-class-form" type="number" placeholder="percent (%)">
                            </div>
                        </div>
                        <div class="row mt20">
                            <div class="col-md-offset-3 col-md-6 col-sm-offset-0 col-sm-9 col-xs-offset-0 col-xs-9">
                                <div class="row">
                                    <div class="col-xs-6">
                                        <button type="button" id="cal2_btnCalculate" class="button investment-button">submit</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mt20">
                            <div class="col-md-3 col-sm-12 col-xs-12">
                                <label class="investment-list">Summary of monthly installments</label> <input id="cal2_txtInstallment" class="wpcf7-form-control wpcf7-text form-control investment-class-form" disabled="disabled" type="text"> <span class="investment-list" style="color:red;">* Result is just a guide</span>
                            </div>
                        </div>
                    </form>

登录后复制