Equivalent code without the library

Question

I used a tutorial to get the following ajax code. In the tutorial, they have the library jquery.form.js. Here is the code:

function onsuccess(response,status){
    $("#onsuccessmsg").html(response);
        alert(response);
    }
    $("#uploadform").on('change',function(){
        var options={
        url     : $(this).attr("action"),
        success : onsuccess
    };
    $(this).ajaxSubmit(options);
        return false;
});

What if I don't want to have jquery.form.js implemented. What would be the equivalent code with normal ajax (without the library)?

Update

I tried the following code:

$("#uploadform").on('change',function(){
                $.ajax({
                    url: $(this).attr("action"),
                    context: document.body,
                    success: function(){
                        $("#onsuccessmsg").html(response);
                        alert("asdf");
                    }
                });
                return false;
            });

and it doesn't do anything now.

That jquery.form.js library is very useful. I would recommend using it from the get go because you'll probably end up using it later on in your project. — Darren Gourley, Nov 11 '15 at 06:42
Thanks, but for now, I don't want to use it. Do you know the equivalent ajax code? — Horay, Nov 11 '15 at 06:46

score 1 · Accepted Answer · edited May 23 '17 at 12:09

1

It would be something more like: (apologies for the formatting, I'm on my mobile)

            $("#uploadform").on('submit',function(e){
                e. preventDefault() ;
                var formData = new FormData($(this)[0]);

                $.ajax({
                    url: $(this).attr("action"),
                    context: document.body,
                    data: formData, 
                    type: "POST",  
                    contentType: false,
                    processData: false,
                    success: function(response, status, jqxhr){
                        $("#onsuccessmsg").html(response);
                        alert("asdf");
                    }
                });
                return false;
            });

The data var will need to be built up manually by you by running through the form fields. You may also want to check out jquery post, which is a shorthand way of writing the above.

You can use this previously answered question to get the form data that you need to pass in to the ajax data field:

How can I get form data with Javascript/jQuery?

It's also worth noting that if you are posting a file from your form, your form must have enctype="multipart/form-data". When submitting your form using ajax you need to set contentType: false, processData: false. See this post for reference.

I have updated the code snippet above to reflect this.

If this has answered your question please mark it as the correct answer.

edited May 23 '17 at 12:09

Community

1
1

answered Nov 11 '15 at 06:51

Darren Gourley

1,798
11
11

Thanks you very much! I'm using the php file in this question: http://stackoverflow.com/questions/33640571/upload-image-to-imgur-using-ajax How do I fill in "data"? – Horay Nov 11 '15 at 06:54
Thats a whole other question that you'll need to post separately. If this solution worked for posting the form asynchronously please accept the answer. Thanks. – Darren Gourley Nov 11 '15 at 06:56
Ok. Thank you! 1 more question. In the code I posted in the question, at the `onsuccess function`, there are 2 arguments. `function onsuccess(response,status){...` How can I get those? – Horay Nov 11 '15 at 06:59
There are 3: Anything data, String textStatus, jqXHR jqXHR. You just place 3 variable names in the success function. They can be named anything. They will be populated automatically for you and can be used in the scope of the success function. – Darren Gourley Nov 11 '15 at 07:05
Nothing happens when I upload an image. (I removed "data" because I didn't know what to insert in it.) – Horay Nov 11 '15 at 07:10
You'll need the data part, it's telling the ajax post what to submit. Without it, you're not submitting anything. This is one of the many reasons the library you don't want to use is really useful. – Darren Gourley Nov 11 '15 at 07:13

Equivalent code without the library

1 Answers1