表单提交后替换div内容

时间:2010-10-16 16:42:18

标签: php jquery ajax

我有一个带有表格的div。用户提交表单后,我想将新内容加载到div中,替换表单。

新内容将是静态的。

我需要AJAX吗?

6 个答案:

答案 0 :(得分:1)

你没有必须使用ajax,在提交表单后,你可以发送重定向到没有表单的静态页面(post-redirect-get pattern)。

但请注意,在这种情况下,整个页面会在提交时刷新,
如果提交可能由于某种原因而失败(谁说验证),点击F5会弹出丑陋的“你想发送废话......”

所以不,你不必使用ajax,but it is so easy with the form plugin不要犯罪。
如果你确实使用了表单插件,那么在成功回调时会隐藏带有静态内容的表单

答案 1 :(得分:1)

你确实需要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");
      }
   });
});

(您应该将field1,field2替换为您的字段,如果它不起作用,请删除 serialize()函数。)

  • 您所要做的就是 .html() ajax调用成功函数中的静态内容。

答案 2 :(得分:0)

假设您的HTML看起来像这样:

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

做这样的事情:

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

答案 3 :(得分:0)

你可以在这里找到一个例子

https://www.write-about-property.com/seo-services/处理表单提交的代码使用form.js中创建的对象的实例

如果您对此有所了解,那么我们将帮助您完善它以达到您的目的。你可以在toupdate var

中放置你想要更新的div

ajform.toupdate = $(“#update”)

答案 4 :(得分:0)

你可以简单地使div不可见,而提交按钮只是一个带有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>

等等

答案 5 :(得分:0)

你没有需要 ajax,只使用页面上的javascript就足够了。

但是,使用ajax,您可以显示您提交表单的页面中的内容。

尝试jQuery From plugin以获得优雅的ajax解决方案:

<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>