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

我有一个标准的HTML表单使用背景图像。我想在用户点击提交按钮后用一个确认图像替换整个表单，但我不够精通jQuery或Ajax来解决这个问题。如何在提交表单后使用jQuery或Ajax交换背景图片？

您可以在左上方看到表格here。

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

任何帮助整理这将不胜感激，并及时承认。谢谢！

来源

2010-07-05 fmz

你可以做像这样：

$('#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 values./

注意：比如我刚才给你返回json字符串，所以如果你想要一个小的错误检查系统，你将不得不做一个json编码。

来源

2010-07-05 14:48:47 RobertPitt

高度：100malt：“成功” 应该是：高度：100，ALT：“成功” – 2010-07-05 14:51:37

啊只是我的头顶部，并快速的发现者:( – RobertPitt 2010-07-05 14:53:19

罗伯特，这是辉煌的正是我需要的。我所要做的只是调整替换图像的图像大小，并且它是即插即用的。如果我可以奖励你50分，我愿意。谢谢你花时间帮忙。 – fmz 2010-07-05 15:04:56

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

回答

相关问题