Jquery Ajax Form Submission enctype multipart form-data Why does contentType False cause undefined index in PHP

Question

I have been trying to submit a form with enctype  multipart form-data   I have this setting because the form will involve jpeg png uploads once I have figured out the ajax submission for text inputs    the php works fine when referencing the script using action within the form html  the form data seems to be retrieved correctly by the below jquery because the alert line shows  productName Test Name amp productDescription Test Description amp OtherProductDetails  the returned data printed to my HTML by the jquery success function is a php error saying Undefined index  productName removing contentType false fixes the problem    When i google jquery ajax multipart form-data submission  the top hits at least mainly include  contentType false   Please could someone explain the reason to me    http   digipiph com blog submitting-multipartform-data-using-jquery-and-ajax http   hayageek com jquery-ajax-form-submit  Sending multipart formdata with jQuery ajax  The jquery API documentation says  contentType  default   application x-www-form-urlencoded  charset UTF-8   Type  String When sending data to the server  use this content type   Why would we need to set it to false for a multipart form-data submission  When would the false setting be needed at all   Jquery         addProductForm   submit function  event          event preventDefault            grab all form data         var formData     this  serialize             ajax             url   addProduct php             type   POST             data  formData            async  false            cache  false            contentType  false            processData  false            success  function  returndata                      productFormOutput   html returndata                 alert formData                          error  function                    alert  error in ajax form submission                                 return false

User · Answer

Please set your form action attribute as below it will solve your problem      lt form name  addProductForm  id  addProductForm  action  javascript    enctype  multipart form-data  method  post  accept-charset  utf-8  gt    jQuery code       document  ready function              addProductForm   submit function  event               disable the default form submission         event preventDefault              grab all form data           var formData     this  serialize               ajax               url   addProduct php               type   POST               data  formData              async  false              cache  false              contentType  false              processData  false              success  function                      alert  Form Submitted                                error  function                    alert  error in ajax form submission                                       return false

User · Answer

contentType option to false is used for multipart form-data forms that pass files    When one sets the contentType option to false  it forces jQuery not to add a Content-Type header  otherwise  the boundary string will be missing from it  Also  when submitting files via multipart form-data  one must leave the processData flag set to false  otherwise  jQuery will try to convert your FormData into a string  which will fail   To try and fix your issue   Use jQuery s  serialize   method which creates a text string in standard URL-encoded notation   You need to pass un-encoded data when using contentType  false   Try using new FormData instead of  serialize       var formData   new FormData   this  0      See for yourself the difference of how your formData is passed to your php page by using console log       var formData   new FormData   this  0      console log formData      var formDataSerialized     this  serialize      console log formDataSerialized

[php] Jquery/Ajax Form Submission (enctype="multipart/form-data" ). Why does 'contentType:False' cause undefined index in PHP?

Examples related to php

Examples related to ajax

Examples related to forms

Examples related to jquery