Question

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(), function(data) {
        $('#subscribe_page').html(data);
        alert('Posted data');
}, 'html');

What could the problem be and how to solve it?

Answer 1

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.