CODEWITHSUNDEEP
javascriptjqueryajax
chuckd
chuckd

Reputation: 14610

How to trigger my jquery form submit

Right now the form is submitting but it's using the default url, I want it to use the form submit event in my javascript so that it passes the .ajaxSubmit() options.

Here is the javascript.

$('#selectedFile').change(function() {
    var id = $('#selectedFile').data('id');
    var options = {
        target: '#output',    
        beforeSubmit: showRequest,  
        success: showResponse,  

        url: '/ManageSpaces/UploadImage',
        data: { id: id },
        type:      'post'        
       
    };

    $("#imageform").trigger('submit'); // I want this to trigger the submit below! Not the default form submit.

    
    $('#imageform').submit(function () {
         
        $(this).ajaxSubmit(options);
        
        return false;
    });
});

<form id="imageform" enctype="multipart/form-data">
            <input type="file" id="selectedFile" style="display: none;" data-id='@Model.YogaSpaceId' />
            <input type="button" value="Add Photos" class="btn" id="pictureupload" />
        </form>

action method

[HttpPost]
    public ActionResult UploadImage(int id, HttpPostedFileBase image)
    {
        //do some stuff to save the image

        return Json("Saved");
    }

Upvotes: 0

Views: 152

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388446

You are triggering the submit before the submit handler is registered, One option in your case is to call the ajaxSubmit directly in the change handler without using a submit handler as given below.

$('#selectedFile').change(function () {
    var id = $('#selectedFile').data('id');
    var options = {
        target: '#output',
        beforeSubmit: showRequest,
        success: showResponse,

        url: '/ManageSpaces/UploadImage',
        data: {
            id: id
        },
        type: 'post'

    };

    $('#imageform').ajaxSubmit(options);
});

Another option is to register the submit handler outside of the change handler like below and in the change handler just trigger the submit

$('#selectedFile').change(function () {
    $("#imageform").trigger('submit'); // I want this to trigger the submit below! Not the default form submit.
});

$('#imageform').submit(function () {
    var id = $('#selectedFile').data('id');
    var options = {
        target: '#output',
        beforeSubmit: showRequest,
        success: showResponse,

        url: '/ManageSpaces/UploadImage',
        data: {
            id: id
        },
        type: 'post'

    };
    $(this).ajaxSubmit(options);
    return false;
});

Upvotes: 1

Related Questions