replacing div content after form submission

Question

I have a div with a form in it. After a user submits the form, I want to load new content into the div, replacing the form.

The new content will be static.

Do I need AJAX for this?

Answer 1

Assuming your HTML looks something like this:

<div id="formHolder">
<form id="myForm">
...
</form>
</div>

Do something like this:

$("#myForm").submit(function(){
    $("#formHolder").html("Your static content");
});

Answer 2

You can find an example of this here

https://www.write-about-property.com/seo-services/ the code to work on the form submit uses an instance of the object created in form.js

If you have a crack at it then come back we will help you perfect it for your purpose. You would put the div you wanted to update in the toupdate var

ajform.toupdate = $("#update")

Answer 3

you don't HAVE to use ajax for this, after submitting the form you can issue a redirect to a static page without the form(post-redirect-get pattern).

But note that in this case the entire page will refresh while submitting,
and if the submit might fail from some reason(who said validation), hitting F5 will pop up the ugly "do you want to send crap..."

so no, you don't have to use ajax, but it is so easy with the form plugin that it is a crime not to.
if you do use the form plugin, then at the success callback hide the form with the static content

Answer 4

you can simply make the divs invisible, and the submit button is just a button with js action to make the div visible

<script type="text/javascript" language="javascript">
function step2() {
        document.getElementById('step1_container').style.display = 'none';
        document.getElementById('step2_container').style.display = 'block';
}

function step3() {
        document.getElementById('step2_container').style.display = 'none';
        document.getElementById('step3_container').style.display = 'block';
}
</script>

...

<form action="validate.php" method="post">

<div id="step1_container">
PAGE 1 here

<input type="button" onclick="javascript:step2();" value="submit"/>
</div>

<div id="step2_container" style="display: none;">
Page 2 here
<input type="button" onclick="javascript:step3();" value="submit"/>
</div>

<div id="step3_container" style="display: none;">
Page 3 here
<input type="button" onclick="javascript:step4();" value="submit"/>
</div>

</form>

And so on

Answer 5

You don't need ajax, using only on-page javascript would be enough.

However, with ajax you can display the content from the page you're submitting the form to.

Try the jQuery From plugin for an elegant ajax solution:

<script type="text/javascript" src="jquery-1.3.2.js"></script> 
<script type="text/javascript" src="jquery.form.js"></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
        $('#myForm').ajaxForm({ 
            target:     '#divToUpdate', 
            url:        'comment.php', 
            success:    function() { 
                alert('Thanks for your comment!'); 
            } 
        }); 
    }); 
</script> 

Answer 6

You do need Ajax: (I'll do it like SimpleCoder said, but with the ajax call)

$('#myForm').submit(function(){
   var field1 = $("#field1").serialize(); // If this doesn't work just remove the serialize()
   var field2 = $("#field2").serialize();
   $.ajax({
      type: "POST",
      url : "???",     //your processing page URL instead of ???
      data: "&field1="+field1+"&field2="+field2,
      success: function(){
         $("#formHolder").html("Your static content");
      }
   });
});

( You should replace field1, field2 with your fields, and if it doesn't work, remove the serialize() function. )

• All you have to do is .html() the static content in the success function of the ajax call.