-5

My form is set with method=post and enctype="multipart/form-data" with regular submitting form information and photo were updated but when I want to use the Ajax ,everything have been inserted but not my photo!! What is the solution ?

$("#course-frm").submit(function(event){
event.preventDefault();
var formID = 'course-frm';
var form = $("#"+formID+'-container'+" form");
const formData = new FormData(this);
$.ajax({
    url: event.target.action,
    type: event.target.method,
    data: formData,
    cache: false,
    contentType: false,
    enctype: 'multipart/form-data',
    processData: false,
    success: function (data) {
        if(data == 'success'){
            sweetAlertShow('عملیات ثبت با موفقیت انجام شد', 'The operation was Successful', 'success');
            form.trigger('reset');
            $("#course-frm-container").load(" #course-frm-container");
        }else if(data == 'unsuccess'){
            sweetAlertShow('امکان ثبت وجود ندارد', 'The operation was Unsuccessful', 'error');
        }
    },
    error: function(xhr){
        var data = xhr.responseJSON;
        if($.isEmptyObject(data.errors) == false) {
            $.each(data.errors, function (key, value) {
                $('#'+formID +'-'+ key)
                    .closest('.form-group')
                    .addClass('has-error')
                    .append('<span class="help-block">' + value + '</span>');
            });
        }
    }
});

});

Majid
  • 13
  • 6

1 Answers1

0

You need to create a form data object. In the ajax function, set processData to `false.

Because data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". If you want to send a DOMDocument, or other non-processed data, set this option to false.

JS

  $("form").submit(function(evt){    
      evt.preventDefault(); //prevent refresh
      const formData = new FormData(this); // you need to create a FormData obj to be able to send files
   $.ajax({
       url: 'upload-my-files', //change this to your url
       type: 'POST',
       data: formData, //put formData as body data
       cache: false,
       contentType: false,
       enctype: 'multipart/form-data',
       processData: false,
       success: function (data) {
         console.log(data);
       }
   });
 });

References:

https://developer.mozilla.org/en-US/docs/Web/API/FormData

http://api.jquery.com/jquery.ajax/

Adis Azhar
  • 1,022
  • 1
  • 18
  • 37
  • hi buddy. your solution works.thanks. but I want to use one specific method for every forms which is included the photos , so what should I do ? actually I need dynamic method for all of my forms with photo. – Majid Feb 02 '19 at 08:38
  • It would be appreciated to accept my answer if it helped. Responding to your comment, "one specific method", do you need one method for each forms? You can set an id on each form. – Adis Azhar Feb 02 '19 at 09:20
  • You can ask a seperate question if the current question has been adequately answered. Please show some code next time, so others will be eased to help you out. – Adis Azhar Feb 02 '19 at 09:22
  • Hi. let me tell you some description : I have two kind of forms 1) with photo 2) without photo. my forms without photo is dynamic right now just with one method. but for this block code that you have written for me I couldn't use it for more that one form because I had to pass a form-id at the beginning of it and if I don't send any form-id it runs for all of my forms. so it works just fort that specific form. Could I tell you my mean ? – Majid Feb 03 '19 at 10:44
  • I do not understand what you mean. Edit your question and post the code there. – Adis Azhar Feb 03 '19 at 11:48
  • I put the codes. Would you please tell me how can I make this method dynamic ? I want to use this function for any forms in my project that it has photo but not other forms because I made it before :D. This block code is working just for my course form with ID = "course-frm" right now. thank you for your attention buddy. – Majid Feb 05 '19 at 12:09
  • On the forms you need you can add class ajax-forms, and then set a prop containing the url of each form in the form tag, e.g url-prop='post-form.php'. Then inside the ajax function you can retrieve the url by: let url = $(this).attr('url-prop'); and pass that inside the ajax properties. – Adis Azhar Feb 05 '19 at 12:34