How do I use jQuery or Ajax to swap the background image after a form is submitted?

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 on the submit button, but I am not savvy enough with jQuery or Ajax to pull this off.

You can see the form 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 entire form with this image: _images/free-quote-confirm.png

Any help in sorting this out will be greatly appreciated and promptly acknowledged. Thanks!

Answer 1

You could do like so:

$('#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 your server side you would just process the data as usually with the POST values./

Note: that example i just showed you returns an json string so you will have to make a json encode if you want a small error checking system.