Как отправить форму без обновления, показать вывод, перезагрузить форму, промыть и повторить - PullRequest
Новая
       43

Как отправить форму без обновления, показать вывод, перезагрузить форму, промыть и повторить

0 голосов
/ 08 февраля 2012

У меня есть форма с выпадающим списком, полем ввода и кнопкой отправки.Опции выбора динамически компилируются.Я помещаю эту форму на мою страницу, вставив: 

<div id="dropdown">
       <?php include("./listforward.php"); ?>
</div>

listforward.php содержит; 

...
<form id="changeforwardForm" method="post" action="changeforward.php" class="ajaxform">
...
</form>

changeforward.php выполняет некоторую работу и выдает сообщение; 

<?php echo '<div style="color:red">'.$msg.'</div>'; ?>

После отправки это сообщение отображается в верхней части страницы 

<div id="testDiv"></div>

, и вся форма перезагружается для отображения обновленных параметров списка.Проблема, с которой я столкнулся, заключается в том, что сообщение отображается только один раз в верхней части после первого представления, а во втором представлении оно открывает пустую страницу и показывает ее там.

Я знаю, что это как-то связано с.live () или .on (), но я не могу понять, как его применить.

Мои внешние файлы Javascript 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>

jQuery Form Plugin

<script type="text/javascript"> 
  // prepare the form when the DOM is ready 
  $(document).ready(function(){ 
      var options = { 
          target:        '#testDiv',   // target element(s) to be updated with server response 
          success:       showResponse  // post-submit callback 
  }; 

  // bind form using 'ajaxForm' 

  $('.ajaxform').ajaxForm(options);          

  });         


  // post-submit callback 
  function showResponse(responseText, statusText, xhr, $form)  { 

     $("#dropdown").load("index.php #dropdown");

       }  
</script>

У меня также есть другая форма на той же странице (в настоящее время отключена).Я хотел бы нацелить вывод этой формы и сделать так, чтобы оно показывало сообщение в # testDiv.

Любой удар в правильном направлении был бы очень признателен!

С уважением, Стивен

1 Ответ

0 голосов
/ 08 февраля 2012

вы не показали весь код, но насколько я понимаю, вы используете: 

$('.ajaxform').ajaxForm(options);          

  });

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

, вы должны заново присоединить ваш метод к форме после его перезагрузки, то есть запустить это снова: 

$('.ajaxform').ajaxForm(options);          

      });
...