I have a modal form - bootstrap css - which with every button click submits an additional time, e.g.

1. first click, 1 submit
2. second click, 2 submits
3. third click, 3 submits
4. etc, etc

The jQuery I use is below. The modal is called from another modal (dynamically created) thus I need to use the $(document) calling method. I've tried the $(document).on( 'submit', '#pos_form', function(e) { ... }); too with an e.preventDefault(), but that didn't make any difference, nor did '$('#posModal').remove('#pos_form');'.

/* Calling page */  
    $(document).ready(function() {
        $('.posbutton').on('click', function(e) {
            var id = '#'+this.id;
             openSpinner();
            $.ajax({
                url: 'ajax_pos_form.php',
                 type: 'post',
                dataType: 'html',
                data: { GRIDCO: $(id).data('gridco'), project $(id).data('project'), gridconame: $(id).data('name') }
            })
            .done(function( response ) {
                if ( response) {
                    $('#posModal').html('');
                    $('#posModal').append(response);
                    $('#posModal').modal('show');
                }
                closeSpinner();
            });
        });
    });

/* page with modal form */
    $(document).ready(function() {
        $(document).on( 'click', '#submit', function(e){
             $.ajax({
                url: 'ajax_pos_form.php'
                , type: 'post'
                , dataType: 'json'
                , data: $('#pos_form').serialize()
                , success: function(response) {

                    if ( response.success ) {
                        $('#posModal').modal('hide');
                        return false;
                    }
                    else {
                        alert ( response.msg );
                        return false;
                    }
                    $('#posModal').remove('#pos_form');
                    $('#posModal').modal('hide');
                    return false;
                }
            });
            return false;
         });
    });

In my testpage, not called from a modal, it doesn't work either. Any help would be appreciated

I have a modal form - bootstrap css - which with every button click submits an additional time, e.g.

1. first click, 1 submit
2. second click, 2 submits
3. third click, 3 submits
4. etc, etc

The jQuery I use is below. The modal is called from another modal (dynamically created) thus I need to use the $(document) calling method. I've tried the $(document).on( 'submit', '#pos_form', function(e) { ... }); too with an e.preventDefault(), but that didn't make any difference, nor did '$('#posModal').remove('#pos_form');'.

/* Calling page */  
    $(document).ready(function() {
        $('.posbutton').on('click', function(e) {
            var id = '#'+this.id;
             openSpinner();
            $.ajax({
                url: 'ajax_pos_form.php',
                 type: 'post',
                dataType: 'html',
                data: { GRIDCO: $(id).data('gridco'), project $(id).data('project'), gridconame: $(id).data('name') }
            })
            .done(function( response ) {
                if ( response) {
                    $('#posModal').html('');
                    $('#posModal').append(response);
                    $('#posModal').modal('show');
                }
                closeSpinner();
            });
        });
    });

/* page with modal form */
    $(document).ready(function() {
        $(document).on( 'click', '#submit', function(e){
             $.ajax({
                url: 'ajax_pos_form.php'
                , type: 'post'
                , dataType: 'json'
                , data: $('#pos_form').serialize()
                , success: function(response) {

                    if ( response.success ) {
                        $('#posModal').modal('hide');
                        return false;
                    }
                    else {
                        alert ( response.msg );
                        return false;
                    }
                    $('#posModal').remove('#pos_form');
                    $('#posModal').modal('hide');
                    return false;
                }
            });
            return false;
         });
    });

In my testpage, not called from a modal, it doesn't work either. Any help would be appreciated

• javascript
• jquery
• twitter-bootstrap

Share Improve this question Follow edited Jun 8, 2016 at 10:09 C. Gellings asked Jun 8, 2016 at 9:31 C. GellingsC. Gellings 14111 silver badge1111 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

I had the same problem with a similar modal operation and used:

("#modal_submit_button").unbind('click');

This event was attached to the function that opens the modal.

That way every time the modal is opened the event listeners are reset.

("#open_modal_button").click(function(){
    ("#modal_submit_button").unbind('click');
    ("#modal").modal('toggle');
    //OTHER CODE
}

I dug my own trap. I shouldn't include the form's JS in the dynamic created form, but in the base document. I found the answer here

Here when you submit the form, it will create the instance once again dynamically. so instead of calling jquery on click $(document).on( 'click', '#submit', function(e){, call the method from the html click button, like <button value="submit" onClick="submitForm();"/> and put entire method of on click submit in the SubmitForm() method.