Bootstrap模态框表单无法提交，MySQL数据插入失败求助

1. 核心问题：表单标签结构错误 #

你的HTML代码中，表单标签<form>被提前闭合：

<form action="" id="myForm" method="POST"></form>

这导致模态框内的输入框、提交按钮都不在表单范围内，点击提交时浏览器找不到对应表单发起请求，因此完全没有反应。

修正方法 #

删除提前闭合的</form>，将所有表单元素包裹在<form>标签内，正确结构如下：

<div class="modal fade" id="bddModal" tabindex="-1" role="dialog" aria-labelledby="bddModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="bddModalLabel">Ajout donées</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <!-- 表单正确包裹开始 -->
      <form action="" id="myForm" method="POST">
        <div class="modal-body">
            <ul>
                <li>
                    <label for="nom">Nom</label>
                    <input type="text" name="nom" id="nom" maxlength="100">
                    <span>Enter un nom</span>
                </li>
                <li>
                    <label for="categorie">catégorie</label>
                    <select name="categorie" id="cat-select">
                        <option value="1">Fiscalité IS</option>
                        <option value="2">Réorganisations, acquisitions et méthodologie</option>
                        <option value="3">Contrôle et contentieux fiscal</option>
                        <option value="4">Fiscalité patrimoniale</option>
                        <option value="5">Fiscalité Immobilière</option>
                        <option value="6">Introduction à la TVA et droits de douanes</option>
                        <option value="7">Excel</option>
                    </select>
                    <span>Choissisez une catégorie</span>
                </li>
                <li>
                    <label for="url">Url</label>
                    <input type="text" name="url" id="url">
                    <span>Entrer une url</span>
                </li>
                <li>
                    <label for="img">Image</label>
                    <input type="text" name="img" id="img">
                    <span>Enter l'adresse d'une image</span>
                </li>
            </ul>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <input type="submit" name="submit" class="btn btn-success" value="Envoyer">
        </div>
      </form>
      <!-- 表单正确包裹结束 -->
    </div>
  </div>
</div>

额外调整：

• 给输入框添加id属性，与对应label的for属性匹配，提升页面可访问性
• 给提交按钮添加value="Envoyer"，确保按钮显示指定文字

2. PHP代码的潜在问题 #

2.1 消除SQL注入风险 #

直接将$_POST参数拼接到SQL语句中存在严重注入漏洞，需改用预处理语句：

else if(isset($_POST['url'])) {
    $nom = $_POST['nom'];
    $categorie = $_POST['categorie'];
    $url = $_POST['url'];
    $img = $_POST['img'];
    
    // 使用预处理语句避免注入
    $sql = "INSERT INTO bdd_sites (nom, categorie, url, img) VALUES (?, ?, ?, ?)";
    $stmt = mysqli_prepare($conn, $sql);
    mysqli_stmt_bind_param($stmt, "ssss", $nom, $categorie, $url, $img);
    mysqli_stmt_execute($stmt);
    
    // 验证执行结果
    if(mysqli_stmt_affected_rows($stmt) > 0) {
        echo "数据添加成功";
    } else {
        echo "添加失败: " . mysqli_error($conn);
    }
    mysqli_stmt_close($stmt);
}

2.2 优化请求判断逻辑 #

isset($_POST['url'])判断不够严谨，若url为空则逻辑不触发，建议结合请求方法与必填字段检查：

if ($_SERVER['REQUEST_METHOD'] === 'POST'){
    // 检查所有必填字段是否存在
    if(isset($_POST['nom'], $_POST['categorie'], $_POST['url'], $_POST['img'])){
        // 执行插入逻辑
    } else {
        echo "缺少必要的表单字段";
    }
}

3. 验证步骤 #

修正后点击“Envoyer”按钮，浏览器应发起POST请求，可在网络面板查看记录，PHP代码会正常处理数据插入。

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