动态加载表单和提交脚本

Question

我正在将表单动态加载到 div 中。使用 JQuery.post 发布表单时，应显示结果而无需重新加载整个页面。但响应中收到的内容会加载到整个浏览器中，因此主页不再显示菜单、徽标等。有很多 php 代码生成内容，这就是我认为现在可能感兴趣的内容：

<div id='subscribe_page'>
<div id='sub' class='subscribe'>
<form id='subscribe_now' action='subscription.php' name='subscribe' method='post'>
    <p class='formlabel'>Förnamn</p> <input type='text' id='first_name' name='first_name'/><br/>
    <p class='formlabel'>Efternamn</p> <input type='text' id='surname' name='surname'/> <br/>
    <p class='formlabel'>E-mail</p> <input type='text' id='email1' name='email1'/><br/>
    <p class='formlabel'>Repeat e-mail</p> <input type='text' id='email2' name='email2'/> <br/>
    <input class='inputsubmit' type='submit' value='Subscribe'/>
</form>
</div>
</div>
<script language='javascript' type='text/javascript' src='jquery-1.6.2.min.js'></script>
 <script language='javascript' type='text/javascript'>

  $(document).ready(function() {
   $('#subscribe_now').submit(function() {
   regExp = /^[^@]+@[^@]+$/;

   if(($('#email1').val().search(regExp) == -1) || !isEqual($('#email1').val(), $('#email2').val())) 
   { 
       alert('Incorrect entered email addresses. They must be valid e-mail addresses and equal.');
      return false; 
   } else{
    alert('Posting data' + $('#subscribe_now').serialize());
    $.post('subscription.php', $('#subscribe_now').serialize(), function(data) {
        $('#subscribe_page').html(data);
        alert('Posted data');
    });
    return true;
   }     

});

});     
</script>"

上面的所有内容都加载到属于主页的 div 中。发布后，我希望响应中的数据显示在 div subscribe_page 中。但事实并非如此。

请注意，$.post 内的警报不会被触发。不过，前一行的警报被触发，结果如下：

first_name=sertdg&surname=5tghf&email1=niklas%40iandapp.com&email2=niklas%40iandapp.com。

我也尝试指定应该在行为上没有差异的情况下返回的内容：

$.post('subscription.php', $('#subscribe_now').serialize(), function(data) {
        $('#subscribe_page').html(data);
        alert('Posted data');
}, 'html');

问题可能是什么以及如何解决它？

Answer 1

好吧，我不太明白，但如果你这样做了：

 $('#subscribe_page').html(data); 

你实际上删除了该 div 中的所有内容，并将其替换为你的响应。也许你应该这样做：

 $('#subscribe_page').after(data);

或

 $('#subscribe_page').append(data);

编辑 - 因为问题出在你的 $.post 中，我认为你不应该使用 serialize () 因为该函数与 $.get() 一起使用。您应该查看 param() 或 serializeArray()

Answer 2

由于表单是动态加载的，我需要像这样使用“live”将新内容加载到div中：

    $("#registerform").live("submit", function(e){

            //Prevent the form from submitting normally
            e.preventDefault();

            $.post("registeraccount.php",$(this).serialize(),function(msg){

                $("#adminarea").html(msg);                          

        });
    });

据我了解，“live”必须用于动态内容。

Answer 3

您可能只需要更改按钮的类型，以便 HTML 不会将其视为提交按钮。如果它将其视为提交按钮，它将以正常方式提交表单，重新加载整个页面或加载下一页，具体取决于设置方式。只需将按钮设置为非提交类型，您的问题就可以解决。