本教程旨在解决联系表单提交后，部分数据在邮件中显示为 “undefined” 的问题。通过分析 HTML、JavaScript 和 PHP 代码，我们将找出问题根源，并提供详细的修改方案，确保表单数据能够正确传递和显示。此外，我们还将讨论前端验证的局限性以及后端数据验证的重要性，以提高表单的安全性。
问题分析
从问题描述来看，尽管用户在表单中填写了 Clinic、Phone、Address 和 Valutation 等字段，但在收到的邮件中，这些字段的值却显示为 “undefined”。 这表明数据在从前端传递到后端的过程中丢失了。 为了解决这个问题，我们需要逐一检查 HTML 结构、JavaScript 代码和 PHP 代码，找出导致数据丢失的原因。
解决方案
经过对代码的分析，发现问题主要出在 HTML 元素的 class 选择器上。 在 HTML 代码中，多个输入框都使用了相同的 class “name”，导致 JavaScript 代码在获取这些输入框的值时出现混乱。
1. 修改 HTML 元素的 Class 选择器
正确的做法是为每个输入框使用唯一的 class 名称，或者使用有意义的 class 名称来区分不同的输入框。 例如，可以将 phone 输入框的 class 修改为 “phone”，address 输入框的 class 修改为 “address”，依此类推。
修改后的 HTML 代码如下所示：
Clinic Name:
Please enter your Clinic Name:Phone Number:
Please enter your/clinic phone number:Address:
Please enter Clinic Address:
2. 修改 JavaScript 代码
在 JavaScript 代码中，需要根据修改后的 class 名称来更新变量的赋值。
$(document).ready(function() { "use strict"; $(".contact-form").submit(function(e) { e.preventDefault(); var name = $(".name"); var email = $(".email"); var clinic = $(".clinic"); var phone = $(".phone"); var address = $(".address"); var valutation = $(".valutation"); var subject = $(".subject"); var msg = $(".message"); var flag = false; if (name.val() == "") { name.closest(".form-control").addClass("error"); name.focus(); flag = false; return false; } else { name.closest(".form-control").removeClass("error").addClass("success"); } if (email.val() == "") { email.closest(".form-control").addClass("error"); email.focus(); flag = false; return false; } else { email.closest(".form-control").removeClass("error").addClass("success"); } var dataString = "name=" + name.val() + "&email=" + email.val() + "&subject=" + subject.val() + "&msg=" + msg.val() + "&clinic=" + clinic.val() + "&phone=" + phone.val() + "&address=" + address.val() + "&valutation=" + valutation.val(); $(".loading").fadeIn("slow").html("Loading..."); $.ajax({ type: "POST", data: dataString, url: "php/contactForm.php", cache: false, success: function(d) { $(".form-control").removeClass("success"); if (d == 'success') // Message Sent? Show the 'Thank You' message and hide the form $('.loading').fadeIn('slow').html('Mail sent Successfully.').delay(3000).fadeOut('slow'); else $('.loading').fadeIn('slow').html('Mail not sent.').delay(3000).fadeOut('slow'); } }); return false; }); $("#reset").on('click', function() { $(".form-control").removeClass("success").removeClass("error"); });})
3. 考虑使用属性选择器
除了使用 class 选择器外，还可以使用属性选择器来获取输入框的值。 属性选择器可以根据 HTML 元素的属性值来选择元素。 例如，可以使用 [name=”clinic”] 来选择 name 属性值为 “clinic” 的输入框。
var clinic = $(`[name="clinic"]`, this);
4. JavaScript 选择器作用域
为了避免选择器选择到不期望的元素，可以限制选择器的作用域。 例如，可以使用 $(“.name”, this) 来选择当前表单中的 class 为 “name” 的元素。
5. PHP 代码检查
PHP 代码负责接收并处理从前端传递过来的数据。 检查 PHP 代码，确保正确接收和使用所有表单字段。 以下是示例 PHP 代码，用于接收和处理表单数据：
<?php$name = $_POST["name"];$email = $_POST["email"];$clinic = $_POST["clinic"];$phone = $_POST["phone"];$address = $_POST["address"];$valutation = $_POST["valutation"];$to = "your_email@example.com";if (isset($email) && isset($name)) { $email_subject = "Request to access to the Price List"; $headers = "MIME-Version: 1.0" . "rn"; $headers .= "Content-type:text/html;charset=iso-8859-1" . "rn"; $headers .= "From: ".$name." rn"."Reply-To: ".$email."rn" ; $msg = "From: $name
Email: $email
Clinic: $clinic
Phone: $phone
Address: $address
Valutation: $valutation"; $mail = mail($to, $email_subject, $msg, $headers); if ($mail) { echo 'success'; } else { echo 'failed'; }}?>
请注意：
使用 $_POST 而不是 $_REQUEST，明确指定从 POST 请求中获取数据。将 $to 变量替换为实际的收件人邮箱地址。
安全性注意事项
1. 后端数据验证
永远不要信任来自客户端的数据。 客户端验证仅仅是一种用户体验工具，用于帮助用户尽早发现错误。 真正的验证应该在后端进行。
2. 防止 XSS 攻击
PHP 代码需要进行安全处理，以防止 XSS 攻击。 可以使用 htmlspecialchars() 函数来转义特殊字符，防止恶意代码注入。
3. 避免直接使用 HTML
虽然 HTML
以上就是解决联系表单中未定义数据的问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1319534.html
微信扫一扫 
支付宝扫一扫 
