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";
 }

First step: check what `fd` actually contains on the client side, using your browsers development console. Second step: check what `$_POST` actually contains on the server side, dumping it into a log file. — arkascha, Mar 27 '16 at 19:55
From what I can tell, the form-data is not being sent client side. I don't see anything referencing any of the variables (other than uploaded filed) in the request payload. — Jon Paul Hart, Mar 27 '16 at 20:27
OK, if so you know where to dig deeper: apparently that `FormData()` does not do what you expect. I have no idea what that actually, but you will. So third check what the selector returns and fourth check that function. — arkascha, Mar 27 '16 at 20:29

score 2 · Answer 1 · answered Mar 27 '16 at 20:51

2

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

answered Mar 27 '16 at 20:51

NOBrien

459
3
7

I am an idiot haha. I can't believe I didn't see that. I was sure I had named them. Thank you. – Jon Paul Hart Mar 28 '16 at 06:07
@JonPaulHart - no problem. I have chased this demon bug an embarrassing number of times :).. – NOBrien Mar 28 '16 at 14:36

Fernando Torres · Answer 2 · 2016-03-27T21:17:19.010

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

Create a php file where you will catch all the values includind the files.
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>

FormData not sending values through AJAX POST using Jquery

2 Answers2