Как получить результат в модальном окне?

210

23 июля 2019, 08:10

Столкнулся с такой проблемой как отправка формы без перезагрузки страницы методом GET Например есть форма

<div class="form"> 
<form method="GET" action="server.php"> 
                    <input type="text" name="name"> 
                    <input type="text" name="name1"> 
                    <input type="text" name="name2"> 
                    <input type="text" name="name3"> 
                    <input type="text" name="name4"> 
                    <input type="text" name="name5"> 
                    <input type="text" name="name6"> 
                    <button type="button">Отправить</button> 
                   </form> 
<a href="server.php" class="form-win" data-fancybox-type="iframe"></a> 
</div>

Которая отправляется на server.php и возвращает результат на главную страницу. Сейчас она работает так (форма отправляется на server.php и результат отображается там же) Как получить результат без перезагрузки страницы во всплывающем окне Вот код всплывающего окна

$(function() { 
        var Btn = $('.form button'); 
        var Inp = $('.form input'); 
        var Win = $('.form-win'); 
         
        Btn.click(function() { 
            if (Inp.val() == '') { 
                alert('Введите данные'); 
                Inp.focus(); 
            } 
            else { 
                Win.attr('href', 'server.php?nnn=' + Inp.val()); 
                Win.click(); 
                //Win.fancybox(); 
            } 
        }); 
        Inp.keypress(function(e) { 
            if (e.keyCode == 13) { 
                Btn.click(); 
            } 
        }); 
         
        Win.fancybox({ 
            maxWidth    : '95%', 
            maxHeight   : '95%', 
            fitToView   : false, 
            width       : '95%', 
            height      : '95%', 
            autoSize    : false, 
            openEffect  : 'none', 
            closeEffect : 'none' 
        }); 
    });

Если указать button type="button" Открывается пустое модальное окно а если указать button type="submit" То открывается страница server.php с результатом который мне нужен. А этот результат нужно вывести в модальном окне. Подскажите как правильно сделать?

Answer 1

$('.BATON').on('click', function(e){ 
  e.prevenDefault(); 
  $.ajax({ 
    url: $('.form').attr('action'), 
    type: $('.form').attr('method'), 
    data: $('.form').serialize(), 
    success: function(data){ 
      // data - это и есть результат который пришлет твой server.php 
    } 
  }) 
});

<div class="form"> 
<form method="GET" class="form" action="server.php"> 
                    <input type="text" name="name"> 
                    <input type="text" name="name1"> 
                    <input type="text" name="name2"> 
                    <input type="text" name="name3"> 
                    <input type="text" name="name4"> 
                    <input type="text" name="name5"> 
                    <input type="text" name="name6"> 
                    <button type="submit" class="BATON">Отправить</button> 
                   </form> 
<a href="server.php" class="form-win" data-fancybox-type="iframe"></a> 
</div>