#javascript #php #html #forms #contacts
Вопрос:
Я должен решить проблему с контактной формой, и я больше не знаю, куда девать руки.
У меня есть форма в HTML, затем проверка в JS и, наконец, отправка электронной почты на PHP.
Данные формы: Имя, Клиника, Электронная почта, Телефон, Адрес и Подтверждение.
В электронном письме, которое я получаю, данные следующие:
Имя: имя, введенное в форму
Электронная почта: электронная почта, указанная в форме
Клиника: не определена
Телефон: не определен
Адрес: не определен
Значение: не определено
Это код (HTML JS):
// JavaScript Document $(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() "amp;email=" email.val() "amp;subject=" subject.val() "amp;msg=" msg.val() "amp;clinic=" clinic.val() "amp;phone=" phone.val() "amp;address=" address.val() "amp;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('lt;font color="#48af4b"gt;Mail sent Successfully.lt;/fontgt;').delay(3000).fadeOut('slow'); else $('.loading').fadeIn('slow').html('lt;font color="#ff5607"gt;Mail not sent.lt;/fontgt;').delay(3000).fadeOut('slow'); } }); return false; }); $("#reset").on('click', function() { $(".form-control").removeClass("success").removeClass("error"); }); }) lt;div class="row justify-content-center"gt; lt;div class="col-lg-10 col-xl-8"gt; lt;div class="form-holder"gt; lt;form class="row contact-form" method="POST" action="php/contactForm.php" id="contactForm"gt; lt;!-- Form Select --gt; lt;div class="col-md-12 input-subject"gt; lt;p class="p-lg"gt;This question is about: lt;/pgt; lt;spangt;How satisfied are you with the service that Lab offers? lt;/spangt; lt;select class="form-select subject" aria-label="Default select example" name="valutation"gt; lt;optiongt;Very unsatisfiedlt;/optiongt; lt;optiongt;Unsatisfiedlt;/optiongt; lt;optiongt;Satisfiedlt;/optiongt; lt;optiongt;Very satisfiedlt;/optiongt; lt;option selectedgt;I don't have an opinionlt;/optiongt; lt;/selectgt; lt;/divgt; lt;!-- Contact Form Input --gt; lt;div class="col-md-12"gt; lt;p class="p-lg"gt;Your Name: lt;/pgt; lt;spangt;Please enter your Dentist Name: lt;/spangt; lt;input type="text" name="name" class="form-control name" placeholder="Your Name*"gt; lt;/divgt; lt;div class="col-md-12"gt; lt;p class="p-lg"gt;Clinic Name: lt;/pgt; lt;spangt;Please enter your Clinic Name: lt;/spangt; lt;input type="text" name="clinic" class="form-control name" placeholder="Clinic Name*"gt; lt;/divgt; lt;div class="col-md-12"gt; lt;p class="p-lg"gt;Your Email Address: lt;/pgt; lt;spangt;Please carefully check your email address for accuracylt;/spangt; lt;input type="text" name="email" class="form-control email" placeholder="Email Address*"gt; lt;/divgt; lt;div class="col-md-12"gt; lt;p class="p-lg"gt;Phone Number: lt;/pgt; lt;spangt;Please enter your/clinic phone number: lt;/spangt; lt;input type="text" name="phone" class="form-control name" placeholder="Phone Number*"gt; lt;/divgt; lt;div class="col-md-12"gt; lt;p class="p-lg"gt;Address: lt;/pgt; lt;spangt;Please enter Clinic Address: lt;/spangt; lt;input type="text" name="address" class="form-control name" placeholder="Address*"gt; lt;/divgt; lt;!-- Contact Form Button --gt; lt;div class="col-md-12 mt-15 form-btn text-right"gt; lt;button type="submit" class="btn btn-skyblue tra-grey-hover submit"gt;Submit Requestlt;/buttongt; lt;/divgt; lt;!-- Contact Form Message --gt; lt;div class="col-lg-12 contact-form-msg"gt; lt;span class="loading"gt;lt;/spangt; lt;/divgt; lt;/formgt; lt;/divgt; lt;/divgt; lt;/divgt; И это PHP — код:
lt;?php $name = $_REQUEST["name"]; $email = $_REQUEST["email"]; $clinic = $_REQUEST["clinic"]; $phone = $_REQUEST["phone"]; $address = $_REQUEST["address"]; $valutation = $_REQUEST["valutation"]; $to = "myemail@email.com"; if (isset($email) amp;amp; 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." lt;".$email."gt;rn"."Reply-To: ".$email."rn" ; $msg = "From: $namelt;br/gt; Email: $email lt;br/gt; Clinic: $clinic lt;br/gt; Phone: $phone lt;br/gt; Address: $address lt;br/gt; Valutation: $valutation"; $mail = mail($to, $email_subject, $msg, $headers); if ($mail) { echo 'success'; } else { echo 'failed'; } } ?gt; Комментарии:
1.просто используйте Никогда, т. е.:
$(".name");$(".email");и т. Д., В качестве ваших селекторов. Как вы уже знаете$(".name");, всеclass="name"будет указано в вашем документе. То же самое относится и ко всем остальным селекторам. Вместо этого используйте второй аргумент, который позволит сделать вывод о конкретном родителе (ФОРМЕ) в вашем случае:$(".name", this);2. » затем проверка в JS и, наконец, отправка электронной почты на PHP » И проверка на стороне сервера, верно?
Ответ №1:
Ваша проблема-это ваши селекторы. Вы используете только классы name и email для всех ваших входных данных.
lt;input type="text" name="phone" class="form-control name" ...gt;
на самом деле должно быть:
lt;input type="text" name="phone" class="form-control phone" ...gt; и так далее для всех остальных входов. Измените свои селекторы на соответствующие имена классов.
Кроме того, никогда не используйте только i.e. $(".name"); и $(".email"); т. Д. В качестве селекторов. Как вы уже знаете $(".name"); , все class="name" будет указано в вашем документе. То же самое относится и ко всем остальным селекторам. Вместо этого используйте второй аргумент (parentElement), который ограничит поиск только дочерними элементами предоставленного родителя:
var name = $(".name", this); или, скорее, используйте селекторы атрибутов, такие как:
var clinic = $(`[name="clinic"]`, this); ВАЖНОЕ ЗАМЕЧАНИЕ о проверке:
никогда не доверяйте клиенту.
Проверка JS должна использоваться минимально, просто как инструмент UX, помогающий информировать пользователя об основных ошибках/опечатках. Реальная проверка, а также все связанные с ней ответы на ошибки должны обрабатываться на внутренней стороне.
В настоящее время ваш PHP кажется вполне открытым для атак XSS.
Вам не нужен HTML lt;formgt; -код для отправки данных на сервер. Все, что требуется злоумышленнику, — это найти ваш маршрут/путь (обычно отображаемый через атрибут формы action ), взглянуть на имена в источнике и вручную создать HTTP-запрос, а также отправить опасные произвольные данные на ваш сервер. Просто чтобы ты имел в виду.
Комментарии:
1. Ну, очень хорошие моменты, но в целом ему нужно использовать FormData и валидатор jQuery для интерфейса. Бэкэнд также должен быть реорганизован, и должны быть проведены строгие проверки на проникновение. На самом деле для человека, не имеющего опыта, предстоит проделать большую работу.
2. Спасибо за исправление, я решил его, используя другой $ (
[name =" clinic "], это); Но в любом случае это простая форма, доступная по qr-коду только для партнерских клиентов, поэтому она такая редкая. Но я также признаю, что не смог бы сделать лучше, чем это. У вас есть статья/руководство, которому следует следовать для повышения безопасности?