Как повторно отправить форму без перезагрузки страницы?

Question

[Игорь Че]

Есть всплывающая форма, и обработчик на php вызываемый ajax'ом. Страница не перезагружается при отправке формы. После отправки формы, вместо нее появляется сообщение о статусе отправки ушло/не ушло. И заново отправить форму можно только после перезагрузки страницы.
Как бы сделать так чтобы форму можно было отправлять повторно не перезагружая страницу?
Вот куски кода:

Открываю окно с формой:

jQuery('.reserve').click(function(){
      jQuery('#ModalReserve').arcticmodal();
  });

Здесь с помощью ajax передаю форму в contat_form.php.

function sendForm(name){
    var data1 = jQuery('[name=' + name + ']').serialize();
    jQuery.ajax({
      type: 'POST',
      data: data1,
      url: '/contat_form.php',
      beforeSend: function(){
            jQuery('[name=' + name + ']').html('<div class="success2"><img src="http://www.cee-sinaloa.org.mx/imagenes/loading.gif"/></div>');
      },
      success: function(msg){
        jQuery('[name=' + name + ']').html('<div class="pop2">'+msg+'</div>');
      }
    });
}

Код contat_form.php думаю не нужен. Я пробовал подставлять параметр cache: false в jQuery.ajax, но это ничего не меняет.

Answer 1

[Александр Карпов]

Ну вы в succes кажется затираете ваш инпут

jQuery('[name=' + name + ']').html('<div class="pop2">'+msg+'</div>');

Разместите над вашем инпутом
Смените в beforeSend и success jQuery('[name=' + name + ']') на jQuery('#for_progress')

Comments

[Игорь Че]

И как быть? Если success убираю, то вообще получаю бесконечную прокрутку www.cee-sinaloa.org.mx/imagenes/loading.gif, той что прописана в beforeSend.

[Александр Карпов]

Игорь Че: изменил свой ответ, дописал решение

[Игорь Че]

Спасибо. Работает. Только добавил перед формой div#for_progress.
Еще вопрос. У меня на странице несколько форм использующих функцию sendForm. Когда после отправки я открываю другую форму, то вижу в ней уведомление от прошлой формы. Попробовал добавить вначале функции sendForm перед строкой jQuery.ajax вот эту строку: jQuery('.#for_progress .pop2').remove();
Я ожидал что при вызове функции sendForm будет удаляться содержимое блока #for_progress, но почему-то не удаляется.

[Александр Карпов]

Игорь Че:  не мучайтесь, попробуйте использовать плагин malsup.com/jquery/form

[Игорь Че]

Этот плагин не подходит. Он вызывает Alert, а у меня и так форма в модальном окне.
Я решил по другому. Зря подставлял jQuery('#for_progress .pop2').remove(); в sendForm, она же вызывается при клике на Submit. Нужно было вставлять в функцию открывающую окно с формой.

[Александр Карпов]

Он не вызывает alert) он всяко умеет. И то что вы делаете - он умеет. Там на сайте найдете.