FormData not sending values through AJAX POST using Jquery

Question

I am trying to send my form through ajax using jquery and send input values through phpMailer and it is not working. The emails are sending, but the values are blank. It was working before but I don't know what changed.

Here is my form:

<form role="form" id="submissionForm" enctype="multipart/form-data" name="submissionForm" method="post" >

 <div class="form-group has-feedback" id="fnamediv">
    <label class="control-label" for="fname">First Name:</label>
    <input type="text" class="form-control" id="fname" required>
    <span id="fnameglyph" class="glyphicon glyphicon-ok form-control-feedback hidden"></span>
  </div>
  <div class="form-group has-feedback" id="mnamediv">
    <label class="control-label" for="mname">Middle Name:</label>
    <input type="text" class="form-control" id="mname" placeholder="Optional" >
    <span id="mnameglyph" class="glyphicon glyphicon-ok form-control-feedback hidden"></span>
  </div>
   <div class="form-group has-feedback" id="lnamediv">
    <label class="control-label" for="lname">Last Name:</label>
    <input type="text" class="form-control" id="lname" required>
    <span id="lnameglyph" class="glyphicon glyphicon-ok form-control-feedback hidden"></span>
  </div>
  <div class="form-group has-feedback" id="emaildiv">
    <label class="control-label" for="email">Email Address:</label>
    <input type="email" class="form-control" id="email"  required>
    <span id="emailglyph" class="glyphicon glyphicon-ok form-control-feedback hidden"></span>
  </div>
<hr><hr>
<br>
 <div class="form-group has-feedback" id="submissionTitleDiv">
    <label class="control-label" for="submissionTitle">Submission Title:</label>
    <input type="text" class="form-control" id="submissionTitle"  required>
    <span id="subtitleglyph" class="glyphicon glyphicon-ok form-control-feedback hidden"></span>
  </div>
<div class="form-group" id="subTypeDiv">
  <label class="control-label" for="sel1">Submission Type:</label>
  <select class="form-control" id="sel1" required>
    <option style="display:none;" value="default" selected disabled>Select One</option>
    <option value="Short Story">Short Story</option>
    <option value="Poem">Poem</option>
    <option value="Comic">Comic</option>
    <option value="Art">Art</option>
  </select>
</div>
<br>
<label for="file-upload" class="custom-file-upload" id="fileUploadBtn">
    Upload File
</label>
<input id="file-upload" type="file" name="file-upload" accept=".pdf,.tiff,.tif,.jpg,.jpeg" required/>

<br><br><br>
<button type="submit" class="btn btn-danger" id="submitBtn" disabled>Submit</button>
<br>

</form>

Here is my jquery:

function submitForm(){
  var fd = new FormData(document.querySelector("#submissionForm"));
  $.ajax({
  url: "php/process.php",
  type: "POST",
  data: fd,
  processData: false,  // tell jQuery not to process the data
  contentType: false,  // tell jQuery not to set contentType
  success : function(text){
            if (text == "success"){
                formSuccess();
            }
            else{
                formFailure();  
            }
        }
        }
);


 }

And my php code:

require 'PHPMailerAutoload.php';

$name = $_POST["fname"];
$email = $_POST["email"];
$title = $_POST["title"];


$mail = new PHPMailer(); // create a new object
$mail->IsSMTP(); // enable SMTP
$mail->SMTPAuth = true; // authentication enabled
$mail->SMTPSecure = 'ssl'; // secure transfer enabled REQUIRED for Gmail
$mail->Host = "*****";
$mail->Port = 465; // or 587
$mail->IsHTML(true);
$mail->Username = "example@example.com";
$mail->Password = "password";
$mail->SetFrom("example@example.com");
$mail->Subject = "Poem | ".$title." | ".$fname;
$mail->Body = "Submission:<br><br>From: ".$email;
$mail->AddAddress("test@gmail.com");
$mail->AddAttachment($_FILES['file-upload']['name']);

 if(!$mail->Send()) {
    echo "Mailer Error: " . $mail->ErrorInfo;
 } else {
    echo "success";
 }

Answer 1

Try to extract the values from the inputs for separate. I mean, you can do this:

1. Create a php file where you will catch all the values includind the files.

2. In the form with html in a index.html or index.php, put your form and with jquery to this:

   $('#submitBtn').click(function() {
       $.ajax({
           type:'POST',
           data: new FormData($('#submissionForm')[0]),
           contentType:false,
           cache:false,
           processData:false,
               success:function(send_email) {
                   $('.response').html(send_email)
               }
       });
   });
   

   //phpfile $name = $_POST['fname'].' '.$_POST['mnamediv'].' '.$_POST['lname']; $email = $_POST['email']; $select = $_POST['sel1']; $file1 = $_FILES['file1']; $file2 = $_FILES['file2']; $file1name = $file1['name']; $file2name = $file2['name']; $file1size = $file1['size']; $file2size = $file2['size']; $file1type = $file1['type']; $file2type = $file2['type']; $file1tmp_name = $file1['tmp_name']; $file2nametmp_name = $file2['tmp_name']; $newurlfile1 = $file1tmp_name; //in your hosting or in your folder, create a folder with the name img where you can save all the images catches in your form $savetmpname1 = 'img/'.$file1name; move_uploaded_file($newurlfile1, $savetmpname1); $newurlfile2 = $file2tmp_name; //in your hosting or in your folder, create a folder with the name img where you can save all the images catches in your form $savetmpname2 = 'img/'.$file2name; move_uploaded_file($newurlfile2, $savetmpname2); $mail = new PHPMailer(); // create a new object $mail->IsSMTP(); // enable SMTP $mail->SMTPAuth = true; // authentication enabled $mail->SMTPSecure = 'ssl'; // secure transfer enabled REQUIRED for Gmail $mail->Host = "*****"; $mail->Port = 465; // or 587 $mail->IsHTML(true); $mail->Username = "example@example.com"; $mail->Password = "password"; $mail->SetFrom("example@example.com"); $mail->Subject = "Poem | ".$title." | ".$fname; $mail->Body = "Submission:<br><br>From: ".$email.' to:'.$name; $mail->AddAddress($email); $mail->AddAttachment($savetmpname1); $mail->AddAttachment($savetmpname2); if(!$mail->Send()) { echo "Mailer Error: " . $mail->ErrorInfo; } else { echo "success"; } ?>

AND FINALAYY, IN YOUR HTML FORM, PLEASE WRITE THE NAME IN EACH INPUT

    <form role="form" id="submissionForm" enctype="multipart/form-data" name="submissionForm" method="post" action="file.php">

 <div class="form-group has-feedback" id="fnamediv">
    <label class="control-label" for="fname">First Name:</label>
    <input type="text" class="form-control" id="fname" name="fname" required>
    <span id="fnameglyph" class="glyphicon glyphicon-ok form-control-feedback hidden"></span>
  </div>
  <div class="form-group has-feedback" id="mnamediv" name="mnamediv">
    <label class="control-label" for="mname">Middle Name:</label>
    <input type="text" class="form-control" id="mname" placeholder="Optional" >
    <span id="mnameglyph" class="glyphicon glyphicon-ok form-control-feedback hidden"></span>
  </div>
   <div class="form-group has-feedback" id="lnamediv" name="lnamediv">
    <label class="control-label" for="lname">Last Name:</label>
    <input type="text" class="form-control" id="lname" name="lname" required>
    <span id="lnameglyph" class="glyphicon glyphicon-ok form-control-feedback hidden"></span>
  </div>
  <div class="form-group has-feedback" id="emaildiv">
    <label class="control-label" for="email">Email Address:</label>
    <input type="email" class="form-control" id="email"  name="email" required>
    <span id="emailglyph" class="glyphicon glyphicon-ok form-control-feedback hidden"></span>
  </div>
<hr><hr>
<br>
 <div class="form-group has-feedback" id="submissionTitleDiv">
    <label class="control-label" for="submissionTitle">Submission Title:</label>
    <input type="text" class="form-control" id="submissionTitle"  required>
    <span id="subtitleglyph" class="glyphicon glyphicon-ok form-control-feedback hidden"></span>
  </div>
<div class="form-group" id="subTypeDiv">
  <label class="control-label" for="sel1">Submission Type:</label>
  <select class="form-control" id="sel1" name="sel1" required>
    <option style="display:none;" value="default" selected disabled>Select One</option>
    <option value="Short Story">Short Story</option>
    <option value="Poem">Poem</option>
    <option value="Comic">Comic</option>
    <option value="Art">Art</option>
  </select>
</div>
<br>
<label for="file-upload" class="custom-file-upload" name="file1" id="fileUploadBtn">
    Upload File
</label>
<input id="file-upload" type="file" name="file-upload" name="file2" accept=".pdf,.tiff,.tif,.jpg,.jpeg" required/>

<br><br><br>
<button type="submit" class="btn btn-danger" id="submitBtn" disabled>Submit</button>
<br>

</form>

<div class="response"></div>

Answer 2

Make sure you give your form elements a name attribute. Elements without a name won't get submitted.