Question

I’m trying to create an ‘edit’ button for a post that when clicked will both submit the form which will pass in the post id and call a modal(I’m using bootstrap modal). The modal that opens up will show the content from the passed in post id.

however, I’ having trouble coming up with a tag that will both submit and call the modal(href). I have tried combinations of anchor tags, input tags and button tags but neither really seem to work together to achieve the goal. I’d appreciate any advice. Thanks

<form>
<a  class="btn" data-toggle="modal" title="edit" id="editbtn" href="#myeditModal">
<input type="submit" name="edit" id="edit"></a>
</form>

----the modal div -------
<div class="modal hide" id="myeditModal">

Answer 1

If I’ve understood your question correctly, I’d simply use a JQuery click function on a submit button, so for example:

• User clicks submit button on form
• JQuery click function opens modal
• Return true
• Form gets submitted

If you need the modal to remain open during an Ajax post, then just serialize the form using the same click function, post, wait for response, and return false.

UPDATE:

For example:

$(".your-submit-button").click(function() {
    // Do something with modal box
    $("#your-modal-box").show();
    // Do ajax request
    var url = $(this).parents("form").attr("action");
    var params = $(this).parents("form").serialize(); 
    $.post(url, params, function(output) {
        // Optionally do something with the output of ajax request
    });
    return false;
});