動態創建多個組

在表單上，客戶可以創建多個組。每個組都有相同的輸入字段。如果客戶點擊'+附加組'，那麼將通過jQuery動態創建一個附加組（通過AJAX調用下載html）。動態創建多個組

下面是示例html。每個ul標記是一個組。在組ul中，每個輸入字段包含組號字段。像這樣：foo_1，foo_2

current_group是一個隱藏字段，用於跟蹤組的總數。

如果點擊了add_group按鈕，jQuery將從current_group中獲得組的總數，然後動態地獲得附加組。

這是應該怎麼做？

此外，如果客戶點擊提交按鈕，當他們完成表格 - 它可能會返回到同一頁面，因爲通過PHP的錯誤驗證。我不想再次丟失動態html組。這怎麼解決？

<h2> Group One </h2> 
<ul class="Form"> 
    <li> 
     <label>Foo</label> 
     <select name='foo_1'> 
       <option value='1'>One</option> 
       <option value='2'>Two</option> 
       <option value='3'>Three</option> 
     </select> 
    </li> 
    <li> 
     <label>Bar</label> 
     <select name='bar_1'> 
       <option value='car'>Car</option> 
       <option value='bike'>Bike</option> 
       <option value='van'>Van</option> 
     </select> 
    </li> 
<ul> 

<h2> Group Two </h2> 
<ul class="Form"> 
    <li> 
     <label>Foo</label> 
     <select name='foo_2'> 
       <option value='1'>One</option> 
       <option value='2'>Two</option> 
       <option value='3'>Three</option> 
     </select> 
    </li> 
    <li> 
     <label>Bar</label> 
     <select name='bar_2'> 
       <option value='car'>Car</option> 
       <option value='bike'>Bike</option> 
       <option value='van'>Van</option> 
     </select> 
    </li> 
<ul> 

<input type='hidden' id='current_group' value='2' /> 
<input type='button' id='add_group' value='+ Additional Group' />

來源

2012-05-12 I' ll-Be-Back

那麼，如果第一組HTML元素已經存在，那麼您總是可以使用jQuery的clone()複製元素而不是調用服務器。您需要查找元素並替換您所討論的名稱。

jQuery(".Form").clone().find("select").eq(0).prop("name", "foo_" + count).end().eq(1).prop("name", "bar_" + count).end().end().appendTo("#someElem");

在一個更可讀的格式

var count = 1; 
function addRow(){ 
    count++; 
    var newFormElems = jQuery(".Form").clone(); //clone the form 
    var selects = newFormElems.find("select"); //find the selects 
    selects.eq(0).prop("name", "foo_" + count); //rename first 
    selects.eq(1).prop("name", "bar_" + count); //rename second 
    newFormElems.appendTo("#someElem"); //add to the page 
}

另一種方式來重做它增加數量的命名功能：

newFormElems.find("select").each( 
    function(){   
     this.name = this.name.replace(/^([^_]+_)(\d+)/, function(match,str,num){ return str + (parseInt(num,10)+1)}); 
    } 
);

什麼是應對動態的最佳途徑形式？那麼您可以使用Ajax提交數據，或者在驗證之後將php代碼寫出來。

來源

2012-05-12 11:57:03 epascarello

有幾種方法可以做一件事。這是你的邏輯。如果沒有錯誤，它應該工作。

無論何時您正在讀取顯示新組，請保留一個名爲group_ids[]的隱藏字段您將收到數組中的所有組ID。您可以從$ _REQUEST ['group_ids']（根據您的代碼可以使用$ _POST或$ _GET）訪問該數組。

現在無論何時提交頁面，都將檢查用戶提交的組ID。您也可以收到下拉值。如果您需要再次顯示這些組，您可以使用$_REQUEST['group_ids']從數據庫中獲取它，並通過比較當前值和用戶選擇的值來選擇正確的選項。

來源

2012-05-12 11:56:16 Imdad

動態創建多個組

回答

相關問題