如何使用Fuel UX碉堡作爲HTML表單中的元素？

Question

我正在玩Fuel UX碉堡組件，我想將它作爲我必須提交的表單的一部分。不幸的是，該控件不包含任何提交的表單元素，這使得它很酷但是沒用（對我來說）。我在HTML代碼中添加了一個Input :: Hidden元素，但現在我必須強制使用碉堡組件來處理表單元素，我不知道該怎麼做。

<div class="form-group"> 
    <label for="{name}" class="col-sm-4 control-label text-right">Tags</label> 
    <div class="col-sm-8"> 
    <div class="pillbox" data-initialize="pillbox" id="pillbox-{name}"> 
     <ul class="clearfix pill-group"> 
     <li class="pillbox-input-wrap btn-group"> 
      <a class="pillbox-more">and <span class="pillbox-more-count"></span> more...</a> 
      <input type="text" class="form-control dropdown-toggle pillbox-add-item" placeholder="add item"> 
      <button type="button" class="dropdown-toggle sr-only"> 
      <span class="caret"></span> 
      <span class="sr-only">Toggle Dropdown</span> 
      </button> 
      <ul class="suggest dropdown-menu" role="menu" data-toggle="dropdown" data-flip="auto"></ul> 
     </li> 
     </ul> 
     <input type="hidden" name="{name}" id="{name}" value=""> 
    </div> 
    </div> 

我真正需要的是使用JavaScript來更新輸入::隱藏的元素在新標籤中添加或從列表中刪除。

哦，JavaScript不是我的專長。

燃料UX組件活動爲添加和刪除新標籤的可能已被使用，但正如我所說 - 不知道如何實現它。

如果您有任何建議，請幫助，或者如果您對如何使用HTML表單實現Pillbox組件提出任何其他建議 - 我將接受新的想法。

謝謝。

Answer 1

您可以使用Pillbox events通過items method捕獲藥盒數據。

HTML：

<div class="pillbox" id="myPillbox1"> 
    <ul class="clearfix pill-group"> 
    <li class="pillbox-input-wrap btn-group"> 
     <a class="pillbox-more">and <span class="pillbox-more-count"></span> more...</a> 
     <input type="text" class="form-control dropdown-toggle pillbox-add-item" placeholder="add item"> 
     <button type="button" class="dropdown-toggle sr-only"> 
     <span class="caret"></span> 
     <span class="sr-only">Toggle Dropdown</span> 
     </button> 
     <ul class="suggest dropdown-menu" role="menu" data-toggle="dropdown" data-flip="auto"></ul> 
    </li> 
    </ul> 
</div> 

<input id="pillboxInput" type="text" value=""> 

使用Javascript：

$('#myPillbox1').on('added.fu.pillbox edited.fu.pillbox removed.fu.pillbox', function pillboxChanged() { 
    $('#pillboxInput').val(JSON.stringify($('#myPillbox1').pillbox('items')) ); 
}); 

此示例輸出成JSON對象結構中，由於藥丸盒控制支持文本和值屬性（多與數據屬性）爲每個藥丸。