提交表单后，如何使用jQuery或Ajax交换背景图像？

我有一个使用背景图像的标准html表单。我想在用户单击submit按钮后用确认图像替换整个表单，但我对jQuery或Ajax不够了解，无法实现这一点

您可以在左上角看到表单

以下是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>

我想用以下图片替换整个表单：_images/free-quote-confirm.png

我们将非常感谢您在整理过程中提供的任何帮助，并立即予以感谢。谢谢

您可以这样做：

$('#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;
});

$（“#自由报价表”）.submit（函数（e）{
//为ajax post设置准备好的数据
var formdata=$（this.serialize（）；
$.post（“/system/qoute/path.php”），formdata，function（data）{
if（data.error）
{
警报（'Error:'+data.Error）；
返回；
}
});
//形象
var Image=$（'
然后在服务器端，您只需像通常一样使用POST值处理数据/

注意：我刚才展示的示例返回一个json字符串，因此如果您想要一个小型的错误检查系统，您必须进行json编码。
height:100Alt：“Success”应该是：height:100，alt:“Success”是我头顶上的，快速查找者：（罗伯特，这太棒了。这正是我所需要的。我所要做的就是调整替换图像的图像大小，它是即插即用的。如果我能给你50分，我会的。谢谢你花时间帮助我。
$('#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;
});