Страница 2 из 5 < 1 2 34 > Последняя »
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Ajax форма обратной связи ломает поиск по сайту (https://javascript.ru/forum/misc/78556-ajax-forma-obratnojj-svyazi-lomaet-poisk-po-sajjtu.html)

frost68 03.10.2019 14:01 
$(document).ready(function () {
    $("#firstform").submit(function (e) {
        e.preventDefault();
        // Получение ID формы
        var formID = $(this).attr('id');

        // Добавление решётки к имени ID
        var formNm = $('#' + formID);
        $.ajax({
            type: "POST",
            url: 'modalform/mail.php',
            data: formNm.serialize(),
            success: function (data) {
              // Вывод сообщения об успешной отправке
              $('.msgs').html(data);
              $('.formTitle').css("display","none");
              $(formNm).css("display","none");
              setTimeout(function(){
                $(formNm).css("display","block");
                $('.formTitle').css("display","block");
                $('.msgs').html('');
                $('input').not(':input[type=submit], :input[type=hidden]').val('');
              }, 3000);
            },
            error: function (jqXHR, text, error) {
                // Вывод сообщения об ошибке отправки
                $('.msgs').html(error);
                $('.formTitle').css("display","none");
                $(formNm).css("display","none");
                setTimeout(function(){
                  $(formNm).css("display","block");
                  $('.formTitle').css("display","block");
                  $('.msgs').html('');
                  $('input').not(':input[type=submit], :input[type=hidden]').val('');
                }, 3000);
            }
        });
        return false;
    });
    //для стилей формы
      var $input = $('.form-fieldset > input');
      $input.blur(function (e) {
        $(this).toggleClass('filled', !!$(this).val());
      });
});

frost68 03.10.2019 14:02
Так? Если я верно сделал, то не работает

frost68 03.10.2019 14:06
Цитата:
Сообщение от laimas (Сообщение 513417)
А нафига они вообще нужны? Вы логику того что у вас с ними написано понимаете или нет?

var formID = $(this).attr('id'); - this, это форма источник, то есть так которая отправляется и проще так this.id. А значит $('#' + formID) это тоже самое что и $(this). К чему это бесполезная писанина?

А далее вы отсылаете запросы от всех своих форм на один адрес. И о каком типе разном речь, методе, так он у вас жестко указан type: "POST".

У вас много ошибок как на клиенте, так и на сервере. К примеру, вот это пустяк if(empty($_POST['uname']) ..., но баг весьма неприятный, так как достаточно передать на сервер просто один пробел, и поле будет считаться не пустым.

Если вам сложно разобраться, то сделайте два разных обработчика, то есть не $("form").submit(function ..., а $("ID формы связи").submit(function () ... и $("ID формы поиска").submit(function () ... где и действуйте согласно задачам. Вот только нужно отменять действие по умолчанию (отправление формы естественным образом) таким образом в обработчиках:

....submit(function (e) {
e.prevetDefault();
....

PS. Пропустил return false;, это тоже самое что e.prevetDefault();, так что тут все норм.
Я здесь ошибся, не type а method, думал к этому можно привязаться

frost68 03.10.2019 14:20
Вот код для поиска и для формы
//ajax форма
$(document).ready(function () {
    $("#firstform").on('submit', function(){
        // Получение ID формы
        var formID = $(this).attr('id');

        // Добавление решётки к имени ID
        var formNm = $('#' + formID);
        $.ajax({
            type: "POST",
            url: 'modalform/mail.php',
            data: formNm.serialize(),
            success: function (data) {
              // Вывод сообщения об успешной отправке
              $('.msgs').html(data);
              $('.formTitle').css("display","none");
              $(formNm).css("display","none");
              setTimeout(function(){
                $(formNm).css("display","block");
                $('.formTitle').css("display","block");
                $('.msgs').html('');
                $('input').not(':input[type=submit], :input[type=hidden]').val('');
              }, 3000);
            },
            error: function (jqXHR, text, error) {
                // Вывод сообщения об ошибке отправки
                $('.msgs').html(error);
                $('.formTitle').css("display","none");
                $(formNm).css("display","none");
                setTimeout(function(){
                  $(formNm).css("display","block");
                  $('.formTitle').css("display","block");
                  $('.msgs').html('');
                  $('input').not(':input[type=submit], :input[type=hidden]').val('');
                }, 3000);
            }
        });
        return false;
    });
    //для стилей формы
      var $input = $('.form-fieldset > input');
      $input.blur(function (e) {
        $(this).toggleClass('filled', !!$(this).val());
      });
});

    // Ajax поиск
    $("#search").on('input', function() {
        var words = $(this).val();
        if (words.length > 2) {
            $.ajax({
                type: "POST",
                url: ROOT_PATH + "/search/",
                data: {
                    words: escape(words + ' ' + auto_layout_keyboard(words)),
                    set: 2,
                    ajax: true
                },
                success: function(data)
                {

                    // Результат поиска
                    if (data != 'false') {

                        if (data != $("#search").attr('data-content')) {
                            $("#search").attr('data-content', data);

                            $("#search").popover('show');
                        }
                    } else
                        $("#search").popover('hide');
                }
            });
        }
        else {
            $("#search").attr('data-content', '');
            $("#search").popover('hide');
        }
    });

frost68 03.10.2019 14:23
Цитата:
Сообщение от laimas (Сообщение 513418)
Если же форма поиска отправляется не AJAX, то у вас будет всего один обработчик для формы связи как $("ID формы связи").submit(function (e) ... и мешать форме поиска он не будет. В обработчике форма как JQ объект это $(this), а "магию" с ID из кода выбросить.
Поиск Ajax

laimas 03.10.2019 14:34
В запросе формы поиска тоже нужно запрещать действие по умолчанию, то есть либо return false;, либо как писал выше.

frost68 03.10.2019 14:43
laimas,
Вот так сделал, поиск работает форма нет
//ajax форма
$(document).ready(function () {
     $("#firstform").submit(function(){
        // Получение ID формы
        var formID = $(this).attr('id');

        // Добавление решётки к имени ID
        var formNm = $('#' + formID);
        $.ajax({
            type: "POST",
            url: 'modalform/mail.php',
            data: formNm.serialize(),
            success: function (data) {
              // Вывод сообщения об успешной отправке
              $('.msgs').html(data);
              $('.formTitle').css("display","none");
              $(formNm).css("display","none");
              setTimeout(function(){
                $(formNm).css("display","block");
                $('.formTitle').css("display","block");
                $('.msgs').html('');
                $('input').not(':input[type=submit], :input[type=hidden]').val('');
              }, 3000);
            },
            error: function (jqXHR, text, error) {
                // Вывод сообщения об ошибке отправки
                $('.msgs').html(error);
                $('.formTitle').css("display","none");
                $(formNm).css("display","none");
                setTimeout(function(){
                  $(formNm).css("display","block");
                  $('.formTitle').css("display","block");
                  $('.msgs').html('');
                  $('input').not(':input[type=submit], :input[type=hidden]').val('');
                }, 3000);
            }
        });
        return false;
    });
    //для стилей формы
      var $input = $('.form-fieldset > input');
      $input.blur(function (e) {
        $(this).toggleClass('filled', !!$(this).val());
      });
});

    // Ajax поиск
    $("#search").on('input', function() {
        var words = $(this).val();
        if (words.length > 2) {
            $.ajax({
                type: "POST",
                url: ROOT_PATH + "/search/",
                data: {
                    words: escape(words + ' ' + auto_layout_keyboard(words)),
                    set: 2,
                    ajax: true
                },
                success: function(data)
                {

                    // Результат поиска
                    if (data != 'false') {

                        if (data != $("#search").attr('data-content')) {
                            $("#search").attr('data-content', data);

                            $("#search").popover('show');
                        }
                    } else
                        $("#search").popover('hide');
                }
            });
        }
        else {
            $("#search").attr('data-content', '');
            $("#search").popover('hide');
        }
        return false;
    });

laimas 03.10.2019 15:01
Цитата:
Сообщение от frost68
форма нет
Цитата:
Сообщение от frost68
// Получение ID формы
        var formID = $(this).attr('id');
 
        // Добавление решётки к имени ID
        var formNm = $('#' + formID);
Это в помойку, я же писал выше. 

$("#firstform").submit(function(){
        // Получение форму
        var form = $(this);

        $.ajax({
            type: "POST",
            url: 'modalform/mail.php',
            data: form.serialize(),
            success: function (data) {
              // Вывод сообщения об успешной отправке
              $('.msgs').html(data);
              $('.formTitle').hide();
              form.hide();
              setTimeout(function(){
                form.show();
                $('.formTitle').show();
                $('.msgs').html('');
                $('input').not(':input[type=submit], :input[type=hidden]').val('');
              }, 3000);
            },
            error: function (jqXHR, text, error) {
                // Вывод сообщения об ошибке отправки
                $('.msgs').html(error);
                $('.formTitle').hide(;
                form.hide();
                setTimeout(function(){
                  form.show();
                  $('.formTitle').show();
                  $('.msgs').html('');
                  $('input').not(':input[type=submit], :input[type=hidden]').val('');
                }, 3000);
            }
        });
        return false;
    });


Что именно не работает?

В форме поиска:

$("#search").on('input', function() {
        var f = $(this),  words = this.value.trim();
        if (words.length > 2) {
            $.ajax({
                type: "POST",
                url: ROOT_PATH + "/search/",
                data: {
                    words: escape(words + ' ' + auto_layout_keyboard(words)),
                    set: 2,
                    ajax: true
                },
                success: function(data)
                {
 
                    // Результат поиска
                    if (data != 'false') {
 
                        if (data != f.attr('data-content')) {
                            f.attr('data-content', data).popover('show');
                        }
                    } else f.popover('hide');
                }
            });
        }
        else f.attr('data-content', '').popover('hide');
        
        return false;
    });

frost68 03.10.2019 15:05
laimas,
Вставил, то что вы прислали, поиск работает, форма нет

laimas 03.10.2019 15:52
Цитата:
Сообщение от frost68
поиск работает, форма нет
Если скрипт отправки формы находится в файле form.js, то проблема в нем, для него указан неверный путь, ошибка "файл не найден", статус 404.


Часовой пояс GMT +3, время: 05:31.
Страница 2 из 5 < 1 2 34 > Последняя »
Показывать 40 сообщений этой темы на одной странице