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: stackoverflow.com/questions/2320069/jquery-ajax-file-upload — EternalHour
– EternalHour, Commented Mar 17, 2015 at 9:14
use this js for uploading image via ajax jsfiddle.net/by3yh99t — Bugfixer
– Bugfixer, Commented Mar 17, 2015 at 9:19

Community · Accepted Answer · 2017-05-23 11:56:52Z

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, 2017 at 11:56

CommunityBot

11 silver badge

answered Mar 17, 2015 at 8:57

Christian

9372 gold badges13 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

sending form via ajax, html node select for data sending

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related