动态加载表单和提交脚本

Dynamically loaded form and submit-scripts

本文关键字：提交 脚本 表单 加载 动态      更新时间：2023-09-26

我正在动态加载一个表单到一个div中。当使用JQuery发布表单时。后，结果应该没有整个页面被重新加载呈现。但是，在响应中收到的内容被加载到整个浏览器中，因此主页不再包含菜单，徽标等。有很多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');

问题可能是什么，如何解决?

我不太明白，但是如果你明白了:

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

你会擦除div里面的内容并将其替换为响应。也许你应该这样做:

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

或

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

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

由于表单是动态加载的，所以我需要像这样将新内容加载到div中，使用"live": 

    $("#registerform").live("submit", function(e){
            //Prevent the form from submitting normally
            e.preventDefault();
            $.post("registeraccount.php",$(this).serialize(),function(msg){
                $("#adminarea").html(msg);                          
        });
    });

在我的理解中，"live"必须用于动态内容。

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

相关文章：