Question

我正在尝试使用jquery通过ajax发送我的表单并通过phpMailer发送输入值，但它无法正常工作。电子邮件正在发送，但值为空。它之前有用，但我不知道发生了什么变化。

这是我的表格：

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

这是我的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();  
            }
        }
        }
);


 }

我的php代码：

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

确保为表单元素指定name属性。没有名字的元素不会被提交。

Answer 2

尝试从输入中提取单独的值。我的意思是，你可以这样做：

创建一个php文件，您将捕获包含文件的所有值。
在index.html或index.php中使用html的表单中，将表单和jquery放到：
```
$('#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"; } ？＆GT;

AND FINALAYY，在您的HTML表单中，请在每个输入中写下姓名

    <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不使用Jquery通过AJAX POST发送值

2 个答案: