通过ajax发送表单，选择html节点进行数据发送

Question

with this code

<script>
// this is the class of the submit button
$(".update_form").click(function() { // changed
    $.ajax({
           type: "POST",
           url: "approve_test.php",
           data: $(this).parent().serialize(), // changed
           success: function(data)
           {
               alert(data); // show response from the php script.
           }
         });
    return false; // avoid to execute the actual submit of the form.
});
</script>

from here Targeting multiple forms to send via ajax (jquery)

user can send data of specific form.

In this example structure is like this

<form id="form1" method="post">
    <input type="text" id="name1" name="value" value="">
    <input type="submit"  class="update_form"  value="Save Changes"> <!-- changed -->
  </form>

 <form id="form2" method="post">
    <input type="text" id="name2" name="value" value="">
    <input type="submit"  class="update_form"  value="Save Changes"> <!-- changed -->
 </form>

In my case I've a bit more complicated Html structure.

<form id="w0" action="/users/new_article" method="post" enctype="multipart/form-data">
<input type="hidden" name="_csrf" value="yeUp">    <div class="form-group field-uploadform-file">
<label class="control-label" for="uploadform-file">File</label>
<input type="hidden" name="UploadForm[file]" value=""><input type="file" id="uploadform-file" name="UploadForm[file]">

<div class="help-block"></div>
</div>

 <!--   <div class="file-input btn btn-block btn-primary"> -->
    <div class="file-input btn btn-block btn-primary">
        + add files
        <input type="file" name="files" id="image_upload">
    </div>
    </form>

I'm monitoring change of #image_upload. But it is not child of form tag, thus I cannot use this code from first example

data: $(this).parent().serialize(), // changed

So my question is how do I must write my code so the form submits ?

Answer 1

You can't submit files as using ajax, as easily as you could submit just text.

You must use XHR.

Here's a solution: How can I upload files asynchronously?

Take note that you're pretty much out of luck if you need to support IE8/9.