Jquery submit form on form input type 'file' change

Question

I am submitting a form on the base of image selection, So file input change will submit the form, The issue is that it redirects me back to the same route as i am using laravel,

Jquery Code :

$('#profile-image-upload').change(function(e){

    var profileImageForm = $("#profileImageForm");

    profileImageForm[0].submit(function(e){

        e.preventDefault();
        var file_data = $('#profile-image-upload').prop('files')[0];
        var form_data = new FormData();
        form_data.append('file', file_data);

        $.ajax({
            url: "/freelance/change-profilePic",
            data: form_data,
            type: 'POST',
            success: function (data) {
                console.log('Success');
            },
            error: function (xhr, status, error) {
                console.log('error');
            }
        });
    });
});

HTML :

<div class="profile__img">
    <form id="profileImageForm" method="post" enctype="multipart/form-data">
        <input id="profile-image-upload" class="" name="file" type="file">
    </form>

    <img src="{{asset('freelance/img/demo/people/3.jpg')}}" alt="" id="profile-image">
</div>

Note: var profileImageForm = $("#profileImageForm") returns an array which i have no idea how a form can be an array, So i am submitting form like profileImageForm[0].submit(function(e){}

Got idea why form submit redirecting ?

serdar.sanri · Accepted Answer · 2017-03-08 20:25:21Z

1

You are submitting your form but not listening submit event. form.submit() and form.on('submit', function(){ }) are different. form.submit() will only submit your form and doesn't accept any parameters. So your function in submit is ignored. Instead of using

profileImageForm[0].submit(function(e){ });

use

profileImageForm.on('submit', function(e){
   e.preventDefault();
   //
   // your uploader code goes here;
   //
}).submit();

answered Mar 8, 2017 at 20:25

serdar.sanri

2,2281 gold badge18 silver badges21 bronze badges

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

Comments

Тодор Иванов · Accepted Answer · 2017-03-08 20:17:31Z

0

The problem is probably in your Laravel controller. Please check the return action of your controller.

answered Mar 8, 2017 at 20:17

Тодор Иванов

3674 silver badges19 bronze badges

1 Comment

Gammer Over a year ago

The controller just returns a string.'

Anis D · Accepted Answer · 2017-03-08 20:18:13Z

0

you can prevent this by adding e.stopPropagation()

answered Mar 8, 2017 at 20:18

Anis D

76111 silver badges25 bronze badges

Collectives™ on Stack Overflow

Jquery submit form on form input type 'file' change

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related