javascript - 当 Popover 关闭时，Bootstrap Popover 表单值消失

Question

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

如果我保持弹出窗口打开并提交表单，一切都会成功，但我不能依赖我的用户在弹出窗口打开的情况下提交表单。

这是 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

如果未显示输入，则不会将其作为表单提交的一部分发送。如果您想发送这些值并使用弹出窗口，解决方案是:

1. 您可以添加隐藏的表单字段，用于发送这些值，这些值位于弹出 div 外部和表单内部。

2. 当每个单选按钮发生变化时，更新相应的隐藏输入字段值。

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