How to submit form to an other page using jQuery, Ajax with out leaving my page

Question

I want to submit a multipart/form-data form without leaving my page or reloading using jQuery and AJAX. When I submit it with PHP only it does the job well but leaves the page.

HTML:

<form  action="" id="myform" method="POST" class="myform" enctype="multipart/form-data">
<input type="file" id="image" name="file">
<input  border="4" type="submit" value="submit"  id="sumit" name="submit"  class="button" />

jQuery:

$(function() {
   $('.myform').submit( function() {
        $.ajax({
             url    : 'c_create.php',
            type    : 'POST',
            data    : formdata(),       
            success : function( data ) {
                         alert('ok');       
                      },
            error   : function(){
                         alert('error');
                      } 
        });

        return false;
    });
});

Any help will be greatly appreciated. Thanks in advance. :)

Either submit your form in an iframe, or send the file via ajax. This has been covered many times on SO. Use the search box or google for more info. — Ray Nicholus, Jul 03 '13 at 02:39

score 1 · Accepted Answer · edited Jul 03 '13 at 12:54

I would recommend to use a plugin because the uploading process is quite messy. Especially different browsers have slight differences which makes the code update and maintenance hard. I have tested https://github.com/Widen/fine-uploader and it works well.

$(function() {
    var uploader = new qq.FineUploader({

        element : $('#selectImportFile')[0],
        request: {
            // path to server-side upload script
            // url of the server-side upload script, should be on the same 
            endpoint : 'api/docs',
            // additional data to send, name-value pairs
            params : {}
        },
        // validation    
        validation: {
            // ex. ['jpg', 'jpeg', 'png', 'gif'] or []
            allowedExtensions : [ 'xlsx', 'docx' ],
            // each file size limit in bytes
            // this option isn't supported in all browsers
            sizeLimit : 0, // max size   
            minSizeLimit : 0, // min size
        },
        // set to true to output server response to console
        debug : true,

        // events
        callbacks: {
            // you can return false to abort submit
            onSubmit : function(id, fileName) {
                qq.log('submit');
            },
            onProgress : function(id, fileName, loaded, total) {
                qq.log('onprogress');
            },
            onComplete : function(id, fileName, responseJSON) {
                qq.log('completed');
                qq.log('id: ' + id);
                qq.log('fileName: ' + fileName);
                qq.log('responseJSON: ' + responseJSON);
            },
            onCancel : function(id, fileName) {
            },
            onError : function(id, fileName, xhr) {
                qq.log('error');
            }
        },
        showMessage : function(message) {
            qq.log('Server error: ' + message);
        }

    });

});

score 0 · Answer 2 · answered Jul 02 '13 at 21:51

0

try to use preventDefault:

$(function(){
   $('.myform').submit( function(event) {
      event.preventDefault();
      ....

or use 'submit button' instead of '.myform':

$('#sumit').click(function(event){
    event.preventDefault();
    ...

answered Jul 02 '13 at 21:51

mgraph

15,238
4
41
75

shows popup'ok' but does'nt upload the image? – Oskar Jul 03 '13 at 10:22

score 0 · Answer 3 · edited May 23 '17 at 12:23

You have to serialize the data of the form,

and also do a preventDefault(), so the submit button doesn't actually do a reload.

$(function(){

  $('.myform').submit( function(e) {
    e.preventDefault();
    var formData = $(this).serialize(); 
    $.ajax({
         url    : 'c_create.php',
        type    : 'POST',
        cache: false,
        contentType: 'multipart/form-data',
        data    : formData,       
        success : function( data ) {
                     alert('ok');       
                  },
        error   : function(){
                     alert('error');
                  } 
    });

    return false;
});
});

Although multi-part forms can be a bit tricky with ajax.

Heres some further help on the matter...

jQuery AJAX 'multipart/form-data' Not Sending Data?

Does'nt work for me, I tried also the link, but with out success. — Oskar, Jul 03 '13 at 10:02

score -1 · Answer 4 · answered Jul 02 '13 at 22:10

-1

In other words, $.ajax(); cannot submit a multipart/form-data it's only going to submit the data but not going to submit the file along, you can try using dojo.form.uploader.

answered Jul 02 '13 at 22:10

Stanley Amos

222
2
8

I am not allowed to use plusgins. I deside and recomend for any one to use jQuery and ajax for string data and serverside script (php,jsp etc ) for file upload. – Oskar Jul 04 '13 at 07:25
It'll be more better if you can use a plugin for this issue! – Stanley Amos Jul 04 '13 at 09:03

How to submit form to an other page using jQuery, Ajax with out leaving my page

4 Answers4