Issue with submitting form via jQuery AJAX

Question

I have written a jQuery script that checks for change event on a file input field, when a file is selected, the form submit function needs to be fired and post data via Ajax.

The Problem: Function on file change is being fired but the submit function is not being fired. The console has no errors to show.

Script that I have written:

$(document).ready(function() {
    $("#upld").on('change', function() {
        console.log('going to run submit function');
        $('#fff').submit(function(e) {
            console.log('submitting function executed')
            var siteSettings = {"ajaxurl": '/filer/check/wp-admin/admin-ajax.php'};
            var data = {
                action: 'uploading-new-image',
                files: $(this).serialize()
            };

            jQuery.post(
                    siteSettings.ajaxurl,
                    data,
                    function(response) {
                        $("#error").html(response);
                    });

            e.preventDefault();

        });

    });
});

Here is the HTML:

<form id="fff" method="POST" action="process.php" enctype="multipart/form-data">
    <input type="file" name="filetoupload" id="upld" />
</form>

View on JSFIDDLE

Amit Joki · Accepted Answer · 2014-04-27 13:56:32Z

3

You are not triggering it. You are just adding a handler for submit handler.

Add .submit() or .trigger('submit') to the code.

$(document).ready(function () {
    $("#upld").on('change', function () {
        console.log('going to run submit function');
        $('#fff').submit(function (e) {
            console.log('submitting function executed')
            var siteSettings = {
                "ajaxurl": '/filer/check/wp-admin/admin-ajax.php'
            };
            var data = {
                action: 'uploading-new-image',
                files: $(this).serialize()
            };

            jQuery.post(
            siteSettings.ajaxurl,
            data,

            function (response) {
                $("#error").html(response);
            });

            e.preventDefault();

        }).submit();  //  <-------- Added submit here.
    });
});

answered Apr 27, 2014 at 13:56

Amit Joki

59.4k7 gold badges80 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jade Over a year ago

thankyou, one more question please, how do I parse $_FILES data of the uploaded file via ajax so that I can deal with it on the Server side PHP script file?

Amit Joki Over a year ago

@Jade, sorry! I don't know php :(

Collectives™ on Stack Overflow

Issue with submitting form via jQuery AJAX

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related