Question

我有一个表单，可以将数据发送给interspire电子邮件营销人员。

以下表格的代码：

<form method="post" action="http://www.blackbambooliquids.com/email/form.php?form=1" 
id="form" >

....form fields.....

<input type="submit" value="Subscribe" />

表格坐在里面：

<div id="form" > the form </div>

提交表单时，我如何获得淡入的感谢信息以及表单字段和包含它们的div淡出？

Answer 1

像这样：

假设

<div id="formDiv"><form 
  method="post" 
  action="http://www.blackbambooliquids.com/email/form.php?form=1" 
  id="form" >...</form>
</div>
<div id="thanks">Thank you - hidden in CSS</div>

在头脑中

<script src="jquery.js"></script>
<script>
$(function() {
  $("#form").on("submit",function(e) {
    e.preventDefault();
    var $formDiv = $(this).parent();
    $.post(this.action,$(this).serialize(),function() {
      $formDiv.fadeOut(function() {
        $("#thanks").fadeIn();
      });
    });
  });
});
</script>

Answer 2

您可以执行以下操作：

<强> HTML：

<div id="form">
    My form
    <form method="post" id="theForm" ></form>
    <input type="submit" value="Subscribe" /> 
</div>
<div id="thankYou" class='collapsed'>Thank you</div>

<强> JS：

$('input').click(function(){
    $("#form").fadeOut(function(){
         $("#thankYou").fadeIn();
    })
})

JSFiddle

Answer 3

guest is this -->[div] is toggle
inside   this -->[div] is a form  
in       this -->[div] the form has a submit button

clicking submit-->sends form data to link
you want to display thank you on the toggle [div] before it goes to target link

也许验证能让它成为希望吗？

ajax在表单提交上加载隐藏的div

3 个答案: