联系表单提交后邮件内诊所、电话等字段显示undefined问题求助

问题根因 #

HTML表单字段的class属性与JS代码中的选择器不匹配，导致JS无法获取对应字段的输入值，传递给后端的参数为undefined。 #

具体错误点 #

• 满意度评价下拉框：class只写了subject，JS中是用$(".valutation")匹配元素，无法选中
• 诊所名称输入框：class错误写为name，无clinic类，无法被JS选中
• 电话输入框：class错误写为name，无phone类，无法被JS选中
• 地址输入框：class错误写为name，无address类，无法被JS选中

修复方案 #

1. 修正HTML代码中对应字段的class属性

<!-- 满意度下拉框补充valutation类 -->
<select class="form-select subject valutation" aria-label="Default select example" name="valutation">

<!-- 诊所名称输入框修改class为clinic -->
<input type="text" name="clinic" class="form-control clinic" placeholder="Clinic Name*">

<!-- 电话输入框修改class为phone -->
<input type="text" name="phone" class="form-control phone" placeholder="Phone Number*">

<!-- 地址输入框修改class为address -->
<input type="text" name="address" class="form-control address" placeholder="Address*">

2. 可选优化：补充前端非空校验

当前JS仅校验了姓名和邮箱两个字段，若其他字段也为必填项，可补充对应非空校验逻辑，避免空值提交。

3. 可选优化：PHP侧增加参数容错处理

避免未传参数时抛出PHP警告，修改参数接收逻辑：

$name = $_REQUEST["name"] ?? '';
$email = $_REQUEST["email"] ?? '';
$clinic = $_REQUEST["clinic"] ?? '';
$phone = $_REQUEST["phone"] ?? '';
$address = $_REQUEST["address"] ?? '';
$valutation = $_REQUEST["valutation"] ?? '';

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