多步形式

Question

我在如何實現/構建表單時遇到問題。 這是概述。

表格的第一步是填寫“責任中心”。 但是，用戶可以添加多個責任中心。 那么下一步就是 - 每個負責中心都應該有一個或多個“賬戶代碼”。 在表單的最后，在提交之前，所有數據都應該是可編輯的。

結果應該是這樣的：

|**responsibility center**||**account codes**|  
|        center 1         || account code 1  |  
|                         || account code 2  |  
|        center 2         || account code 1  |
etc..

我只需要了解如何構建/實現表單。

編輯1

這就是我嘗試過的

第一步 第一步 - 責任中心

第二步
第二步 - 帳戶代碼

結果

編輯2我已經知道如何添加多行（如第二步），我可以在第一步到第一步實現。 所以這是我的問題：

如何為每個責任中心添加帳戶代碼？
如果我嘗試的不是實現它的實用方法，那我該怎么做呢？

Answer 1

不幸的是，在你發布你的應用程序的照片之前，我開始寫這個答案。 這些想法仍然具有相關性，但我會更多地根據你的工作量身定制我的榜樣。 對於那個很抱歉。

我會使用jQuery和AJAX來完成工作。 jQuery用於處理向DOM插入新元素以及字段驗證; AJAX驗證RC之間沒有重復的帳戶代碼，或者你有什么。 就個人而言，我也會使用AJAX來處理表單提交，而不是使用更傳統的<form action= method=>因為它可以更好地控制進程，並且在我准備好之前不會將用戶推到另一個頁面。 但是，最簡單的描述<form>示例，您可以先構建它，然后根據需要將其更改為使用AJAX。

這里的例子是假設一個空白的平板（即我在寫這個之前沒有看過你的示例應用程序）：

首先，在你的jQuery / javascript中，你需要一個計數器來跟蹤每個添加的RC。 這可以在HTML / PHP的<head>標記中，也可以存儲在單獨的文件中。 如果你點擊我的名字並查看我給出的其他AJAX答案，你會看到許多有用的例子。

<script type="text/javascript">
    $(document).ready(function() {
        var ctr = 0;
    });
</script>

在您的HTML中，您需要一個DIV，您將在其中附加每個RC DIV。 您還需要一個鏈接/按鈕/任何用戶來啟動新RC的創建。 這將是一個簡短的表格，甚至只是[RC標題]和[帳戶代碼]，帶有鏈接/按鈕/無論是創建另一個[帳戶代碼]字段和[完成/提交]按鈕。

HTML：

<div id="container">
    <form action="yourprocessorfile.php" method="POST" id="myform"></form>
</div>
<input type="button" id="mybutt" value="Add New RC" />

JAVASCRIPT / jQuery（再次，在上面的（document）.ready（）部分中）：

$('#mybutt').click(function() {
    ctr++;
    var str = 'RC TITLE:<br><input id="RC-"'+ctr+' class="RC" type="text"><br>ACCOUNT CODE<br><input id="AC-"'+ctr+' class="AC" type="text"><br>';
    $('#myform').append(str);
});

當用戶按[完成]時，再次使用jQuery檢查每個[帳戶代碼]字段是否已完成。

$('#done').click(function() {
    $('.RC').each(function() {
        if ($(this).val() == '') {
            alert('Please complete all fields');
            $(this).focus();
            return false;
        }
    });
    $('.AC').each(function() {
        if ($(this).val() == '') {
            alert('Please complete all fields');
            $(this).focus();
            return false;
        }
    });
    $('#myform').submit();
});

編輯2 /問題1：

您可以通過以下方式添加鏈接到RC的新帳戶代碼：

您需要以某種方式為RC分配唯一的數據元素，例如遞增ID
有一個添加新AC的鏈接
使用jQuery獲取最近的RC元素的ID
使用.split()拆分數字部分（賦值給var）
在創建AC時使用該編號
$（'。add_AC'）。click（function（）{//注意我使用了一個類，因此你可以為每個RC var num = $（this）.parent（）。attr（'id'）建立一個鏈接。 split（' - '）[1]; var str ='';}）;

在上面的例子中：

==>因為我使用了一個類，只要單擊該類的任何元素，它就會觸發。 當然，在創建按鈕時，必須將該類添加到按鈕def，如下所示：

<input type="button" class="add_AC" value="Add Account Code" />

num ==>使用鏈式jQuery方法，一個接一個地獲取RC id的數字部分。

$（this）==>以[添加帳戶代碼]按鈕/鏈接/點擊的任何內容為准。

.parent（）==>這可能適用於您的情況，也可能不正確。 這是我們遍歷DOM以找到RC元素的ID代碼的部分，它看起來像這樣： RC-3 。 您需要嘗試：

.parent（）。parent（）。sibling（）。parent（）。sibling（）。closest（）。prev（）或.next（）

使用這些選擇器進行游戲，打開Dev Tools窗口。 只需要幾分鍾就可以找到你的RC元素 - 或者提出另一個問題並發布你的HTML。

.attr（'id'）==>顯然，在我們的案例RC-3返回ID的文本

.split（ ' - '）[1] ==>創建有一個陣列RC在一側上（零），以及3在另一（1）

希望這一切都能讓您了解從哪里開始......

多步形式

問題描述

1 個解決方案

解決方案1
2 2013-07-29 16:04:37

多步形式

問題描述

1 個解決方案

解決方案1 2 2013-07-29 16:04:37

解決方案1
2 2013-07-29 16:04:37