正如标题所说，这是我尝试过的代码。表单必须逐个显示，因为来自先前表单的信息决定了下一个表单的外观。
$(document).ready(function(){
$('#first_form').submit(function(){
$('#first_form').fadeOut('fast');
$('#second_form').fadeIn('fast');
});
});
<form action="new_patch.php" method="POST" id="first_form">
Title: <input type="text" name="patch" placeholder="Patch 4.20">
<br/>
Number of Champions: <input type="number" name="champ_number" min="1" max="99">
<br/>
<input type="submit" value="submit">
</form>
<form action="new_patch.php" method="POST" id="second_form" style="display: none;" >
<input type="text" value="text">
<input type="submit" value="submit">
<?php
$champ_number = null;
if(isset($_POST['champ_number']))
{
$champ_number = $_POST['champ_number'];
for($champ_number;$champ_number>0;$champ_number--)
{
echo "<br/>Champion ".$champ_number."<input type='"number'" name=".$champ_number." min='"1'" max='"99'">";
}
}
?>
</form>
您正在混合客户端和服务器端表单代码。提交表单将完全重新加载页面，因此从代码的外观来看，当提交旧表单时，它将在新表单中淡出，但随后重新加载页面，因此旧表单无论如何都会再次显示。
您可以：
- 让 PHP 根据第一个表单的提交来确定下一个表单的显示方式，例如
if (isset($_POST["First_form_submit"]) { Show second form... } - 可能更好，更用户友好：一旦用户在提交之前在第一张表单上填写了相关输入，就使第二个表单显示在下面
您可以使用：
$('#first_form').submit(function(){
$('#first_form').fadeOut(function() {
$('#second_form').fadeIn('fast');
});
return false;
});
从 jQuery 文档中，语法fadeIn( [duration ] [, complete ] )它接受持续时间和onComplete回调，您可以使用该回调在第一个操作完成后执行下一个操作。
我也做过一次，只需在按钮上添加一个提交类并使其如下所示：
<input type="submit" value="submit" class="submit">
将脚本更改为单击功能。
$(document).ready(function(event){
event.preventDefault();
$('.submit').click(function(){
$('#first_form').fadeOut(400);
$('#second_form').fadeIn(400);
});
});
PS，您还需要防止提交默认...否则它只会提交表单，请参阅此 JSfiddle