如何将 Fuel UX pillbox 用作 HTML 表单中的元素？

Question

我正在玩 Fuel UX 药盒组件，我想让它成为我必须提交的表单的一部分。不幸的是，该控件不包含任何要提交的表单元素，这使它很酷但无用（对我而言）。我在 HTML 代码中添加了一个 Input::Hidden 元素，但现在我必须强制 pillbox 组件与我不确定该怎么做的表单元素一起工作。

 <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 更新 Input::Hidden 元素。

哦，JavaScript不是我的强项

Fuel UX 组件有 add 和 remove 新标签的事件，可能必须使用但正如我提到的 - 不确定如何实现。

如果您有任何建议，请帮忙，或者如果您对如何使用 HTML 表单实施 Pillbox 组件有任何其他建议 - 我乐于接受新想法。

谢谢。

Answer 1

您可以使用 Pillbox events to capture the pillbox data via the 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 对象结构，因为药盒控件支持每个药丸的文本和值属性（以及更多具有数据属性的属性）。

如何将 Fuel UX pillbox 用作 HTML 表单中的元素？

How can I use Fuel UX pillbox as an element in a HTML form?

html

javascript

forms

jquery

fuelux