Bootstrap Popover Form values disappear when Popover closes

Question

I'm using a Bootstrap popover within my form to display some optional selections that only apply to certain users. I've noticed an issue that the form selections (yes or no radio button options) are lost as soon as the popover is closed and the form inputs for the 2 radio buttons aren't included in the form submission.

If I leave the popover open and submit the form everything works successfully but I can't rely on my users to submit the form with the popover open.

Here's the 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>

and here's the script:

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

Is there a way to have the Popover close without losing the selections?

score 0 · Accepted Answer · answered Jun 15 '16 at 12:56

If an input is not displayed, then it will not be send as part of the form submission. A solution if you want to send those values and use popover is:

You could add hidden form fields that will be used to send these values, which are outside the popup div and inside the form.
And on change of each radio button, update the corresponding hidden input field value.

Now if the user submits with the popover open, then it will send this information twice, if the popover is within the form, you could always move it outside the form if you don't want this happening. Depends on your use case.

Bootstrap Popover Form values disappear when Popover closes

1 Answers1