1

I simply want to use ajax to submit a form with an image from a phone.

If I use the below code as a simple function - the form data is not passed. If I use the code as is - it works but the user has to click the submit button.

How do I either pass the FormData properly to a simple $.ajax({}); submit?

OR

How do I trigger the code below when a picture is taken or selected?

I have this - it works fine when user clicks submit:

// how do I trigger this when image file is selected?
$("#Upload_Form").submit(function(e){

        e.preventDefault();

        // OR - how do I get FormData with image without using: '$("#Upload_Form").submit(function(e)'
        var formData = new FormData(this);

        $.ajax({
           // POST details are here etc.
        });
    });
Improve this question
1
  • so you basically want the form to be submitted automatically when you select a file for upload? Commented Jun 22, 2018 at 1:55

1 Answer 1

Reset to default
0

Bind the change event for the file input like below and then trigger the submit event of the form or make an ajax call right away with the FormData see below demo.

If you want to know how to submit image using FormData and ajax see this answer

$("#my-form").on('submit', function(e) {

  e.preventDefault();

  // OR - how do I get FormData with image without using: '$("#Upload_Form").submit(function(e)'
  var formData = new FormData(this);
  console.log("sending Ajax call now");
  $.ajax({
    // POST details are here etc.
  });
});


$("#my-file").on('change', function() {
  //you can either trigger the form submit here
  var form = $("#my-form");
  $("#my-form").submit();

  //OR
  //use this to send the ajax call to upload the image
  // var form=$("#my-form")[0];
  // var formData = new FormData(form);

  // $.ajax({
  //     type: "POST",
  //     url: 'your/url',
  //     data: formData,
  //     processData: false,
  //     contentType: false,
  //     success: function (data) {
  //         console.log("SUCCESS : ", data);
  //     },
  //     error: function (e) {
  //         console.log("ERROR : ", e);
  //     }
  // });


})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my-form" enctype="multipart/form-data">
  <input type="file" name="my-file" id="my-file" />
  <input type="submit" name="submit" value="submit" />
</form>

Update

Note: if you want to use an ajax call to send the formData you need to set the processData and contentType to false. contentType: false only available from jQuery 1.6 onwards.

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

4 Comments

I did try 'document.getElementById("GROOMING_Upload_Form").submit();' is that not the same thing as your var form=$("#my-form"); form.submit(); ? It did not pass the form as data. As well - are '$("#my-form").on('submit', function(e)' and '$("#Upload_Form").submit(function(e)' not the same?
if you used the above parameters that I added in the answer there is a mistake in the data parameter data: data, should be data: formData, i just updated the code. @Stnfordly
yes both are valid,but there is a mistake when using jquery we need to specify $("#my-form")[0], which i was missing, you just need to trigger the submit, and $("#my-form").on('submit', function(e) and $("#Upload_Form").submit(function(e) are same, given that the selector you are using is the form's id, other than that the .submit(function(e){}) is just a shorthand for the .on('submit',function(){}) and what do you mean by it did not pass the formdata @Stnfordly , kindly add your complete code how are you sending the ajax call
All I mean is - when I try calling 'document.getElementById("GROOMING_Upload_Form").submit()' - for some reason 'FormData(this)' does not seem to grab the form values and image file. There is no additional code - 'document.getElementById("GROOMING_Upload_Form").submit()' - just something I tried. I will try your answer as soon as I can. Thanks

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.