Dynamically loaded form and submit-scripts

I am loading a form dynamically into a div. When posting the form using JQuery.post, the result should be presented without the entire page to be reloaded. But instead the content received in the response is loaded into the entire browser, hence the main page is not present with menu, logos etc anymore. There's a lot of php code generating the content, here's just what I think may be of interest now:

<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>"

Everything above is loaded into a div belonging to the main page. After posting, I want the data in the response to be presented in div subscribe_page. But it is not.

Please note that the alert inside the $.post isn't triggered. The alert the row before is triggered though, with result like this:

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

I did also try to specify the content that should be returned with no difference in behaviour:

$.post('subscription.php', $('#subscribe_now').serialize(), fu开发者_如何学Pythonnction(data) {
        $('#subscribe_page').html(data);
        alert('Posted data');
}, 'html');

What could the problem be and how to solve it?

---

Well i don't understand exactly, but if you do:

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

you actually erase whatever you have inside that div and replace it with your response. Maybe you should do:

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

or

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

EDIT - since the problem is in your $.post, i think that you should not use serialize() as that function is used with $.get(). you should look into param() or serializeArray()

---

Since the form is loaded dynamically, I need to load the new content into the div like this, using "live":

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

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

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

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

        });
    });

As I understand it, "live" must be used for dynamic content.

---

You may just need to change the type of button you have so that HTML doesn't see it as a submit button. If it sees it as a submit button, it will submit the form in the normal way, reloading the entire page or loading the next page depending on how things are set up. Just set the button to be of a non-submit type, and your problem might be solved.