Twitter Bootstrap 2 modal form dialogs

Question

I have the following dialog form :

<div class='modal' id='myModal'>
  <div class='modal-header'>
    <a class='close' data-dismiss='modal'>×</a>
    <h3>Add Tags</h3>
  </div>

  <div class='modal-body'>
    <form accept-charset="UTF-8" action="/tagging" data-remote="true" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="mCNvbvoPFWhD7SoJm9FPDh+BcRvCG3d16P+oOFACPuc=" /></div>
        <input id="tags_string" name="tags_string" type="text" value="luca" />
        <input id="id" name="id" type="hidden" value="4f1c95fd1d41c80ff200067f" />
    </form>
  </div>

  <div class='modal-footer'>
    <div class='btn btn-primary'><input name="commit" type="submit" value="Add tag" /></div>
  </div>
</div>

and his JS :

<script>
  //<![CDATA[
    $(function() {
      // wire up the buttons to dismiss the modal when shown
      $("#myModal").bind("show", function() {
        $("#myModal a.btn").click(function(e) {
          // do something based on which button was clicked
          // we just log the contents of the link element for demo purposes
          console.log("button pressed: "+$(this).html());
          // hide the dialog box
          $("#myModal").modal('hide');
        });
      });
      // remove the event listeners when the dialog is hidden
      $("#myModal").bind("hide", function() {
          // remove event listeners on the buttons
          $("#myModal a.btn").unbind();
      });
      // finally, wire up the actual modal functionality and show the dialog
      $("#myModal").modal({
        "backdrop" : "static",
        "keyboard" : true,
        "show" : true // this parameter ensures the modal is shown immediately
      });
    });
  //]]>
</script>

When I click x, which is <a class='close' data-dismiss='modal'>×</a>, the form close down leaving me on the current page, while I'd like to go on the hamepage.

Also "Add tag" botton, which is <div class='btn btn-primary'><input name="commit" type="submit" value="Add tag" /></div> don't do nothing, while clicking jaust ENTER on the keyboard do the job and I'd like clicking "Add tag" did the same.

I'm not so skilled on JS and front-end prog, so any help is welcome.

Solution 1

Your submit button is outside of the form tags.
It won't know what form to submit.

Use javascript to connect it to the form.

<div class='modal-body'>
    <form id="modal-form" accept-charset="UTF-8" action="/tagging" data-remote="true" method="post">
        <input name="something" value="Some value" />
    </form>
  </div>

<div class='modal-footer'>
    <a id="modal-form-submit" class='btn btn-primary' href="#">Submit</a>
</div>

<script>
  $('#modal-form-submit').on('click', function(e){
    // We don't want this to act as a link so cancel the link action
    e.preventDefault();

    // Find form and submit it
    $('#modal-form').submit();
  });
</script>

As for the <a class='close' data-dismiss='modal'>×</a> that is supposed to link to the homepage, why not just remove the data-dismiss='modal' and make it act like a normal link using a standard href='home.html'.

Here is some additional code to point you in the right direction for using AJAX to submit the form:

// Since we want both pressing 'Enter' and clicking the button to work
// We'll subscribe to the submit event, which is triggered by both

$('#modal-form').on('submit', function(){

  //Serialize the form and post it to the server
  $.post("/yourReceivingPage", $(this).serialize(), function(){

    // When this executes, we know the form was submitted

    // To give some time for the animation, 
    // let's add a delay of 200 ms before the redirect
    var delay = 200;
    setTimeout(function(){
      window.location.href = 'successUrl.html';
    }, delay);

    // Hide the modal
    $("#my-modal").modal('hide');

  });

  // Stop the normal form submission
  return false;
});

Solution 2

To get the submit button work put it inside the form.

<div class="modal">
    <form id="modal-form" action="/tagging" data-remote="true" method="post">
        <div class="modal-header">
            <a class="close" data-dismiss="modal">×</a>
            <h3>A Modal Form</h3>
        </div>
        <div class="modal-body">
            <input name="something" value="Some value" />
        </div>
        <div class="modal-footer">
            <a href="#" class="btn" data-dismiss="modal">Cancel</a>
            <input type="submit" value="Save" class="btn btn-primary" />
        </div>
    </form>
</div>

However, this adds an unexpected margin at the bottom of the modal. Bootstrap 2.0.2 introduced the modal-form class to fix this or you can fix it yourself with a style definition like:

.modal > form {
    margin-bottom: 0;
}

For linking to another page when closing the modal I go along with TheShellfishMeme

As for the × that is supposed to link to the homepage, why not just remove the data-dismiss='modal' and make it act like a normal link using a standard href='home.html'.

Solution 3

With HTML5 you can have something like this:

<div class="modal" id="myModal">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Add Tags</h3>
  </div>

  <div class="modal-body">
    <form id="my_form" accept-charset="UTF-8" action="/tagging" data-remote="true" method="post">
        <div style="margin:0;padding:0;display:inline">
          <input name="utf8" type="hidden" value="&#x2713;" />
          <input name="authenticity_token" type="hidden" value="mCNvbvoPFWhD7SoJm9FPDh+BcRvCG3d16P+oOFACPuc=" />
        </div>
        <input id="tags_string" name="tags_string" type="text" value="luca" />
        <input id="id" name="id" type="hidden" value="4f1c95fd1d41c80ff200067f" />
    </form>
  </div>

  <div class="modal-footer">
    <div class="btn btn-primary"><input name="commit" type="submit" value="Add tag" form="my_form" /></div>
  </div>
</div>

This called in HTML5 form-associated element of-course if you need to support all browsers + old ones then you need to go with JavaScript, but you can use JavaScript as a fallback :)

Solution 4

The problem for submitting form lies within bootstrap own JS modal library (bootstrap-modal.js) - basicaly submit event is being prevented due to line #204: ev.preventDefault (why?).

My solution was to add:

if(!$(e.target).parents('form'))
   e.preventDefault();

however I don't know what problems it will spawn.

View more solutions

Comments

[Luca G. Soave]

thanks TheShellfishMeme, x close works fine linking href='home.html' like you said and Submit works from the function point of view but is not able to close down the form after clicked ...

[Tim]

Do you want to close the modal or go to home.html?

[Luca G. Soave]

when I click on "Submit button" as well as I just click on ENTER I'd like it close the modal (updating the input) and go to home.html (while clicking on x just go to home.html and already works like you suggested before by doing : <div class='close'><a href="/">x</a></div>)

[Tim]

You basically have two choices: Either you submit the form using AJAX and then change the page once it's done or you send a redirect from the server once the form has been submitted. I think you are looking for the first option. Then you can submit the form, wait until that worked successfully, close the modal, wait until the animation is done and then redirect.

[Luca G. Soave]

thanks for your support TheShellfishMeme but modal form, still doesn't close down, neither after pressing 'Enter' nor after clicking the button. I need a method to debug this and see where it fails/stop/don't get evaluated ..., any idea ?

[Tim]

I'm afraid not. Did you try the code from my edit? If the redirect works, it'll be some problem with the modal. In my code I wrote #my-modal but you used #myModal. Might it be that?

[Luca G. Soave]

... unfortunately the code is generated by a rails 3.1 helper + haml template language ... and is similar but not equal ...

[stephenmurdoch]

there is a class called modal-form that removes the bottom margin for you - read more

[TheCloudlessSky]

@stephenmurdoch - Thanks for this! I've updated the answer to reflect the new class.

[Costa Shapiro]

the code for the button in haml though: %input.btn.btn-primary(name='commit' type='submit' value="Add tag" form='my_form')

[Craig Blaszczyk]

The original question didn't use Jade, so this answer isn't helpful