JavaScript动态表单提交异常排查：下拉联动与按钮触发问题

问题概述 #

开发了一个下拉联动的动态表单：

• 选择下拉菜单的「roll」选项时，显示「Click to start inputting」按钮，点击可新增Roll Weight输入行
• 选择「packingLeda」选项时，该按钮隐藏

需求：实现浮点数输入验证，提交时收集所有输入字段数据
当前问题：点击Submit按钮后页面内容全部消失，表单处理失效

问题根源分析 #

1. 表单action属性为空，提交时会刷新当前页面导致内容清空，未阻止默认提交行为
2. 重复绑定#itemname的change事件，导致逻辑冲突
3. 验证函数错误：直接获取kgArray的value，无法处理动态生成的数组输入框
4. 删除按钮使用重复id，违反HTML唯一id规则
5. 非roll选项切换时，删除行的选择器错误（未加.选择class）
6. 未实现浮点数输入验证逻辑

修复后的完整代码 #

HTML部分 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-body">
    <form action="" method="post" name="addtoInventory" onsubmit="return validateForm(event)">
        <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    <label for="item-name" class="form-control-label">Item name</label>
                    <small class="text-danger"></small>
                    <select class="form-select" name="itemname" id="itemname">
                        <option value=""></option>
                        <option value="roll">Roll</option>
                        <option value="PackingLeda">PackingLeda</option>
                    </select>
                </div>
            </div>
            <div class="col-md-6 show">
                <div class="form-group">
                    <label for="item-price" class="form-control-label">Item Price</label>
                    <small class="text-danger"></small>
                    <input class="form-control" name="itemprice" type="text" value="" placeholder="How much did it cost?">
                </div>
            </div>
            <div class="col-md-6 show">
                <div class="form-group">
                    <label for="item-quantity" class="form-control-label">Item Quantity</label>
                    <small class="text-danger"></small>
                    <input class="form-control" name="itemquantity" type="text" value="" placeholder="How many did you bought?">
                </div>
            </div>
            <div class="col-md-12 show">
                <div class="form-group">
                    <label for="purchased-from" class="form-control-label">Purchased From</label>
                    <small class="text-danger"></small>
                    <input class="form-control" name="purchasedfrom" type="text" value="" placeholder="Where did you buy it from?">
                </div>
            </div>
            <div class="col-md-12 show">
                <div class="form-group">
                    <label for="about-item" class="form-control-label">About Item</label>
                    <small class="text-danger"></small>
                    <input class="form-control" name="aboutitem" type="text" value="" placeholder="Write briefly about item">
                </div>
            </div>
            <hr class="horizontal dark">
        </div>

        <div class="row" id="new"></div>
        <button class="btn btn-success ms-0" id="add" type="button">Click to start inputting</button>
        <button name="addI" class="btn d-flex btn-success btn-sm ms-auto">Submit</button>
    </form>
</div>

JavaScript部分 #

// 初始化隐藏元素
$(function () {
    $('#add').hide();
    $('.show').hide();
});

// 下拉菜单change事件统一处理
$('#itemname').change(function () {
    var selectedText = $(this).children("option:selected").text().toLowerCase();
    // 控制add按钮显示/隐藏
    if (selectedText === "roll") {
        $('#add').show();
    } else {
        $('#add').hide();
        // 删除所有roll weight行
        $(".yyy").remove();
    }
    // 控制通用输入框显示/隐藏
    if (selectedText === "roll" || selectedText === "packingleda") {
        $('.show').show();
    } else {
        $('.show').hide();
    }
});

// 新增roll weight输入行
$("#add").click(function () {
    const newRowAdd = `
        <div class="col-md-3 yyy">
            <div class="thisTest">
                <div class="form-group">
                    <label for="example-text-input" class="form-control-label">Roll Weight</label>
                    <small class="text-danger"></small>
                    <button class="btn d-flex btn-danger btn-sm delete-row" type="button">Delete</button>
                    <input class="form-control kg-input" name="kgArray[]" type="text" placeholder="type Kg">
                </div>
            </div>
        </div>
    `;
    $('#new').append(newRowAdd);
});

// 删除roll weight行
$("body").on("click", ".delete-row", function () {
    $(this).parents(".thisTest").remove();
});

// 表单验证与处理
function validateForm(event) {
    // 阻止默认提交行为，避免页面刷新
    event.preventDefault();
    
    let isValid = true;
    const formData = new FormData(document.forms["addtoInventory"]);

    // 验证roll weight输入（仅当选择roll选项时）
    if ($('#itemname').val() === "roll") {
        const kgInputs = $(".kg-input");
        kgInputs.each(function(index, input) {
            const value = $(input).val().trim();
            // 验证非空且为浮点数
            if (!value) {
                alert("请删除空的Roll Weight行或填写内容");
                isValid = false;
                return false; // 跳出循环
            }
            if (!/^\d+(\.\d+)?$/.test(value)) {
                alert(`第${index+1}个Roll Weight必须是有效浮点数`);
                isValid = false;
                return false; // 跳出循环
            }
        });
    }

    if (isValid) {
        // 收集并处理表单数据，此处可替换为AJAX提交逻辑
        console.log("表单数据收集成功：");
        for (let [key, value] of formData.entries()) {
            console.log(`${key}: ${value}`);
        }
        // 如需重置表单可执行：document.forms["addtoInventory"].reset();
    }

    return isValid;
}

关键修复说明 #

1. 阻止默认提交：在validateForm中加入event.preventDefault()，避免页面刷新清空内容
2. 合并change事件：将所有下拉菜单的逻辑合并到一个change事件中，避免冲突
3. 修复选择器与id问题：删除按钮改用classdelete-row，删除行选择器修正为.yyy
4. 浮点数验证：使用正则表达式/^\d+(\.\d+)?$/验证输入为有效浮点数
5. 正确收集数组数据：通过FormData自动收集所有kgArray[]的输入值
6. 完善验证逻辑：仅在选择roll选项时验证Roll Weight输入，逐个检查每行内容

内容的提问来源于stack exchange，提问作者navigator