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不会将其视为提交按钮。如果它将其视为提交按钮，它将以正常方式提交表单，重新加载整个页面或根据事物的设置方式加载下一页。只需将按钮设置为非提交类型，您的问题就可以解决了。

动态加载表单和提交脚本

3 个答案: