調整動態表單具有多個部分

我有一個腳本，動態地添加行的形式使用默認值來工作：調整動態表單具有多個部分

 $(document).ready(function() { 
     var defaults = { 
    'name[]':   'Name', 
    'email[]':   'Email', 
    'organisation[]': 'Organisation', 
    'position[]':  'Position' 
}; 

var setDefaults = function(inputElements, removeDefault) 
{ 
    $(inputElements).each(function() { 
     if (removeDefault) 
     { 
      if ($(this).data('isDefault')) 
      { 
      $(this).val('') 
        .removeData('isDefault') 
        .removeClass('default_value'); 
      } 
     } 
     else 
     { 
      var d = defaults[this.name]; 
      if (d && d.length) 
      { 
       this.value = d; 
       $(this).data('isDefault', true) 
         .addClass('default_value'); 
      } 
     } 
    }); 
}; 

setDefaults(jQuery('form[name=booking] input')); 

$(".add").click(function() { 
       var x = $("form > p:first-child").clone(true).insertBefore("form > p:last-child"); 
    setDefaults(x.find('input')); 

       return false; 
      }); 

      $(".remove").click(function() { 
       $(this).parent().remove(); 
      }); 

// Toggles 
$('form[name=booking]').delegate('input', { 
    'focus': function() { 
     setDefaults(this, true); 
    }, 
    'blur': function() { 
     if (!this.value.length) setDefaults(this); 
    } 
}); 
});

爲以下形式：

<form method="post" name="booking" action="bookingengine.php"> 
       <p><input type="text" name="name[]"> 
       <input type="text" name="email[]"> 
       <input type="text" name="organisation[]"> 
       <input type="text" name="position[]"> 
       <span class="remove">Remove</span></p> 

       <p><span class="add">Add person</span><br /><br /><input type="submit" name="submit" id="submit" value="Submit" class="submit-button" /></p> 

</form>

我現在想將表單拆分爲2個部分，每個部分可以有動態添加的行。第二部分將只對姓名和電子郵件的空間，所以形式作爲一個整體，在添加任何額外的行之前，會是這個樣子：

enter image description here

但我不知道如何實現這個。要麼我會用單獨的腳本創建一個單獨的表單，然後需要知道如何將這兩個表單中的信息一起提交，或者我只需要一個表單，但是需要制定如何動態地將行添加到每個部分。

有人可以幫忙嗎？

感謝，

尼克

來源

2011-05-29 Nick

我在fully functional example here中實現了這個。

我清理了一下你的代碼，但它基本上是一樣的。主要補充是我將輸入封裝在一個fieldset元素中（您也可以使用div，但fieldset是用於對相關輸入字段進行分組的語義上正確的元素）。你的4輸入部分生活在一個fieldset，你的2輸入部分居住在另一個; 「添加人員」處理程序查找父項fieldset，克隆第一個子項並將其添加到該字段集中。方便的是，在您的使用案例中，第一個fieldset的默認值與第二個fieldset的默認值相同，但設置多組默認值並將它們傳遞到setDefaults函數將很容易。

其他一些修改代碼：

我拆你的setDefaults功能分爲兩個不同的功能，setDefaults和removeDefaults - 你不是使之成爲一個單一的功能得到什麼，以及分裂他們，使代碼更清晰。
我使用.delegate來指定「刪除」處理程序 - 否則「刪除」按鈕不適用於新的輸入集。我還用jQuery創建了「刪除」按鈕，而不是克隆它，因爲我認爲將它包含在第一個輸入集合中是沒有意義的。
我在幾個使用原始Javascript（例如獲取和設置輸入值）的地方使用了jQuery。我通常假設jQuery對於跨瀏覽器DOM訪問和操作更可靠，所以如果你已經加載了這個庫，那麼除了最簡單的DOM函數之外，幾乎沒有任何點可以使用而不是。
我刪除了您的.data調用，因爲您可以通過檢查類獲取相同的信息，通常更好的方法是降低複雜性。有可能.hasClass('test')比.data('test')稍微慢一些，但我認爲這不會有什麼區別。

來源

2011-06-10 18:55:21 nrabinowitz

感謝您的指導和幫助。正是我在找的東西。 Nick – Nick 2011-06-14 16:14:12

太棒了 - 很高興它很有用！ – nrabinowitz 2011-06-14 17:23:08

創建一種形式。把兩個div放在裏面。讓腳本添加/刪除表單元素到適當的div。

當你提交表單時，它應該自動提交div中的所有表單元素，因爲divs包含在表單中。

來源

2011-06-10 01:30:27 btilly

調整動態表單具有多個部分

回答

相關問題