У меня есть html-форма, которая должна отправлять данные в файл php через jquery ajax. код можно увидеть ниже. Проблема, с которой я сталкиваюсь, заключается в том, что при нажатии submit ajax, кажется, не передает данные на php, поскольку console.log под функцией done () возвращает объект $ data, показывающий, что все поля пустые (т.е. возврат сообщений об ошибках, когда поля пустые). Я просто не понимаю, где проблема. Когда я отправляю форму без использования ajax, т.е. отключая весь блок $ ('form'). Submit (…), сообщение об успешном завершении возвращает true. блоки ajax всегда возвращают false
<form id="sds_contact_form" class="sds_form" action="form_submit.php" method="post"> <!-- name --> <div class="sds_input_group sds_half_field"> <label for="sds_sender_name">full name*</label> <input id="sds_sender_name" name="sds_customer" type="text" placeholder="eg John smith" required /> <span id="sds_customername_error" class="sds_error_span"></span> </div> <!-- email address --> <div class="sds_input_group sds_half_field"> <label for="sds_sender_email">email*</label> <input id="sds_sender_email" name="sds_form_email" type="email" placeholder="eg j.smith@example.com" required /> <span id="sds_email_error" class="sds_error_span"></span> </div> <!-- subject --> <div class="sds_input_group"> <label for="sds_email_subject">subject*</label> <input id="sds_email_subject" name="sds_form_subject" type="text" placeholder="eg need an app designed" required /> <span id="sds_subject_error" class="sds_error_span"></span> </div> <!--enquiry --> <div class="sds_input_group"> <label for="sds_sender_enquiry">enquiry*</label> <span id="sds_enquiry_error" class="sds_error_span"></span> <textarea id="sds_sender_enquiry" name="sds_form_enquiry" placeholder="enter details here" rows="15" required></textarea> </div> <!-- submit button --> <button name="sds_submit_enquiry" type="submit" class="sds_form_button sds_button">send</button> </form>
Это код jquery
//form data submission $('form').submit(function(event){ var form_data = { 'customer_name' : $('#sds_sender_name').val(), 'customer_email' : $('#sds_sender_email').val(), 'email_subject': $('#sds_email_subject').val(), 'enquiry': $('#sds_sender_enquiry').val() }; console.log(form_data); $.ajax({ url :'form_submit.php', type:'POST', data:form_data, dataType:'json', }).done(function(data){ console.log(data); }).fail(function(xhr, ajaxOptions, thrownError){ console.log("ERROR:" + xhr.responseText+" - "+thrownError); }); event.preventDefault(); });
Это код PHP в form_submit.php
<?php $data = array(); $errors = array(); //get form data $customer_name = $_POST['sds_customer']; $customer_email = $_POST['sds_form_email']; $email_subject = $_POST['sds_form_subject']; $enquiry = $_POST['sds_form_enquiry']; //validate name if(empty($customer_name)){ $errors['customer_name'] = 'name is required'; } //validate email if(empty($customer_email)){ $errors['customer_email'] = 'email is required'; }else{ if(!filter_var($customer_email,FILTER_VALIDATE_EMAIL)){ $errors['customer_email'] = 'email provided is invalid'; } $customer_email = filter_var($customer_email,FILTER_SANITIZE_EMAIL); } //validate form subject if(empty($email_subject)){ $errors['email_subject'] = 'subject is required'; }else{ $email_subject = filter_var($email_subject,FILTER_SANITIZE_STRING); } //validate form comments if(empty($enquiry)){ $errors['enquiry'] = 'please enter your enquiry'; }else{ $enquiry = filter_var($enquiry,FILTER_SANITIZE_STRING); } if(!empty($errors)){ $data['success'] = false; $data['errors'] = $errors; }else{ $data['success'] = true; $data['message'] = "Your email has been sucessfully sent. Thank you for your enquiry. Exepect a response soon!"; //further data processing here.... } echo json_encode($data);
?>
Ваша проблема связана с именами параметров. В jquery параметр определяется как:
var form_data = { 'customer_name' : $('#sds_sender_name').val(), 'customer_email' : $('#sds_sender_email').val(), 'email_subject': $('#sds_email_subject').val(), 'enquiry': $('#sds_sender_enquiry').val() };
На PHP вы используете префикс sds (как пишите в форме):
//get form data $customer_name = $_POST['sds_customer']; $customer_email = $_POST['sds_form_email']; $email_subject = $_POST['sds_form_subject']; $enquiry = $_POST['sds_form_enquiry'];
Ваши параметры должны соответствовать AJAX, а не форме (как показано ниже).
$customer_name = $_POST['customer_name']; $customer_email = $_POST['customer_email']; $email_subject = $_POST['email_subject']; $enquiry = $_POST['enquiry'];
Или просто используйте сериализованную форму:
$.ajax( data: $("#sds_contact_form").serialize(), /*** others parameters ***/
$("#sds_contact_form").serialize() // returns all the data in your form $.ajax({ type: "POST", url: 'form_submit.php', data: $("#sds_contact_form").serialize(), dataType:'json', success: function(data) { console.log(data); } });
В файле php Unserialize ваши данные
unserialize($data);