如何在提交表單後使用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交換背景圖片？

回答

相關問題