замена содержимого div после отправки формы

Question

У меня есть div с формой в нем. После того, как пользователь отправит форму, я хочу загрузить новый контент в div, заменив форму.

Новый контент будет статическим.

Нужен ли мне AJAX для этого?

Answer 1

Предположим, что ваш HTML выглядит примерно так:

<div id="formHolder"> 
<form id="myForm"> 
... 
</form> 
</div> 

что-то вроде этого:

$("#myForm").submit(function(){ 
    $("#formHolder").html("Your static content"); 
}); 

Answer 2

Вы можете найти пример этого здесь

https://www.write-about-property.com/seo-services/ код для работы на form submit использует экземпляр объекта, созданного в form.js

Если у вас есть трещина в нем, тогда вернитесь, мы поможем вам улучшить его для вашей цели. Вы бы поставить DIV вы хотели обновить в toupdate вар

ajform.toupdate = $ («# обновление»)

Answer 3

вы не должны использовать Ajax для этого, после отправки формы Вы можете оформить перенаправление на статическую страницу без формы (post-redirect-get pattern).

Но обратите внимание, что в этом случае вся страница будет обновляться при подаче,
и если представить, возможно, не из какой-то причине (кто сказал валидация), попав F5 появится безобразное «вы хотите отправить дерьмо. .. "

так что нет, вам не нужно использовать ajax, but it is so easy with the form plugin, что это преступление не для того.
если вы используете форму плагин, то на обратном вызове скрыть форму с статическим контентом

Answer 4

вы можете просто сделать дивы невидимыми, а кнопка отправка только кнопка с Js действий, чтобы сделать DIV видимым

<script type="text/javascript" language="javascript"> 
function step2() { 
     document.getElementById('step1_container').style.display = 'none'; 
     document.getElementById('step2_container').style.display = 'block'; 
} 

function step3() { 
     document.getElementById('step2_container').style.display = 'none'; 
     document.getElementById('step3_container').style.display = 'block'; 
} 
</script> 

... 

<form action="validate.php" method="post"> 

<div id="step1_container"> 
PAGE 1 here 

<input type="button" onclick="javascript:step2();" value="submit"/> 
</div> 

<div id="step2_container" style="display: none;"> 
Page 2 here 
<input type="button" onclick="javascript:step3();" value="submit"/> 
</div> 

<div id="step3_container" style="display: none;"> 
Page 3 here 
<input type="button" onclick="javascript:step4();" value="submit"/> 
</div> 

</form> 

И так далее

Answer 5

Вам не нужно Аякса, используя только на странице Javascript будет достаточно.

Однако с помощью ajax вы можете отображать содержимое со страницы, на которую вы отправляете форму.

Попробуйте jQuery From plugin для элегантного решения АЯКСА:

<script type="text/javascript" src="jquery-1.3.2.js"></script> 
<script type="text/javascript" src="jquery.form.js"></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#myForm').ajaxForm({ 
      target:  '#divToUpdate', 
      url:  'comment.php', 
      success: function() { 
       alert('Thanks for your comment!'); 
      } 
     }); 
    }); 
</script> 

Answer 6

Вам нужен Ajax: (Я сделаю это, как сказал SimpleCoder, но с вызовом AJAX)

$('#myForm').submit(function(){ 
    var field1 = $("#field1").serialize(); // If this doesn't work just remove the serialize() 
    var field2 = $("#field2").serialize(); 
    $.ajax({ 
     type: "POST", 
     url : "???",  //your processing page URL instead of ??? 
     data: "&field1="+field1+"&field2="+field2, 
     success: function(){ 
     $("#formHolder").html("Your static content"); 
     } 
    }); 
}); 

(Вы следует заменить поле1, поле2 на ваши поля, а если оно не работает, удалите функцию serialize().)

• Все, что вам нужно сделать, это .html() статический контент в функции успеха вызова ajax.