Ajax request form submit issue

У меня возникли некоторые странные проблемы при попытке отправить форму через ajax. Для $ (form) .on ('submit') это работает, но он перенаправляет скрипт email.php даже с помощью preventDefault(), но я получаю переданные значения и отправляется электронное письмо.Ajax request form submit issue

$ ('# submit'). On ('click') показывает в запросе полезную нагрузку, которую он отправляет, однако электронная почта увольняется, в результате чего нет содержимого, но страница не перезагружается.

$(function(){ 
    var form = document.getElementById('ajax-contact'); 

    // $(form).on('sumbit', function(e){ // This works but redirects to the email processing page. 
    $('#submit').on('click', function(e){ 
     var data = { 
      name: $("input[name='name']").val(), 
      email: $("input[name='email']").val(), 
      message: $("input[name='message']").val() 
     }; 

     $.ajax({ 
      type: "POST", 
      url: "/api/email.php", 
      contentType: "application/json", 
      data: JSON.stringify({ "email": $("#email").val(), "name": $("#name").val(), "message": $("#message").val() }), 
      beforeSend: function(){ 
       $("#submit").attr("value","Processing your request..."); 
      }, 
      success: function(data){ 
       $("#submit").attr("value","Thank you, I will get back to you as soon as possible."); 
      }, 
      error: function(xhr, textStatus){ 
       if(xhr.status === 404) { 
        $('#submit').attr("value","There was an ERROR processing your request"); 
       } 
      } 
     }); 

     e.preventDefault(); 
    }); 
});

Вот сценарий php.

<?php 

if($_SERVER['REQUEST_METHOD'] === 'POST') { 
    echo 'Email Processed'; 
    $recipient = '[email protected]'; 

    $name = $_POST['name']; 
    $email = $_POST['email']; 
    $msg = $_POST['message']; 

    $msg_body = "Name: " . $name . "Email: " . $email . 'Message: ' . $msg; 

    mail($recipient,'Message from: ' . $name , $msg_body); 
} else { 
    return; 
} 

?>

источник

2015-05-31 probie

если в вашем коде формы 'action' атрибут там удалить это. а также 'e.preventDefault()' не существует? –

Обычно 'e.preventDefault()' помещается наверху, но это может не послужить причиной вашей проблемы. Можете ли вы создать скрипку, которая воспроизводит проблему. – PeterKA

Обратите внимание, что ваша обычная подача, вероятно, вызвана опечаткой в обработчике событий, 'sumbit' должен быть' submit'. – jeroen

Вы не посылать ключ - пары значений на сервере, но одной строкой:

data: JSON.stringify({ "email": $("#email").val(), "name": $("#name").val(), "message": $("#message").val() }),

должно быть:

data: { "email": $("#email").val(), "name": $("#name").val(), "message": $("#message").val() },

или:

// you already generated an object with the data 
data: data,

Вы на самом деле может отправить строку, но вы можете необходимо прочитать исходный ввод.

И вы действительно должны поймать отправки формы в случае, если кто не нажимает на кнопку, но использует клавишу ввода вместо:

$(form).on('submit', function(e){ 
      ^^^^^^ small typo here 
    e.preventDefault();

источник

2015-05-31 18:09:59 jeroen

Ajax request form submit issue

ответ

Смежные вопросы