带条件显示/隐藏必填表单的数据库存储问题求助

嘿，我帮你分析了代码，找到了几个导致3星评分时存储失败的关键问题，咱们一步步来修复：

问题1：HTML重复ID导致DOM操作混乱 #

你的代码里，表单容器<div>和内部的<textarea>都用了id="masukan"——这是HTML的大忌，ID必须唯一！浏览器识别重复ID时只会优先处理第一个元素，这会导致JS无法正确控制表单的显示/隐藏，甚至可能让表单字段的值无法正常提交到后端。

修复方案： #

修改HTML，给容器和textarea分配不同的ID：

<!-- 修改前 -->
<div id="masukan"> 
  <label>Masukan Untuk Kami </label> 
  <textarea name="masukan" id="masukan" class="form-control" placeholder="Kritik Dan Saran Membangun Anda" required=""></textarea>
</div>

<!-- 修改后 -->
<div id="masukan-container">
  <label>Masukan Untuk Kami </label>
  <textarea name="masukan" id="masukan-text" class="form-control" placeholder="Kritik Dan Saran Membangun Anda" required=""></textarea>
</div>

更新对应的JS代码，确保操作正确的元素，同时在评分>3时移除textarea的required属性（避免用户无法提交）：

$('input[type=radio][name=rating]').change(function() {
  const ratingValue = parseFloat($(this).val());
  if (ratingValue <= 3) {
    $('#masukan-container').show();
    $('#masukan-text').attr('required', true); // 恢复必填属性
  } else {
    $('#masukan-container').hide();
    $('#masukan-text').removeAttr('required'); // 移除必填属性
    $('#masukan-text').val(''); // 清空内容，避免提交空字符串
  }
});

问题2：后端PDO代码写法错误 #

你的proses.php里的PDO用法完全错误：直接把变量拼接到SQL语句中，不仅存在SQL注入风险，还可能因为用户输入的特殊字符（比如引号）导致SQL语法错误——这就是3星评分时存储失败的核心原因。另外，execute($_POST)的用法也不符合PDO的规范。

修复方案： #

改用PDO占位符绑定参数的正确写法，同时优化字段校验逻辑：

<?php
include "page/koneksi.php";
try {
    // 校验必填字段（masukan在评分>3时可选）
    $requiredFields = ['tgl_lahir', 'pekerjaan', 'rating', 'email_member'];
    foreach ($requiredFields as $field) {
        if (!isset($_POST[$field]) || trim($_POST[$field]) === '') {
            throw new Exception("Field '$field' tidak boleh kosong");
        }
    }

    // 处理可选的masukan字段
    $masukan = isset($_POST['masukan']) ? trim($_POST['masukan']) : '';
    $tgl_lahir = $_POST["tgl_lahir"];
    $pekerjaan = $_POST["pekerjaan"];
    $rating = $_POST["rating"];
    $email_member = $_POST["email_member"];

    // 使用PDO占位符编写SQL，避免注入和语法错误
    $query = $db_con->prepare("INSERT INTO tb_voting (tgl_lahir, pekerjaan, kepuasan, masukan, email_member) 
                              VALUES (:tgl_lahir, :pekerjaan, :kepuasan, :masukan, :email_member)");
    
    // 绑定参数到占位符
    $query->bindParam(':tgl_lahir', $tgl_lahir);
    $query->bindParam(':pekerjaan', $pekerjaan);
    $query->bindParam(':kepuasan', $rating);
    $query->bindParam(':masukan', $masukan);
    $query->bindParam(':email_member', $email_member);

    // 执行SQL
    $query->execute();
    echo "Data telah disimpan";
} catch(PDOException $e) {
    echo "Error! gagal menyimpan: " . $e->getMessage();
} catch(Exception $e) {
    echo "Error: " . $e->getMessage();
}
?>

问题3：前端AJAX提交URL不匹配 #

你的前端AJAX代码里写的url:"insert.php"，但后端处理脚本是proses.php，这会导致请求找不到处理文件，必须保持一致：

// 修改AJAX的url为正确的后端脚本名
$.ajax({
    url:"proses.php", // 或者把后端文件改名为insert.php
    // ... 其他代码
});

额外优化：前端表单提交前校验 #

在提交表单时，增加对评分≤3时masukan字段的校验，确保用户填写内容：

$('#insert_form').on("submit", function(event){
    event.preventDefault();
    let isValid = true;

    if($('#tgl_lahir').val() === "") {
        alert("Tanggal Lahir harus di isi");
        isValid = false;
    } else if($('#pekerjaan').val() === '') {
        alert("Pekerjaan harus di isi");
        isValid = false;
    }

    // 检查评分≤3时masukan是否填写
    const selectedRating = parseFloat($('input[type=radio][name=rating]:checked').val());
    if (selectedRating <= 3 && $('#masukan-text').val().trim() === '') {
        alert("Masukan harus di isi");
        isValid = false;
    }

    if (isValid) {
        $.ajax({
            url:"proses.php",
            method:"POST",
            data:$('#insert_form').serialize(),
            beforeSend:function(){
                $('#insert').val("Inserting");
            },
            success:function(data){
                $('#insert_form')[0].reset();
                $('#add_data_Modal').modal('hide');
                $('#employee_table').html(data);
            },
            error:function(){
                alert("Terjadi kesalahan saat mengirim data");
                $('#insert').val("Insert");
            }
        });
    }
});

做完这些修改后，3星评分时的存储问题应该就能解决了，同时代码的安全性和健壮性也得到了提升。

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