Question

我有一个包含下拉列表选项，输入框和提交按钮的表单。选择选项是动态编译的。我通过插入

将此表单放在我的页面上

<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显示它的消息。

非常感谢正确方向的任何踢法！

关心史蒂文

Answer 1

你没有显示所有代码，但是根据我能理解你使用的代码：

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

  });

将您的功能附加到from submit。然后正如你所说，你重新加载表单，所以功能不再附加。然后当你重新提交时，它的行为就像常规提交一样。

重新加载后，您应该将方法重新附加到表单，即再次运行：

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

      });

如何提交表格而不刷新，显示输出，重新加载表格，冲洗和重复

1 个答案: