2013-07-29 97 views
0

我有一個問題,我應該如何實現/建立我的表單。這裏是概述。多步驟形式

表格的第一步是填寫「責任中心」。但是,用戶可以添加多個責任中心。那麼下一步就是 - 每個責任中心都應該有一個或多個「賬戶代碼」。在表單的末尾,在提交之前,所有的數據都應該是可編輯的。

的結果應該是這樣的:

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

我只需要在形式應該如何建立/實施的一些想法。

編輯1

這是我已經試過

第一步 1st step - responsibility center

第二步
2nd step - account codes

結果
result

EDIT 2 我已經知道如何添加多行(如在第2步),我可以實現已經在第一至第1步。所以這裏是我的問題:

  1. 我如何添加每個責任中心的帳戶代碼?
  2. 如果我試過的不是一種實際的方法來實現它,那麼我應該怎麼做呢?
+0

請告訴我們你已經嘗試過.. – DevlshOne

+0

你有多個這裏的問題。我建議提出具體的問題,否則你會收到非常普遍的答案。 – gibberish

回答

2

不幸的是,在你發佈你的應用程序的照片之前,我開始寫這個答案。這些想法仍然相關,但我會更多地針對你的工作量身定做我的例子。對於那個很抱歉。

我會使用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的(上文同樣,(文件。就緒內側)()部分):

$('#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獲取ID最近的RC元件
  • 使用.split()分裂斷數字部分(分配給VAR)
  • 使用該號碼創建AC

    $( 'add_AC')。點擊(函數() {//注意我使用了一個類,所以你可以爲每個RC有一個鏈接 var num = $(this).parent()。attr('id')。split(' - ')[1]; var str =''; });

在上面的例子:

==>因爲我使用的類,每當點擊與該類任何元素將火。當然,當你創建按鈕,您必須將類添加到該按鈕閃避,如:

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

NUM ==>使用jQuery的鏈接方法,一個後另,得到的數字部分RC的ID。

$(this)==>無論點擊哪個[添加帳戶代碼]按鈕/鏈接/任何東西。

.parent()==>這可能會也可能不會正確適合您的情況。這是我們遍歷DOM來查找RC元素的ID代碼的部分,它看起來像這樣:RC-3。您將需要進行實驗:

.parent()父() .sibling() .parent()兄弟() .closest() .prev()或的.next()

使用這些選擇器,打開Dev Tools窗口。只需要幾分鐘就能找到您的RC元素 - 或者提出另一個問題併發布您的HTML。

.attr( 'ID')==>顯然,返回ID的文本中,在我們的情況下RC-3

.split( ' - ')[1] ==>創建具有RC陣列上一側(零),3對其他(1)

希望這一切給你從哪裏開始的一些想法...

+0

我首先道歉,因爲在開始時沒有說清楚。你的回答給了我有用的提示。特別是不使用'action = method ='屬性。 – addykha

+0

謝謝,如果我的回答很有用,請注意它(如果您有15位代表),並且如果這是最好的答案,請將其標記爲這樣。請記住,您可以在同一問題上提出儘可能多的問題,每個問題都集中在問題的不同部分。 – gibberish

+0

我會嘗試使用你的建議。謝謝! – addykha