我如何使用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屋!