jQuery submit form with AJAX problem

Question

Here is my jQuery code:

<script type="text/javascript">
    //<!--
$(document).ready(function() {

    $('input[type="submit"]').click(function() {
        $.ajax({
              type: 'POST',
              url: $('form').attr('action'),
              success: function(data) {
                  //
              }
        });
        return false;
    });

});    //-->
</script>

What I want to do after the submit button is clicked is:

• make an AJAX request to the page identified by form's action attribute (which happens to be the same php script with the form... so basically the form should submit to the same page).
• replace the HTML of the whole page with the ajax request returned value.

However, I don't know how to do that. There is no html or body tag on the page with the form as the form is getting icnluded in another page with jQuery.

So how to replace the HTML of the page with the HTML ajax returns?

This is how the whole HTML looks like (this is evrything, there is no html or body tag):

<form enctype="application/x-www-form-urlencoded" method="post" action="editDocumentQuestion.php?iqid=-5">
    <dl>
        <dt>
            <label for="questionBody">Otázka:</label>
        </dt>
        <dd style="margin-left: 0;">
            <textarea name="questionBody" id="questionBody" rows="4" cols="95" style="border: 1px solid #2278B9; font-family: sans-serif;">Otazka</textarea>

        </dd>
        <dt style="padding-top: 1em;">
            <label for="questionCorrectAnswer">Odpovede:</label>
        </dt>
        <dd style="margin-left: 0;">
            <div class="pad-top">
                <div style="margin-right: 1em; float: left;"><input type="radio" name="questionCorrectAnswer" class="questionCorrectAnswer" value="1" checked="checked" />a)</div>
                <div style="float: left;"><textarea name="questionAnswer1" id="questionAnswer1" rows="2" cols="88" style="border: 1px solid #2278B9; font-family: sans-serif;">Odpoved a</textarea></div>

                <div style="clear: both; height: 0; line-height: 0;"></div>
            </div>
            <div class="pad-top">
                <div style="margin-right: 1em; float: left;"><input type="radio" name="questionCorrectAnswer" class="questionCorrectAnswer" value="2" />b)</div>
                <div style="float: left;"><textarea name="questionAnswer2" id="questionAnswer2" rows="2" cols="88" style="border: 1px solid #2278B9; font-family: sans-serif;">Odpoved b</textarea></div>
                <div style="clear: both; height: 0; line-height: 0;"></div>
            </div>
            <div class="pad-top">

                <div style="margin-right: 1em; float: left;"><input type="radio" name="questionCorrectAnswer" class="questionCorrectAnswer" value="3" />c)</div>
                <div style="float: left;"><textarea name="questionAnswer3" id="questionAnswer3" rows="2" cols="88" style="border: 1px solid #2278B9; font-family: sans-serif;">Odpoved c</textarea></div>
                <div style="clear: both; height: 0; line-height: 0;"></div>
            </div>
        </dd>               
        <dt>
            &nbsp;
        </dt>

        <dd style="margin-left: 24.5em;">
            <input type="submit" name="editovatDokumentovuOtazku" id="editovatDokumentovuOtazku" value="Ulož" style="width: 6em; padding: .3em 0;" />
        </dd>
    </dl>
</form>

<script type="text/javascript">
    //<!--
$(document).ready(function() {

    $('input[type="submit"]').click(function() {
        $.ajax({
              type: 'POST',
              url: $('form').attr('action'),
              success: function(data) {
                  //
              }
        });
        return false;
    });

});    //-->
</script>  

Answer 1

replace the HTML of the whole page with the ajax request returned value.

Try modifying your success handler like this:

success: function(data) {
  $('form').after(data).end().remove();
}

What it does is that it inserts ajax data after your current form with .after(data) and end() is used to revert back to the form and finally remove() is used to remove the form.

Answer 2

Even though there is no body or html tag you should be able to replace it like this:

<script type="text/javascript">
    //<!--
$(document).ready(function() {

    $('input[type="submit"]').click(function() {
        $.ajax({
              type: 'POST',
              url: $('form').attr('action'),
              success: function(data) {
                  $('body').html(data);
              }
        });
        return false;
    });

});    //-->
</script>

Firefox 3.6.8, IE 8 and Chrome automatically inserts html and body tags if they are not present (those are the ones I have tested against)