How to update a form and submit using jquery and ajax

Question

I am trying to submit a form using Ajax, but my form contains a file field and a text field. The file field fails but the text field work

THE FORM

<form id="page" enctype="multipart/form-data" >
    <input type="text" name="text" id="text">
    <input type="file" name="image" id ="image">
    <button>Submit</button>
</form>

THE JS SCRIPT FOR SUBMISSION

$('#page').validate({
    rules: {
        image:{
            required: true
        },
        text:{
            required: true
        }
    },
    messages: {
        image: {
            required: "required"
        },
        text: {
            required: "required"
        }
    },

    submitHandler : function(){                     
        $.ajax({  
            type: "POST",
            cache:false,  
            url: "finish.html",  
            data: $('#page').serialize(),
            success: function(data) {  
                alert(data);  

            } 

    });
});

Im really new to javascript and jquery, please I want to know where I am going wrong. Thanks for helping.

You might want to check this out - http://abandon.ie/notebook/simple-file-uploads-using-jquery-ajax — Eliel, Sep 02 '14 at 08:55
possible duplicate of [How can I upload files asynchronously with jQuery?](http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery) — pomeh, Sep 02 '14 at 08:58
this question has already been answered here: http://stackoverflow.com/q/166221/827168 — pomeh, Sep 02 '14 at 08:58
Hello, please this is not a duplicate because this question seeks to find how one will validate all input fields in one script including the file field, however the suggesteed duplicate only seeks to validate only the image file without the other input fields. — Akwasi, Sep 02 '14 at 16:27
Haha.. I guess this type of question doesnt have an answer...I have been working on the same thing but nobody has a solution. — George, Sep 02 '14 at 16:53

score 0 · Answer 1 · answered Sep 02 '14 at 09:20

Try this, It may help

<input type="file" name="fileToUpload" id="fileToUpload" />
<input type="button" value="Save" onclick="savepic()" /> 
                      //you can also use event listeners instead of onclick

jQuery Code

<script type = "text/javascript">
    function savepic() {
        //can perform client side field required checking for "fileToUpload" field
        $.ajaxFileUpload({
            url: 'doajaxfileupload.php',
            secureuri: false,
            fileElementId: 'fileToUpload',
            dataType: 'json',
            success: function(data, status) {
                if (typeof(data.error) != 'undefined') {
                    if (data.error != '') {
                        alert(data.error);
                    } else {
                        alert(msg); // returns location of uploaded file
                    }
                }
            },
            error: function(data, status, e) {
                alert(e);
            }
        })
        return false;
} 
</script>

Thanks..but remember I have other fields on the form, how do I validate the other fields aside the file field? — Akwasi, Sep 02 '14 at 16:23
@Akwasi Firstly, Please tell me that the code in answer worked or not. You have client side validation or server side validation?? — xxbinxx, Sep 03 '14 at 05:34
It really doesnt suit what i asked for, i am doing the validation on the client side — Akwasi, Sep 03 '14 at 09:45
@Akwasi so where's the problem, call your validation code just above the $.ajax method — xxbinxx, Sep 03 '14 at 09:49

How to update a form and submit using jquery and ajax

1 Answers1