How to combine form elements in modal dialog?

[nikos]

I was wondering what you suggest to combine a form and its elements inside a modal dialog / popover?

Currently I am using the following structure...

<div class="modal">
  <form method="POST">
  <div class="modal-header">
    <h3>...</h3>
  </div>
  <div class="modal-body">
    ...
    <div class="clearfix">
      <label for="foo">Bar</label>
      <input id="foo" name="foo" type="text" value=""/>
    </div>
    ...
  </div>
  <div class="modal-footer">
    <button type="submit" name="finish" value="ok" class="btn primary">Ok</button>
    <button type="submit" name="finish" value="cancel" class="btn">Cancel</button>
  </div>
  </form>
</div>

It works quite nicely, the only issue is that there is white stripe at the bottom, due to ...

form {
  margin-bottom: 18px;
}

[fat]

could you re ask this on the mailing list? thanks!

[nikku]

Check out http://nikku.github.com/jquery-bootstrap-scripting/.
The script can do it out of the box.

[ktomk]

👍

[dmvaldman]

When the user presses "Enter" in an input field I am getting that the modal disappears, and the form isn't submitted. I'm not sure why. I've also tried prevent the keydown event from bubbling when "Enter" is pressed (using stopImmediatePropagation), but the problem persists.

[lgs]

@nikku

Could be great, adding some specific "forms examples" on http://paynedigital.com/2011/11/bootbox-js-alert-confirm-dialogs-for-twitter-bootstrap or

[royduin]

@dmvaldman: Same problem here. I hope it will be fixed soon!

[c2theg]

After spending way to much time on this, i got it! This is what i did: (First some background, im using the modal for a login form) Also theres no need for bootstrap-scripting for this to work. i was going to use it if i couldn't get it any other way, and it turns out you dont need it. :)

1. The button that calls the modal should be as follows
   button class="btn btn-primary" data-toggle="modal" href="#dia_login" id="btn_login"> Login /button>
   (i cant get github to show the correct button code, just add the < at the beginning and end tag)

The key this is the code: data-toggle="modal" . You'll see in the JS you dont need to make the modal visible.

2. the JS

$(document).ready(function(){
$('#dia_login').modal('hide');
$('#btn_login').click(function() {
// $('#dia_login').modal('show'); //---> this does nothing b/c of the calling button has (data-toggle="modal") set
});

$('#dia_login').on('shown', function () {
    $("#txt_email").focus();
})

$("#txt_password").keypress(function(e) {
    if(e.which == 13) { 
        $('#frm_login').submit();
    }
});     

});

3. The form

  <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>User Login</h3>
  </div>
  <div class="modal-body">


        <div class="control-group">
            <label class="control-label" for="txt_email">Email:</label>
            <div class="controls">
                <input class="input-large" id="txt_email" name="txt_email" type="text" placeholder="Email" maxlength="60" size="30">
                <p class="help-block"></p>
            </div>
        </div>

        <div class="control-group">
            <label class="control-label" for="txt_password">Password:</label>
            <div class="controls">
                <input type="password" class="input-large" id="txt_password" name="txt_password" placeholder="Password" maxlength="60" size="30">
                <p class="help-block"><a href="/password_forgot.php">Forgot Password</a></p>
            </div>
        </div>

        <div class="control-group">
            <div class="controls">
                <label class="checkbox">
                    <input type="checkbox"> Remember me
                </label>
            </div>
        </div>


  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Cancel</a>
    <input type="submit" id="btn_login" name="btn_login" value="Login" class="btn btn-primary" />
  </div>
  </form>

Thats all you should need. I hope this helps someone trying to do this!