AJAX自动填充专科后表单提交按钮失效问题求助

问题根源分析 #

1. 表单结构错误：原代码在专科选择框后提前闭合了</form>标签，导致UBS、预约日期、班次和提交按钮都不在表单范围内，服务器无法接收这些字段的值。
2. JS阻止默认提交：绑定提交按钮点击事件后调用event.preventDefault()，但未完成AJAX提交的完整逻辑，导致表单既无法默认提交，也没有通过AJAX传递数据。
3. SQL注入风险：直接将用户输入拼接进SQL语句，存在安全隐患。

分步解决方案 #

1. 修复表单结构

移除提前出现的</form>，确保所有表单控件都包裹在<form>标签内：

<div class="container">
<h2>Cadastrar <b>Consultas</b></h2>
<br>
<form action="consultas.php" method="POST">
<div class="form-group">
    <label for="medico">Médico:</label>
    <select class="form-control" id="medico" name="medico">
        <option value="">Selecione</option>
        <?php 
        while ($row = mysqli_fetch_assoc($resultado)) {
            echo "<option value='" . $row["nome"] . "'>" . $row["nome"] . "</option>";
        }
        ?>
    </select>
</div>

<div class="form-group">
  <label for="especialidade">Especialidade:</label>
  <select class="form-control" id="especialidade" name="especialidade"></select>
</div>

<!-- 移除此处错误的</form>标签 -->

  <div class="form-group">
    <label for="ubs">UBS:</label>
    <select class="form-control" id="ubs" name="ubs">
    <option value="">Selecione uma UBS</option>
    <option value="UBS MORUMBI - PASCHOAL ANGOTTI">UBS MORUMBI - PASCHOAL ANGOTTI</option>
    <option value="UBS RIBEIRO – DR. PÉRICLES DA SILVA PEREIRA">UBS RIBEIRO – DR. PÉRICLES DA SILVA PEREIRA</option>
    <option value="UBS REBOUÇAS – DR. NILTON NICOLAU NAUFAL">UBS REBOUÇAS – DR. NILTON NICOLAU NAUFAL</option>
    <option value="UBS JUNQUEIRA – DR. ADALBERTO ARIANO CRESPO">UBS JUNQUEIRA – DR. ADALBERTO ARIANO CRESPO</option>
    <option value="UBS CAIC DR - FRANCISCO MATHIAS ZORMAN">UBS CAIC DR - FRANCISCO MATHIAS ZORMAN</option>
    </select>
  </div>
  
  <div class="form-group">
    <label for="data">Data da consulta:</label>
    <input type="date" class="form-control" id="data" name="data">
  </div>
  
  <div class="form-group">
    <label for="turno">Turno:</label>
    <select class="form-control" id="turno" name="turno">
      <option value="">Selecione um turno</option>
      <option value="Manhã">Manhã</option>
      <option value="Tarde">Tarde</option>
      <option value="Noite">Noite</option>
    </select>
  </div>
  
  <button type="submit" class="btn btn-primary" name="submit" id="submit">Cadastrar Consulta</button>
</form> <!-- 此处为表单正确的闭合位置 -->
</div>

2. 调整JS提交逻辑

如果不需要AJAX提交，直接删除阻止默认行为的代码段：

// 删除以下代码块
// $(document).ready(function() {
//   $('#submit').on('click', function(event) {
//     event.preventDefault();
//     console.log('Botão clicado');
//     var medico = $('#medico').val();
//     var especialidade = $('#especialidade').val();
//     var ubs = $('#ubs').val();
//   });
// });

如果需要保留AJAX提交，完善完整提交逻辑：

$(document).ready(function() {
  $('#submit').on('click', function(event) {
    event.preventDefault();
    
    // 获取所有表单字段值
    var medico = $('#medico').val();
    var especialidade = $('#especialidade').val();
    var ubs = $('#ubs').val();
    var data = $('#data').val();
    var turno = $('#turno').val();

    // 字段非空验证
    if (!medico || !especialidade || !ubs || !data || !turno) {
      alert('Por favor, preencha todos os campos!');
      return;
    }

    // AJAX提交数据
    $.ajax({
      url: 'consultas.php',
      method: 'POST',
      data: {
        submit: true,
        medico: medico,
        especialidade: especialidade,
        ubs: ubs,
        data: data,
        turno: turno
      },
      success: function() {
        alert('Consulta cadastrada com sucesso!');
        // 重置表单
        $('form')[0].reset();
        $('#especialidade').html('');
      },
      error: function() {
        alert('Erro ao cadastrar consulta!');
      }
    });
  });
});

3. 优化PHP代码，防范SQL注入

使用预处理语句替代直接拼接SQL：

<?php
include('../conexao.php');
include('protect.php');

$sql = "SELECT id, nome, especialidade FROM medico";
$resultado = mysqli_query($mysqli, $sql);

if(isset($_POST['submit']))
{
  // 预处理插入语句
  $stmt = $mysqli->prepare("INSERT INTO consulta (medico, especialidade, ubs, data, turno) VALUES (?, ?, ?, ?, ?)");
  $stmt->bind_param("sssss", $_POST['medico'], $_POST['especialidade'], $_POST['ubs'], $_POST['data'], $_POST['turno']);
  
  if ($stmt->execute()) {
    // 可添加成功后的跳转或提示逻辑
    // header("Location: consultas.php?status=success");
  } else {
    echo "Erro: " . $stmt->error;
  }
  
  $stmt->close();
}
?>

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