How to upload file + form data by loading blueimp jQuery file using Ajax, not just POST?

Question

I have a form:

<div class="row-fluid"> <div class="span5 row-fluid" id="description" style="margin-left:0px;"> <div> <label>Title</label> <input class="span12" type="text" placeholder="Title" id="description_title" name="description_title"/> <label>Author</label> <input class="span12" type="text" placeholder="Author" id="description_author" name="description_author"/> <label>Tags</label> <input class="span12" type="text" placeholder="Tags" id="description_tags" name="description_tags"/> <label>Description</label> <textarea class="span12" id="description_textarea" name="description_textarea" rows="5" style="resize:none"></textarea> <div id="buttons" class="row-fluid" style="margin-top: 5px"> <div class="span12"> <span class="span5 btn btn-primary btn-file" id="chose_files_btn" onclick="filechose_button.click()">chose files <input id="filechose_button" type="file" name="fileData" data-url="http://localhost:3001/upload/1234567890"/></span> <button id="upload_button" type="submit" name="upload" class="span5 offset2 btn btn-success" disabled="true" onclick="$('#upload_form').trigger('upload_fired');">upload</button> </div> <!-- span12 --> </div> <!-- buttons --> </div> <!-- well --> </div> <!-- video_description --> </div> <!-- row-fluid --> 

How can I integrate the JQuery download plugin so that after selecting a file using filechose_button I can enable upload_button and send all the input fields and files using AJAX, not the way it works just by reloading the page after a POST request.

js to download:

 $(function () { $('#filechose_button').fileupload({ dataType: 'json', add: function (e, data) { data.context = $('#upload_button'); $('#upload_button').click(function () { data.submit(); }); }, done: function (e, data) { data.context.text('Upload finished.'); } }); }); 

but still it sends data without using AJAX

Answer 1

The problem was the default behavior of the <button> element. Removing the type="submit" attribute does not change anything. So instead of running my own button function, submit the form using a regular POST request.

Answer 2

@Pere: make sure you are not using buttons in your form. I solved this using a div with the bootstrap btn class. This is my javascript code:

 //this should not be a <button></button>, but a div var submitbtn = $("#submitbtn"); //upload an image && form submission $('#avatar').fileupload({ singleFileUploads: true, multipart : true, dataType : 'json', autoUpload : false, url : 'yourEndpoint', type : 'POST', add : function (e, data) { submitbtn.on("click", function () { data.formData = $("#form-activate-user").serializeArray(); data.submit(); }); }, done : function (result) {} }, fail : function (e) {}