Bootstrap Popover Form 值在 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

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

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

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

Bootstrap Popover Form 值在 Popover 关闭时消失

Bootstrap Popover Form values disappear when Popover closes

html

javascript

jquery

twitter-bootstrap

bootstrap-popover