Ajax requests joining multiple hits

If the user fills in some invalid data, an ajax request is launched and an error message is displayed. Now, when the user again corrects the data / or enters the wrong data again, 2 queries are launched, next time 3 and he continues to add up.

Perhaps this is due to the parsley js library. If I delete the parsley code, it works fine. Any idea?

Here is the ajax code

    $('#upload-profile-button').on('click', function(e) {
        $("#upload-profile-form").parsley().validate();
        $("#upload-profile-form").parsley().on('form:validate', function (formInstance) {
            var isFormValid = formInstance.isValid();
            if(isFormValid){
        e.preventDefault();
        $('#upload-profile-button').html('Uploading...');
        var fd = new FormData($("#upload-profile-form")[0]);
        $.ajax({
            type : 'POST',
            url : '/mbatch/batch/uploadBatch',
            data : fd,
            processData : false,
            contentType : false,
            beforeSend : function() {

            },
            success : function(response) {
                if (response.data.fetchTpodSuccess == true) {
                    window.location.href= "/mbatch/batch/listBatch";
                } else {
                    new PNotify({
                        title: 'Notice',
                        text: response.message,
                        type: 'error',
                        styling: 'bootstrap3'
                    });
                        $('#upload-profile-button').html('Submit');
                }
            },
            error : function(data) {
                new PNotify({
                    title: 'Notice',
                    text: JSON.parse(data.responseText).message,
                    type: 'error',
                    styling: 'bootstrap3'
                });
                    $('#upload-profile-button').html('Submit');
            }
        });
}
             });
   });

Here is a snippet of HTML code

    <button id="upload-profile-button" type="button"
                                    class="btn btn-primary">Submit</button>

Any conclusions would be highly appreciated.

+4
source share
2 answers

. , -parsley-validate js

    <form id="upload-profile-form" data-parsley-validate enctype="multipart/form-data"
                        name = "uploadBatchForm"
                        class="form-horizontal form-label-left"
                        >

-parsley- DOM , . , $('# form'). Parsley (options); , .

- http://parsleyjs.org/doc/index.html

+1

, script , click click . , click :

$('#upload-profile-button').unbind('click').on('click',...
0

Source: https://habr.com/ru/post/1664096/


All Articles