jQuery製作表單消失並出現在彼此之後

正如標題所示這是我嘗試使用的代碼。表格必須逐一顯示，因爲來自以前表格的信息決定了下一個表格的外觀。jQuery製作表單消失並出現在彼此之後

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

來源

2014-12-06 Higeath

它不工作，我聽說，我需要把返回false;第一個表格後，但第二個沒有出現 – Higeath 2014-12-06 12:30:21

你可以使用：

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

從jQuery文檔語法fadeIn([duration ] [, complete ])它接受一個持續時間和onComplete回調，你可以用它來執行下一個動作時，首先完成。

來源

2014-12-06 12:15:07 Filype

我試過這種方式，點擊提交後沒有任何反應這裏是完整的代碼：http://pastebin.com/gRnb9F1P – Higeath 2014-12-06 12:23:56

第一次提交或第二？ – Filype 2014-12-06 12:25:15

即使我用數據填充它，第一種形式總是會縮小，然後單擊提交網站只是刷新空白表單1仍然 – Higeath 2014-12-06 12:27:35

您在混合客戶端和服務器端表單代碼。提交表單將完全重新加載頁面，因此從代碼的外觀來看，當舊錶單提交時，它會淡入新表單中，但是然後重新加載頁面，以使舊錶單再次顯示。

你既可以：

讓PHP確定下一個出現的形式如何根據提交的第一種形式，例如中if (isset($_POST["First_form_submit"]) { Show second form... }
也許更好，更人性化：使下面的第二種形式出現，一旦用戶填好了相關投入的第一個表單上，他們已經提交

來源

2014-12-06 12:19:02 jonbaldie

你可以詳細說明第二種方法嗎？看起來很有意思 – Higeath 2014-12-06 12:24:38

你可以在頁面中添加一個包含第二種形式的div，並給它一個** ** not-here **的樣式** display：none **。然後編寫一個jQuery函數，在用戶填寫第一個表單的輸入後，刪除該類（**。removeClass（「not-here」）**）。 – jonbaldie 2014-12-06 12:44:22

我這樣做太一次，只需添加之前一個提交類的按鈕，使這樣的：

<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

來源

2014-12-06 13:14:55 Alin

試過，點擊提交後也沒有任何反應 – Higeath 2014-12-06 13:20:54

查看更新後回答 – Alin 2014-12-06 13:28:42

添加了一個可用的jsfiddle – Alin 2014-12-06 13:29:44

jQuery製作表單消失並出現在彼此之後

回答

相關問題