Как избежать перенаправления после отправки формы, если у вас есть URL в действии формы? - PullRequest
Новая
       12

Как избежать перенаправления после отправки формы, если у вас есть URL в действии формы?

1 голос
/ 29 сентября 2011

У меня есть форма, которая выглядит следующим образом: 

<form name="formi" method="post"  action="http://domain.name/folder/UserSignUp?f=111222&postMethod=HTML&m=0&j=MAS2"  style="display:none">
...
<button type="submit" class="moreinfo-send moreinfo-button" tabindex="1006">Subscribe</button>

В файле сценария у меня есть этот фрагмент кода, куда я отправляю данные, в то время как в модальном окне я говорю спасибо подписчикам после того, как онипрошла проверку. 

function () {
                        $.ajax({
                            url: 'data/moreinfo.php',
                            data: $('#moreinfo-container form').serialize() + '&action=send',
                            type: 'post',
                            cache: false,
                            dataType: 'html',
                            success: function (data) {
                                $('#moreinfo-container .moreinfo-loading').fadeOut(200, function () {
                                    $('form[name=formi]').submit();
                                    $('#moreinfo-container .moreinfo-title').html('Thank you!');
                                    msg.html(data).fadeIn(200);
                                });
                            },

К сожалению, после отправки данных я перехожу к домену, указанному в действии формы.Я попытался вставить return false; в код (сначала в тег формы, затем в код js), но затем данные не были вставлены в базу данных.Что мне нужно сделать, если я просто хочу опубликовать данные и остаться на своем сайте и оставить свой отзыв.

Я отредактировал контактную форму Эрика Мартина SimpleModal, поэтому, если для решения моей проблемы потребуется больше кодаВы можете проверить оригинал здесь: http://www.ericmmartin.com/projects/simplemodal-demos/ (контактная форма)

1 Ответ

3 голосов
/ 29 сентября 2011

Обычно возврата false достаточно для предотвращения отправки формы, поэтому дважды проверьте свой код. Должно быть что-то вроде этого 

$('form[name="formi"]').submit(function() {
  $.ajax(...); // do your ajax call here
  return false; // this prevent form submission
});

Обновление

Вот полный ответ на ваш комментарий

Я попробовал это, но это не сработало. Мне нужно представить данные в части успеха, нет?

Может быть, это зависит от вашей логики и ваших точных потребностей. Обычно, чтобы выполнить то, о чем вы просите, я использую jQuery Form Plugin , который очень хорошо справляется с подобным поведением.

Из вашего комментария я вижу, что вы не отправляете саму форму с помощью вызова $.ajax, но извлекаете какие-то данные из этого вызова, не так ли? Тогда у вас есть два варианта:

С простым jQuery (без плагина формы) 

$('form[name="formi"]').submit(function() {
  $.ajax(...); // your existing ajax call
  // this will post the form using ajax
  $.post($(this).attr('action'), { /* pass here form data */ }, function(data) {
    // here you have server response from form submission in data
  })
  // this prevent form submission
  return false;
});

С плагином формы это то же самое, но вам не нужно обрабатывать извлечение данных формы (прокомментированная часть выше) и возвращать false, потому что плагин обрабатывает это для вас. Код будет 

$(document).ready(function() { 
  // bind 'myForm' and provide a simple callback function 
  $(form[name="formi"]).ajaxForm(function() {
    // this call back is executed when the form is submitted with success
    $.ajax(...); // your existing ajax call
  }); 
});

Вот и все. Имейте в виду, что с помощью приведенного выше кода ваш существующий ajax-вызов будет выполнен после отправки формы. Так что, если это проблема для вас, вы должны изменить приведенный выше код и использовать альтернативный вызов ajaxForm, который принимает опциональный объект . Таким образом, приведенный выше код может быть переписан как 

$(document).ready(function() { 
  // bind 'myForm' and provide a simple callback function 
  $(form[name="formi"]).ajaxForm({
    beforeSubmit: function() { $.ajax(...); /* your existing ajax call */},
    success: function(data) { /* handle form success here if you need that */ }
  }); 
});
...