2016-03-27 15 views
1

jqueryを使用してフォームを送信し、入力値をphpMailer経由で送信しようとしていますが、動作しません。電子メールは送信されていますが、値は空白です。それは前に働いていたが、私は何が変わったのか分からない。ここでFormDataはJqueryを使用してAJAX POSTで値を送信しません

は私のフォームである:ここでは

<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 = "[email protected]"; 
$mail->Password = "password"; 
$mail->SetFrom("[email protected]"); 
$mail->Subject = "Poem | ".$title." | ".$fname; 
$mail->Body = "Submission:<br><br>From: ".$email; 
$mail->AddAddress("[email protected]"); 
$mail->AddAttachment($_FILES['file-upload']['name']); 

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

最初のステップ:ブラウザ開発コンソールを使用して、クライアント側で 'fd'が実際に何を含んでいるかを確認します。 2番目のステップ: '$ _POST'が実際にサーバ側で何を含んでいるのかを確認し、ログファイルにダンプします。 – arkascha

+0

私が知ることから、フォームデータはクライアント側に送信されていません。リクエストペイロードに変数のいずれかを参照するものは何も表示されません(アップロードされたファイル以外)。 –

+0

OKならば、深く掘り下げるべき場所を知っています:明らかに、 'FormData()'は期待通りのことをしません。私はそれが実際何であるか全く分かりませんが、あなたはそうします。したがって、セレクタが返すものを3番目にチェックし、4番目にその関数をチェックします。 – arkascha

答えて

2

あなたのフォーム要素にname属性を与えることを確認してください。名前のない要素は送信されません。

+0

私はばかな笑です。私はそれを見ていないとは信じられません。私は彼らに名前を付けたと確信していた。ありがとうございました。 –

+0

@JonPaulHart - 問題ありません。私はこの悪魔のバグを恥ずかしい回数回しました:) – NOBrien

-1

入力から値を抽出して別々にしてみます。つまり、あなたはこれを行うことができます:

  1. ファイルを含むすべての値をキャッチするphpファイルを作成します。 index.htmlをindex.phpのかで、HTMLのフォームで
  2. 、自分のフォームを入れて、これに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 = "[email protected]"; $mail->Password = "password"; $mail->SetFrom("[email protected]"); $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"; } >

と最終的に、あなたの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> 
関連する問題