Как я могу использовать jQuery или Ajax, чтобы поменять местами фоновое изображение после отправки формы?

Question

У меня есть стандартная HTML-форма, которая использует фоновое изображение.Я хотел бы заменить всю форму изображением подтверждения после того, как пользователь нажал на кнопку отправки, но я не достаточно опытен с 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>

Вот 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 / free-quote-verify.png

Любая помощь в решении этой проблемы будет принята с благодарностью и незамедлительно признана.Спасибо!

Answer 1

Вы можете сделать так:

$('#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.вы возвращаете строку json, поэтому вам придется кодировать json, если вам нужна небольшая система проверки ошибок.