CODEWITHSUNDEEP
jqueryajaxtwitter-bootstrapmodal-dialogsubmit
user3384110
user3384110

Reputation: 1

jQuery AJAX form submit with Twitter Bootstrap 3.1 modal

I'm using a Twitter Bootstrap 3.1 remote modal :

<!-- Modal -->
<div class="modal fade" id="remoteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <form action="remote.php" method="post">
        ...
        </form>
        <script type="text/javascript" src="js/bootstrap-modal.js"></script>
      </div>
    </div>
  </div>
</div>

Launched by a link :

<a data-toggle="modal" href="remote.php" data-target="#remoteModal">Click me</a>

As you can see, the bootstrap-modal.js script deal with submit button of the form :

$(document).ready(function() {

    $('.modal-link').click(function(e) {
        var target = $(this).attr('href');

        // load the url and show modal on success
        $('#remoteModal .modal-content').load(target, function() {
             $('#remoteModal').modal('show');
        });

        e.preventDefault();
    });

    $('.modal').on('submit', 'form[data-async]', function(e) {
        var $form = $(this);
        var enctype = $form.attr('id')

        if(enctype == 'multipart') {
            var formData = new FormData(this);

            $.ajax({
                type: $form.attr('method'),
                url: $form.attr('action'),
                data: formData,
                mimeType: "multipart/form-data",
                contentType: false,
                cache: false,
                processData: false,

                success: function(data, status) {
                    $('#remoteModal').removeData('bs.modal');
                    $('#remoteModal .modal-content').html(data);
                }
            });
        }
        else {
            var submitButton = $("input[type='submit'][clicked=true], button[type='submit'][clicked=true]", $form);
            var formData = $form.serializeArray();

            if(submitButton.size() === 1) {
                formData.push({ name: $(submitButton[0]).attr("name"), value: "1" });
            }
            else if(submitButton.size() !== 0) {
                console.log("Weird, multiple submit-buttons pressed!");
            }

            $.ajax({
                type: $form.attr('method'),
                url: $form.attr('action'),
                data: formData,
                cache: false,

                success: function(data, status) {
                    $('#remoteModal').removeData('bs.modal');
                    $('#remoteModal .modal-content').html(data);
                }
            });
        }

        e.preventDefault();
    });

    $('.modal').on("click", 'input[type="submit"], button[type="submit"]', function() {
        $('form[data-async] input[type=submit], form[data-async] button[type=submit]', $(this).parents("form")).removeAttr("clicked");
        $(this).attr("clicked", "true");
    });
});

The problem :

It works fine when clicking on the submit button of the form the first time but the second time I click on it, the form is posted twice, and the third time I click on it, three times, etc.

Any help ?

Thanks Oli

Upvotes: 0

Views: 8815

Answers (2)

Birla
Birla

Reputation: 1174

In your event handler, check for the following before you go ahead: if(event.isDefaultPrevented()) return;

Due to the design of jQuery, prevented events also get passed on to the handlers.

Upvotes: 0

Jimubao
Jimubao

Reputation: 411

You need to unbind the submit event, this will stop from posting multiple times

$('.modal').unbind().on('submit', 'form[data-async]', function(e) {

Upvotes: 1

Related Questions