Question

正如标题所说，这是我尝试过的代码。表单必须逐个出现，因为以前表单中的信息决定了下一个表单的外观。

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

Answer 1

你可以使用：

$('#first_form').submit(function(){
    $('#first_form').fadeOut(function() {
        $('#second_form').fadeIn('fast');
    });
    return false;
});

从jQuery文档中，语法为fadeIn( [duration ] [, complete ] )，它接受一个持续时间和一个onComplete回调，您可以在第一个完成时执行下一个操作。

Answer 2

您正在混合客户端和服务器端表单代码。提交表单将完全重新加载页面，因此从代码的外观开始，当旧表单提交时，它将在新表单中淡入淡出，然后重新加载页面，以便旧表单无论如何都会再次显示。

你可以：

让PHP根据第一个表单的提交确定下一个表单的显示方式，例如： if (isset($_POST["First_form_submit"]) { Show second form... }
可能更好，更方便用户：一旦用户在提交之前填写了第一个表单上的相关输入，请将第二个表单显示在下方

Answer 3

我也是这样做的，只需在按钮上添加一个提交类，然后将其设为：

<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

jQuery制作表单消失并出现在彼此之后

3 个答案: