Что нужно изменить в ajax, чтобы данные отправлялись?

Question

[Alex_87]

Здравствуйте! Имеется ajax код:

$(document).ready(function () {
    $(document).on('click','#sbm', function(){
       
        var sub = true;    
        if($('#name').val()==""){$('#name').css( "border"," solid 1px red" ); sub=false;}
        if($('#email').val()==""){$('#email').css( "border"," solid 1px red" ); sub=false;}
        if(sub){
            $.ajax({
                type: "POST",
                url: "form.php",
                data: $('#form').serialize()
            }).done(function(data) { //в data вернется ответ сервера, например можно вывести ошибки
                alert('Спасибо');              
                location.reload();
                $('#form').hide();             
            });
        }
        return false;
    });
});

Когда я его убираю, данные на почту из формы нормально передаются, а с этим кодом var_dump($_POST) мне пишет, что массив пустой... Но мне очень нужен этот код. Помогите понять, в чём причина...

Comments

[tyzberd]

для input прописан name? если нет пропишите.

[tyzberd]

и смотрите через console.log($('#form').serialize()); перед отправкой что возвращается. В network смотрите запросы.

[Alex_87]

tyzberd, в смысле? Я же говорю, без ajax, всё работает! Данные на почту отправляются! Проблема здесь!

[Alex_87]

tyzberd, а где в коде, прописать console, покажите пожалуйста. Чтобы не ошибиться///

[tyzberd]

перед var sub = true; напишите.

[Alex_87]

tyzberd, а здесьurl: "form.php",
нужно писать? в form.php код обработчик формы. ... Я почему спрашиваю, поскольку меня перебрасывают после отправки именно на эту страницу... Может, из-за это записи?

[Alex_87]

tyzberd,

[tyzberd]

url должен быть, это ссылка на ваш обработчик.
удалите этот location.reload();
и если у вас показалось спасибо, значит запрос отправился

[Alex_87]

tyzberd, Удалил... скажите пожалуйста, а как у элемента с классом modal класс open, у которого стоит display: block; Подскажите синтаксис. Первый раз с ajax... Пробовал так: $('.modal').removeClass('.open');
но не вышло...

[tyzberd]

как закрыть? модальное окно через плагин сделано? если да, то у них есть методы для скрытия / открытия, если нет то удаляйте класс https://api.jquery.com/removeclass/

[Alex_87]

tyzberd, Удалил, получилось!!! Даже в консоле, после исчезновения формы данные остались. Но почему всё таки нет отправки на почту!? Странно. Что ему ещё не нравиться, что может быть?
Вот код с последними изменениями...

$(document).ready(function () {
    $(document).on('click','#sbm', function(){
       console.log($('#form').serialize());
        var sub = true;    
        if($('#name').val()==""){$('#name').css( "border"," solid 1px red" ); sub=false;}
        if($('#email').val()==""){$('#email').css( "border"," solid 1px red" ); sub=false;}
        if(sub){
            $.ajax({
                type: "POST",
                url: "form.php",
                data: $('#form').serialize()
            }).done(function(data) { //в data вернется ответ сервера, например можно вывести ошибки
                alert('Спасибо');                  
                $('.popupcontact').hide(); 
                $('.modal').removeClass('open');
            });
        }
        return false;
    });
});

[tyzberd]

покажите php

[Alex_87]

tyzberd,

error_reporting(E_ALL);
 $to = '[e-mail]';
                $subject = '';
                $from = '';
                if (isset($_POST['submit'])) {
                    if(!empty($_POST['name'])){$name = strip_tags(trim($_POST['name']));}
                    if(!empty($_POST['email'])){$email = strip_tags(trim($_POST['email']));}
                    if(!empty($_POST['skype'])){$skype = strip_tags(trim($_POST['skype']));}
                    if(!empty($_POST['sms'])){$sms = strip_tags(trim($_POST['sms']));}
                     $message = "Имя пользователя: ".$name."\r\n";
                     $message .= "Почта: ".$email."\r\n";
                     $message .= "Skype: ".$skype."\r\n";
                     $message .= "Сообщение: ".$sms."\r\n";




                        $tema = "=?utf-8?B?".base64_encode($subject)."?=";
                        $headers = "From: $from\r\nReply-to: $from\r\nContent-type:text/plain; charset=utf-8\r\n";
                        mail($to, $tema, $message, $headers);
                 }
var_dump($_POST);

И 2 формы:

<div class="popupcontact">
            <div class="wrapper">
                 <div class="popupcontacttitle" id="about">Оставьте заявку сейчас и получите бесплатную консультацию!</div>
                 <form id="form" method="post" action="form.php" class="popupform">
                     <input type="text" placeholder="Ваше имя" id="name" name="name"  value="<?=$_POST['name'] ?? '' ?>"  />

                     <input type="email" placeholder="Ваша почта" id="email" name="email"  value="<?=$_POST['email'] ?? '' ?>" />

                     <input type="text" placeholder="Ваш Skype"  name="skype" value="<?=$_POST['skype'] ?? '' ?>" />
                     <textarea name="sms" cols="5" rows="10" placeholder="Ваше сообщение" value="<?=$_POST['sms'] ?? '' ?>" ></textarea>

                     <div>
                         <button type="submit" id="sbm" name="submit">Оставьте заявку</button>
                     </div>
                 </form>

              </div>
            </div>

<div class="contact">
            <div class="wrapper">
                 <div class="contact-title" id="about">Оставьте заявку сейчас и получите бесплатную консультацию!</div>
                 <form id="mainform" method="post" action="form.php">
                     <input type="text" placeholder="Ваше имя" id="title" name="name"  value="<?=$_POST['name'] ?? '' ?>" />

                     <input type="email" placeholder="Ваша почта" id="mail" name="email" value="<?=$_POST['email'] ?? '' ?>" />

                     <input type="text" placeholder="Ваш Skype"  name="skype" value="<?=$_POST['skype'] ?? '' ?>" />
                     <textarea name="sms" cols="30" rows="10" placeholder="Ваше сообщение" value="<?=$_POST['sms'] ?? '' ?>" ></textarea>

                     <div>
                        <button type="submit" id="sbmmain" name="submit">Оставить заявку</button>
                     </div>
                 </form>
              </div>
         </div>

ajax кстати тоже две!

$(document).ready(function () {
    $(document).on('click','#sbm', function(){
       console.log($('#form').serialize());
        var sub = true;    
        if($('#name').val()==""){$('#name').css( "border"," solid 1px red" ); sub=false;}
        if($('#email').val()==""){$('#email').css( "border"," solid 1px red" ); sub=false;}
        if(sub){
            $.ajax({
                type: "POST",
                url: "form.php",
                data: $('#form').serialize()
            }).done(function(data) { //в data вернется ответ сервера, например можно вывести ошибки
                alert('Спасибо');                  
                $('.popupcontact').hide(); 
                $('.modal').removeClass('open');
            });
        }
        return false;
    });
});
  
  $(document).ready(function () {
    $(document).on('click','#sbmmain', function(){
       console.log($('#form').serialize());
        var sub = true;
        if($('#title').val()==""){$('#title').css( "border"," solid 1px red" ); sub=false;}
        if($('#mail').val()==""){$('#mail').css( "border"," solid 1px red" ); sub=false;}
        if(sub){
            $.ajax({
                type: "POST",
                url: "form.php",
                data: $('#mainform').serialize()
            }).done(function(data) { //в data вернется ответ сервера, например можно вывести ошибки
                alert('Спасибо');           
                $('input').val('');
            });
        }
        return false;
    });
});

[tyzberd]

if (isset($_POST['submit']))
это что? serialize не возвращает кнопку

[Alex_87]

tyzberd, Вы гений!!!! Всё получилось, работает!!! Благодарю вас за помощь!!!! Я просто до конца не понимаю, как работает serialize...

[tyzberd]

ajax кстати тоже две!
сделайте отправку так $('.my-form').on('submit', function(){ , форму будет отправлять не только клик, но и enter
внутри используйте $(this) это будет форма которую отправляете.
$(this).serialize();
$(this).find('#title');
что бы получить текущее окно $(this).parents('.modal');

[Alex_87]

Мне посоветовали прописать:
console.log($('#form').serialize());
Вот, что получилось:

[Alex_87]

run through, Удалил, получилось!!! Даже в консоле, после исчезновения формы данные остались. Но почему всё таки нет отправки на почту!? Странно. Что ему ещё не нравиться, что может быть?
Вот код с последними изменениями...

$(document).ready(function () {
    $(document).on('click','#sbm', function(){
       console.log($('#form').serialize());
        var sub = true;    
        if($('#name').val()==""){$('#name').css( "border"," solid 1px red" ); sub=false;}
        if($('#email').val()==""){$('#email').css( "border"," solid 1px red" ); sub=false;}
        if(sub){
            $.ajax({
                type: "POST",
                url: "form.php",
                data: $('#form').serialize()
            }).done(function(data) { //в data вернется ответ сервера, например можно вывести ошибки
                alert('Спасибо');                  
                $('.popupcontact').hide(); 
                $('.modal').removeClass('open');
            });
        }
        return false;
    });
});

Answer 1

[Дмитрий]

Добрый день.
Для начала сделайте вот так, посмотрите в консоли браузера, что возвращает serialize()

var dataForm = $(this).serialize();
console.log(dataForm)
$.ajax({
*****
data: dataForm
****
})

И проверьте переменную sub

if(sub == true){
**************
}

Что это за элемент на странице?
$(document).on('click','#sbm',

Comments

[Alex_87]

#sbm -- это кнопка отправки!!!

<button type="submit" id="sbm" name="submit">Оставьте заявку</button>

[Дмитрий]

Alex_87, ну зачем так кричать? Аж три восклицательных знака!)))
Что в консоли в конечном счёте у Вас вывело?
Кнопка находится в пределах тега form?

[Alex_87]

slo_nik, Я не кричал))) .... Кнопка находиться в пределах формы. Без ajax всё отправляется! А вот и консоль. Там тоже всё выводиться, только с русскими буквами проблема

[Дмитрий]

Alex_87, это нормально. Почитайте о кодировке символов при передаче через разные протоколы.
Ошибки в консоли есть?
print_r на стороне сервера что показывает?
Покажите изменённый файл с js и php.

[Дмитрий]

Alex_87, уберите пока проверку переменной sub