本文详解在使用 jQuery + AJAX 提交模态框（modal）表单时，如何准确获取 元素的选中值——关键在于 id 和 name 属性必须绑定在 标签上，而非内部的 标签，否则 $('#xxx').val() 将返回 undefined。
本文详解在使用 jquery + ajax 提交模态框（modal）表单时，如何准确获取 `
在 Web 表单开发中，尤其是结合 Bootstrap 模态框与 AJAX 异步提交时，一个常见却容易被忽视的错误是：将 id 或 name 属性错误地写在
✅ 正确的 HTML 结构
请确保 id 和 name 属性位于
<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example" name="TypeCo" id="TypeCo"><option selected disabled>Type de concentrateur</option> <option value="Concentrateur Fixe">Concentrateur Fixe</option> <option value="Concentrateur transportable">Concentrateur transportable</option></select><select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example" name="CapCo" id="CapCo"><option selected disabled>Capacité de concentrateur</option> <option value="5L">5L</option> <option value="7L">7L</option> <option value="10L">10L</option> <option value="15L">15L</option></select>
? 注意：
jQuery 1.12.4下载jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
✅ 正确的 JavaScript / jQuery 提交逻辑
在你的 #save 按钮点击事件中，需统一从
$(document).ready(function() {
$(document).on('click', '#save', function(e) {
e.preventDefault(); // 防止默认提交行为（如有表单包裹）
const fname = $('#fname').val().trim();
const lname = $('#lname').val().trim();
const tel = $('#tel').val().trim();
const email = $('#email').val().trim();
const TypeCo = $('#TypeCo').val(); // ✅ 此时返回选中 option 的 value 值
const CapCo = $('#CapCo').val(); // ✅ 同理
// 简单前端校验（可选）
if (!TypeCo || !CapCo) {
alert("Veuillez sélectionner un type et une capacité de concentrateur.");
return;
}
$.ajax({
url: "insert.php",
type: "POST",
data: {
fname: fname,
lname: lname,
tel: tel,
email: email,
TypeCo: TypeCo, // ✅ 键名与后端 $_POST['TypeCo'] 对应
CapCo: CapCo // ✅ 修正原代码中的语法错误：CapCo = CapCo → CapCo: CapCo
},
dataType: 'json',
success: function(response) {
$('#save').modal('hide');
alert('Données enregistrées avec succès !');
location.reload();
},
error: function(xhr, status, error) {
console.error("Erreur AJAX :", error);
alert("Échec de l'envoi. Vérifiez la console.");
}
});
});
});
⚠️ 常见陷阱与注意事项
- ❌ 错误写法：
- ✅ 正确写法：
- ? 若需监听下拉框实时变化，可单独绑定 change 事件用于调试或联动：
$('#TypeCo').on('change', function() { console.log('TypeCo sélectionné :', $(this).val()); }); - ?️ 后端（如 insert.php）务必对 $_POST['TypeCo'] 和 $_POST['CapCo'] 做非空与白名单校验，防止恶意提交非法值。
掌握这一基础要点，不仅能解决当前的下拉框数据丢失问题，也为后续处理复选框（checkbox）、单选组（radio group）等表单控件打下坚实基础。
