根據使用Java組合框的選擇動態添加表單字段

Question

我必須為網站制作一個信息提交頁面，其中將包含一些字段，這些字段應在選擇組合框值之后在值上生成。

就像我們從組合框的值中選擇“ 2”一​​樣，應該生成兩個個人詳細信息字段。 稍后，我必須借助PHP將這些值插入DB。

我也必須對這些生成的字段進行驗證。

我必須在許多領域使用類似的東西。 但是我必須從它開始。

請幫我解決這個問題，或者給我一些鏈接，以獲得有關此的幫助。

謝謝。

Answer 1

首先，我建議您學習使用JQuery（JavaScript庫）。

http://api.jquery.com/

http://docs.jquery.com/插件/驗證

http://docs.jquery.com/UI/自動完成

我已經完成了一些與您使用jquery UI自動完成，克隆，重新定位和驗證功能描述的操作類似的操作，而且這些操作都相對簡單。 本質上，您要做的就是在表單上使用jquery validate（一個jquery插件），並為您的組合框添加一個onchange的jquery UI自動完成功能，並隱藏所有可能包含的詳細信息字段表格之外的div。 組合框更改時，它將調用一個函數，該函數可根據需要銷毀字段，然后從表單外部克隆空白字段，填充空白字段（如果需要），並將其插入到表單內部的適當位置。 驗證器在class屬性上運行，因此只需確保新字段具有正確的類就足以將它們包括在驗證中。 jQuery及其插件幾乎可以像標准javascript一樣在任何地方起作用，因此集成起來應該不難。 當您弄清楚如何做事情時，會有一些加速時間，但是聽起來您無論如何都會有很多，而且從中長期來看，這會使事情變得容易得多。 。

Answer 2

我假設您的組合將以“ .valueCount”標識，並且默認數量元素為一個，可以在“ .field”下找到。 這一切的通用容器由“ fieldgroup”標識

您的第一個字段必須將名稱設置為諸如dynamicfield[]類的名稱。 用任何您想要的替換“ dynamicfield”。

然后使用jQuery為您的第一個字段創建原型：

var $prototype = $(".field").clone();

請注意， .field可以是字段本身的通用包裝。

現在為您的組合創建一個事件處理程序：

$(".valueCount").change(function(){
   var count = $(this).val(), $fields = $(this).closest("fieldgroup").find(".field");


   if ($fields.size() > count)
       //remove fields
       $fields.slice(count).remove();
   else if ($fields.size() < count) {
       //add fields

       for (var i = count - $fields.size() ; i ; i--)
            $prototype.clone().insertAfter($fields.last());
   }           

});

在服務器端，所有值都在單個數組$ _REQUEST ['dynamicfield'];中。

對其進行任何驗證。