sending form via ajax, html node select for data sending

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 ?

Seems that you are uploading files, and if that is true it is not as straight forward and cannot be done directly with AJAX. But this should be what you need: http://stackoverflow.com/questions/2320069/jquery-ajax-file-upload — EternalHour, Mar 17 '15 at 09:14
use this js for uploading image via ajax https://jsfiddle.net/by3yh99t/ — Bugfixer, Mar 17 '15 at 09:19

score 0 · Accepted Answer · edited May 23 '17 at 11:56

0

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.

edited May 23 '17 at 11:56

Community

1
1

answered Mar 17 '15 at 08:57

Christian

927
2
13
22

sending form via ajax, html node select for data sending

1 Answers1