Jquery/Ajax Form Submission (Enctype="Multipart/Form-Data" ). Why Does 'Contenttype:False' Cause Undefined Index in PHP

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

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);

Laravel Call to a member function storeAs() on null while using the enctype= multipart/form-data tag on my blade form

The Error Is Showing To me 419 Page Expired Because You Don't Add

@csrf In Your Blade

Or You Can Add <input value='csrf_token()' hidden>

Data not sending to php JS/FormData/AJAX using PHP

You need to assign formData inside the submit handler, so it gets the values after the user has submitted the form.

$(document).ready(function() {
  $('#image_form').submit(function(e) {
    e.preventDefault();
    let formData = new FormData($('#image_form')[0]);
    formData.append("message", $('#messageInput').val());

    $.ajax({
      url: "https://example.com/test.php",
      type: "POST",
      data: formData,
      contentType: false,
      processData: false,
      success: function(status) {
        $('#result').append(status);

      }
    });
  });
});

undefined index user when submitting form by ajax

The names in your form are like name="data[User][first_name]", but you don't have the data or User properties in the data: option in AJAX. It should be:

data: {
    data: {
        User: {
            first_name: first_name,
            last_name: last_name,
            mobile: mobile
        }
    }
}

Get rid of the processData: false and contentType: false options. These should only be used when sending a FormData object as the data: option. processData: false prevents $.ajax from converting the data: object to a URL-encoded string in the POST data.

There also doesn't seem to be any reason for async: false. Synchronous AJAX is generally a bad idea and is deprecated.

Uploading both data and files in one form using Ajax?

The problem I had was using the wrong jQuery identifier.

You can upload data and files with one form using ajax.

PHP + HTML

<?php

print_r($_POST);
print_r($_FILES);
?>

<form id="data" method="post" enctype="multipart/form-data">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <input name="image" type="file" />
    <button>Submit</button>
</form>

jQuery + Ajax

$("form#data").submit(function(e) {
    e.preventDefault();    
    var formData = new FormData(this);

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });
});

Short Version

$("form#data").submit(function(e) {
    e.preventDefault();
    var formData = new FormData(this);    

    $.post($(this).attr("action"), formData, function(data) {
        alert(data);
    });
});

Jquery/Ajax Form Submission (Enctype="Multipart/Form-Data" ). Why Does 'Contenttype:False' Cause Undefined Index in PHP