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组件有添加和删除可能必须使用的新标记的事件，但正如我所提到的 - 不确定如何实现它。

如果您有任何建议，请提供帮助，或者如果您对如何使用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对象结构中，因为药丸盒控件支持每个药丸的文本和值属性（以及更多数据属性）。

如何使用Fuel UX药盒作为HTML表单中的元素？

1 个答案: