Is there a way to solve input fields not being sent to server via ajax? This isn't a duplicate question

Question

I am trying to send the input fields title and caption, but it isn't being sent to the php processing file upload.php the html. I am getting no indication of any errors when I use console.log The HTML

<div id="container">
    <form id="myform" enctype="multipart/form-data" method="POST">
        <div class="textInput">
            <input type="text" id="title" placeholder="title">
        </div>
        <div class="textInput">
            <input type="text" id="caption" placeholder="caption">
        </div>                   
        <div class="textInput">
            <input type="file" name="file" id="myFile">
        </div>
        <button type="submit" id="btn" value="Submit">Submit</button>
        <div id="message">Form Submitted</div>
    </form>
</div>

The Jquery

$(document).ready(function(){
        $('#btn').click(function (e) {
       e.preventDefault();
       var title = $('#title').val()
       var caption = $('#caption').val()
       let files = $('#myFile').prop('files')[0];
       
       $.ajax({
            url: 'upload.php',
            method: 'post',
            data: {title: 'title', caption: 'caption', file: 'file'},
            cache: false,
            contentType: false,
            processData:false,
            success: function(response){
                if (response != 0){
                    alert('success');
                } else {
                    alert('error');
                }
             },
            });          
       });
    })

The php

<?php
if (isset($_FILES['file']) && isset($_POST['title']) && isset($_POST['caption'])) 
{
    $title = $_POST['title'];
    $caption = $_POST['caption'];

    // this bit does work as I've tried the "if" statement with || instead of &&, but the title and caption isn't being sent regardless
    }
} else {
    echo 'Please choose a file and or enter title and or caption';
}

Yet, if I do this with the PHP if statement,

if (isset($_FILES['file']) || isset($_POST['title']) || isset($_POST['caption']))

there is an error message stating that

$title = $_POST['title'];
$caption = $_POST['caption'];

are undefined variables in the php file, yet the file does upload

Barmar · Accepted Answer · 2021-03-18T00:46:54.820

If you want to submit a plain object, you can't use processData: false, since jQuery won't serialize the object for you with that option. You also can't use contentType: false because it needs to send Content-type: application/w-www-form-urlencoded.

The values in the data object need to be the variables containing the form values, not string literals.

You can't send a file upload in a plain object, so remove file: file from the object.

$.ajax({
  url: 'upload.php',
  method: 'post',
  data: {
    title: title,
    caption: caption
  },
  success: function(response) {
    if (response != 0) {
      alert('success');
    } else {
      alert('error');
    }
  },
});

cache: false is unnecessary in POST requests, they're never cached.

If you want to include the file upload, you need to use FormData, not a plain object.

let formdata = new FormData();
formdata.append('title', $("#title").val());
formdata.append('caption', $("#caption").val());
formdata.append('file', $('#myFile').prop('files')[0]);
$.ajax({
  url: 'upload.php',
  method: 'post',
  data: formdata,
  contentType: false,
  processData:false,
  success: function(response) {
    if (response != 0) {
      alert('success');
    } else {
      alert('error');
    }
  },
});

Is there a way to solve input fields not being sent to server via ajax? This isn't a duplicate question

1 Answers1