Question

我在表单中使用Bootstrap popover来显示一些仅适用于某些用户的可选选项。我注意到一个问题是，一旦弹出窗口关闭并且表单提交中不包含2个单选按钮的表单输入，表单选择（是或否单选按钮选项）就会丢失。

如果我打开popover并提交表单一切正常，但我不能依赖我的用户提交打开popover的表单。

这是HTML：

<form>

  <div class="form-group">
    <label class="control-label col-sm-3"></label>
    <div class="input-group col-xs-8">
      <button class="btn btn-default pull-right" id="settings" type="button"><span class="glyphicon glyphicon-cog"></span> Settings</button>
    </div>
  </div>
  </div>

  <div id="userSettings" class="hide">
    <div>
      <label for="includeEmail">Include in Email</label>
      <div class="radio">
        <label>
          <input type="radio" name="includeEmail" value="Yes">Yes</label>
        &nbsp;
        <label>
          <input type="radio" name="includeEmail" value="No" checked="checked">No</label>
        &nbsp;
      </div>
    </div>
    <br />
    <div>
      <label for="includeSMS">Include in SMS</label>
      <div class="radio">
        <label>
          <input type="radio" name="includeSMS" value="Yes">Yes</label>
        &nbsp;
        <label>
          <input type="radio" name="includeSMS" value="No" checked="checked">No</label>
        &nbsp;
      </div>
    </div>
  </div>

</form>

这是脚本：

< script >
  $(function() {
    $('#settings').popover({
      placement: 'top',
      html: true,
      content: $('#userSettings').html()
    })
  }) < /script>

有没有办法让Popover关闭而不会丢失选择？

Answer 1

如果未显示输入，则不会将其作为表单提交的一部分发送。如果要发送这些值并使用popover的解决方案是：

您可以添加隐藏的表单字段，这些字段将用于发送这些值，这些字段位于弹出窗口和窗体内部。
在更改每个单选按钮时，更新相应的隐藏输入字段值。

现在，如果用户提交弹出窗口，那么它将发送此信息两次，如果弹出窗口在窗体内，如果您不希望发生这种情况，您可以随时将其移出窗体。取决于您的用例。

当Popover关闭时，Bootstrap Popover Form值会消失

1 个答案: