Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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 a JQuery Upload Plugin in such a way, that after choosing a file with filechose_button I can enable the upload_button and send all input fields and file(s) using AJAX, not like it works now just reloading the page after a POST request.

the js for upload is:

$(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 the data not using AJAX

share|improve this question
1  
You can use fileupload to submit both fileupload and additional form data: github.com/blueimp/jQuery-File-Upload/wiki/… – mccannf Apr 28 at 21:15
:) I came from that page. I wrote this code after reading that manual, but I have a problem, that the form will be sent synchronously, not as AJAX. The data.submit(); executes not via AJAX – static Apr 28 at 21:20
1  
Instead of creating fileupload against an input field, you should wrap your inputs in a form and create fileupload against the id of that form. – mccannf Apr 28 at 21:57
already tried, the same effect... – static Apr 28 at 21:58
1  
Instead of data.submit(); you can do $(this).fileupload('send', data); – mccannf Apr 28 at 22:05
show 3 more comments

1 Answer

up vote 0 down vote accepted

The problem was the default behavior of the <button> element of the form. The removing the attribute type="submit" does not change anything. So instead of triggering my own function, the button send the form via normally POST request.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.