我如何使用jQuery或Ajax来交换的背景图像后，提交表单？ [英] How do I use jQuery or Ajax to swap the background image after a form is submitted?

问题描述

我有一个使用一个背景图像标准的HTML表单。我愿与用户点击提交按钮后确认图像替换整个表，但我不精明不够用jQuery或Ajax来完成这件事。

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.

您可以看到在左上方形式这里。

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

下面是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; }

我想更换整个形式与此图像：_images /自由报价，confirm.png

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

任何帮助整理了这一点，将大大AP preciated并及时确认。谢谢！

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

推荐答案

您可以做像这样：

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

然后在你的服务器端，您将只处理数据通常与POST值./

Then on your server side you would just process the data as usually with the POST values./

注：这个例子我刚才给你看返回一个JSON字符串所以你必须，如果你想有一个小的错误检查系统，使一个JSON恩code

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.

这篇关于我如何使用jQuery或Ajax来交换的背景图像后，提交表单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！