How to use jQuery or Ajax to replace the background image after submitting the form?

Question

I have a standard html form that uses a background image. I would like to replace the entire form with a confirmation image after the user clicks the submit button, but I am not good enough in jQuery or Ajax to remove this.

You can see the shape in the upper left here .

Here is the html:

<div id="freeQuote"> <form action="#"> <fieldset> <input type="text" name="name" value="FULL NAME" onfocus="if (this.value=='FULL NAME') this.value='';"/> <input type="text" name="" value="PHONE NUMBER" onfocus="if (this.value=='PHONE NUMBER') this.value='';"/> <input type="text" name="" value="EMAIL" onfocus="if (this.value=='EMAIL') this.value='';"/> <input type="text" name="" value="MOVE DATE" onfocus="if (this.value=='MOVE DATE') this.value='';"/> <input type="text" name="" value="ORIGINATING ADDRESS" onfocus="if (this.value=='ORIGINATING ADDRESS') this.value='';"/> <input type="text" name="" value="DESTINATION ADDRESS" onfocus="if (this.value=='DESTINATION ADDRESS') this.value='';"/> <select name="type"> <option value="Private">Private</option> <option value="Commercial">Commercial</option> </select> <input id="quoteSubmit" type="image" src="_images/btn_submit.png" alt="" onmouseover="javascript:this.src='_images/btn_submit-over.png'" onmouseout="javascript:this.src='_images/btn_submit.png'"/> </fieldset> </form> </div> 

Here is the css:

 #freeQuote { width: 231px; height: 267px; background-image: url(../_images/free-quote.png); } #freeQuote form { padding-top: 70px; } #freeQuote input { border: 1px solid #666; margin-left: 20px; width: 200px; } #freeQuote select { width: 200px;margin: 5px 0 10px 22px; } input#quoteSubmit { width: 208ox; border: none; } 

I would like to replace the whole form with this image: _images / free-quote-confirm.png

Any help in sorting it would be greatly appreciated and quickly recognized. Thanks!

Answer 1

You can do this:

 $('#freeQuote form').submit(function(e){ //Set the data ready for ajax post var formdata = $(this).serialize(); $.post("/system/qoute/path.php",formdata,function(data){ if(data.error) { alert('Error: ' + data.error); return; } }); //The Image var Image = $('<img />').attr({src:'_images/free-quote-confirm.png', width:100, height:100, alt:"Success"}); //Remove the form $('#freeQuote form').remove() //Add the image inside the div $('#freeQuote').append(Image); //Return false so the form does not send as normal. you can also use e.PreventDefault(): return false; }); 

Then, on the server side, you simply processed the data, as usual, using the POST./ values

Note: in this example, I just showed that you are returning a json string, so you will need to do json encoding if you need a small error checking system.