如何用导航栏按钮提交下拉动态生成的表单？提交失败求助

核心问题分析 #

你的导航栏提交按钮无响应，主要有三个原因：

1. 表单标签存在重复id（form和product_form），HTML元素id必须唯一，导致按钮的form属性无法正确关联表单
2. 子表单的输入框带有required属性，切换类型后未显示的输入框仍然会触发浏览器表单验证，阻止提交
3. PHP代码仅处理了DVD类型的插入逻辑，其他产品类型无法保存数据

分步修复 #

1. 修复表单重复id问题 #

修改表单标签，删除重复的id，保留唯一idproduct_form，同时更新导航栏按钮的form属性：

<!-- 原表单标签 -->
<form id="form" class="form-col" id="product_form" enctype="multipart/form-data" method="post" action="<?php echo $_SERVER["PHP_SELF"]; ?>">

<!-- 修改后 -->
<form id="product_form" class="form-col" enctype="multipart/form-data" method="post" action="<?php echo $_SERVER["PHP_SELF"]; ?>">

<!-- 导航栏按钮修改 -->
<button class="btn btn-primary m-1" type="submit" name="add_product" form="product_form">Add Product</button>

2. 动态处理表单必填验证 #

将子表单输入框的required和title属性改为自定义属性，在切换产品类型时动态添加/移除验证规则：

修改子表单输入框示例（以DVD为例）：

<!-- 原输入框 -->
<input type="text" class="form-control" id="p_size" name="p_size" method="post" placeholder="Size in (MB)" required title="Please enter the Size (MB) of your product.">

<!-- 修改后 -->
<input type="text" class="form-control" id="p_size" name="p_size" placeholder="Size in (MB)" data-required="true" data-title="Please enter the Size (MB) of your product.">

（Furniture和Book的输入框做同样修改，将required改为data-required，title改为data-title）

更新JavaScript切换逻辑：

function showForm(formId) {
    document.getElementById(formId).style.display = "block";
}

function hideForm(formId) {
    document.getElementById(formId).style.display = "none";
}

function handleDropdownChange(event) {
    let formId = event.target.value;

    let formElements = document.querySelectorAll(".form");
    formElements.forEach(element => {
        hideForm(element.id);
        // 隐藏子表单时移除所有输入框的验证属性
        const inputs = element.querySelectorAll('input');
        inputs.forEach(input => {
            input.removeAttribute('required');
            input.removeAttribute('title');
        });
    });

    showForm(formId);
    // 显示子表单时添加验证属性
    const visibleInputs = document.getElementById(formId).querySelectorAll('input');
    visibleInputs.forEach(input => {
        if(input.hasAttribute('data-required')) {
            input.setAttribute('required', '');
            input.setAttribute('title', input.getAttribute('data-title'));
        }
    });
}

3. 完善PHP多类型插入逻辑 #

根据选择的产品类型，动态处理不同的字段和数据表：

<?php
if (isset($_POST['add_product']))
{
    include('./database.php');
    echo "<script>console.log('add button clicked');</script>";

    $Sku = isset($_POST['product_sku']) ? $_POST['product_sku'] : "";
    $Name = isset($_POST['product_name']) ? $_POST['product_name'] : "";
    $Price = isset($_POST['product_price']) ? $_POST['product_price'] : "";
    $productType = isset($_POST['productType']) ? $_POST['productType'] : "";

    $success = false;
    $stmt = null;

    // 根据产品类型处理插入逻辑
    switch($productType) {
        case 'dvd':
            $Size = isset($_POST['p_size']) ? $_POST['p_size'] : "";
            $sql = "INSERT INTO `pdvd`(`product_sku`, `product_name`, `product_price`,`p_size`) VALUES (?, ?, ?, ?)";
            $stmt = $conn->prepare($sql);
            $stmt->bind_param('ssss', $Sku, $Name, $Price, $Size);
            $success = $stmt->execute();
            break;
        case 'furniture':
            $length = isset($_POST['p_length']) ? $_POST['p_length'] : "";
            $width = isset($_POST['p_width']) ? $_POST['p_width'] : "";
            $height = isset($_POST['p_height']) ? $_POST['p_height'] : "";
            // 请确保pfurniture表存在且字段匹配
            $sql = "INSERT INTO `pfurniture`(`product_sku`, `product_name`, `product_price`,`p_length`, `p_width`, `p_height`) VALUES (?, ?, ?, ?, ?, ?)";
            $stmt = $conn->prepare($sql);
            $stmt->bind_param('ssssss', $Sku, $Name, $Price, $length, $width, $height);
            $success = $stmt->execute();
            break;
        case 'book':
            $weight = isset($_POST['p_weight']) ? $_POST['p_weight'] : "";
            // 请确保pbook表存在且字段匹配
            $sql = "INSERT INTO `pbook`(`product_sku`, `product_name`, `product_price`,`p_weight`) VALUES (?, ?, ?, ?)";
            $stmt = $conn->prepare($sql);
            $stmt->bind_param('ssss', $Sku, $Name, $Price, $weight);
            $success = $stmt->execute();
            break;
        default:
            echo "Please select a valid product type.";
            exit;
    }

    // 验证插入结果
    if ($success && $stmt->affected_rows === 1)
    {
        echo 'Data was successfully inserted into the database.';
        echo "<br>SKU: $Sku";
        echo "<br>Name: $Name";
        echo "<br>Price: $Price";
        if($productType === 'dvd') echo "<br>Size: $Size MB";
        elseif($productType === 'furniture') echo "<br>Dimensions: $length x $width x $height CM";
        elseif($productType === 'book') echo "<br>Weight: $weight KG";
    } else {
        echo 'Failed to insert data into the database.';
    }
}
?>

额外注意事项 #

• 确保你的数据库中存在pfurniture和pbook表，或者调整代码适配现有表结构
• 可以在表单提交前添加前端验证，提示用户选择产品类型
• 输入框的method="post"是无效属性，已全部删除

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