FormDataオブジェクトが空の理由

Question

以下のコードを実行すると、フォームが複雑すぎるため、空のFormDataが表示されます。コードをどのように変更すればよいですか？

フォーム、入力、ラベルなどのタグを使用してフォームを構築すると、FormDataオブジェクトが空にならないようです。たぶん私は手動で行を構築し、XMLHttpRequest経由で送信することができますが、より良い方法がありますか？

お手数ですが、よろしくお願いいたします。

HTML：

<form enctype="multipart/form-data" id="inquiry" name="inquiry" method="post" role="form"><!--action="processData.php"--> 
    <div class="row"> 
     <div class="form-group"> 
      <div class="col-md-6"> 
       <label for="name">Your name</label> 
       <input type="text" class="form-control" id="name" maxlength="100"> 
      </div> 
      <div class="col-md-6"> 
       <label for="email">Your email address</label> 
       <input type="text" class="form-control" id="email" maxlength="100"> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="form-group"> 
      <div class="col-md-12"> 
       <label for="subject">Subject</label> 
       <input type="text" class="form-control" id="subject" maxlength="100"> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="form-group"> 
      <div class="col-md-12"> 
       <label for="message">Your message</label> 
       <textarea class="form-control" id="message" maxlength="5000"></textarea> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-12"> 
      <button id="post-message" type="submit"> 
       <span>Send Message</span> 
      </button> 
     </div> 
    </div> 
</form> 

JS：あなたは、すべてのフォーム要素に名前を追加する必要があります

'use strict'; 
var Contact = function() { 
    var sendData = function() { 
    var xmlhttp = new XMLHttpRequest() ; 
    var url = "/php/processData.php"; 
    var inquiryForm = document.forms.namedItem("inquiry"); 
    var FD = new FormData(inquiryForm); 
    xmlhttp.open("POST", url , true); 
    xmlhttp.onreadystatechange = function() { 
     if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
     var returnData = xmlhttp.responseText ; 
     } 
    }; 
    xmlhttp.send(FD); 

    for (var [key, value] of FD.entries()) { 
     console.log(key, value); 
    } 
    }; 

    var windowLoadHandler = function() { 
    window.addEventListener("load",function(){ 
     var inquiryForm = document.getElementById("inquiry"); 
     inquiryForm.addEventListener("submit",function(event){ 
     event.preventDefault(); 
     sendData(); 
     }); 
    }); 
    }; 

    return { 
    init : function(){ 
     windowLoadHandler(); 
    } 
    }; 
}(); 

Answer 1

は、そうでない場合は、フォームで送信されません。

ここで、それはあなたがおそらく生命維持を望んでいたContact.init()を呼んでいるところで

'use strict'; 
 
var Contact = (function() { 
 
    var sendData = function(form) { 
 
    var xmlhttp = new XMLHttpRequest(); 
 
    var url = "/php/processData.php"; 
 
    var FD = new FormData(form); 
 

 
    xmlhttp.open("POST", url, true); 
 

 
    xmlhttp.onreadystatechange = function() { 
 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
 
     var returnData = xmlhttp.responseText; // note, async, can't be used outside this function 
 
     } 
 
    } 
 

 
    xmlhttp.send(FD); 
 
    console.log() 
 
    for (var pair of FD.entries()) { 
 
     console.log(pair[0] + ', ' + pair[1]); 
 
    } 
 
    } 
 

 
    var windowLoadHandler = function() { 
 
    var inquiryForm = document.getElementById("inquiry"); 
 

 
    inquiryForm.addEventListener("submit", function(event) { 
 
     event.preventDefault(); 
 
     sendData(this); 
 
    }); 
 
    } 
 

 
    return { 
 
    init: function() { 
 
     windowLoadHandler(); 
 
    } 
 
    }; 
 
})(); 
 

 
$(document).ready(function() { 
 
    Contact.init(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form enctype="multipart/form-data" id="inquiry" name="inquiry" method="post" role="form"> 
 
    <!--action="processData.php"--> 
 
    <div class="row"> 
 
    <div class="form-group"> 
 
     <div class="col-md-6"> 
 
     <label for="fullname">Your name</label> 
 
     <input type="text" class="form-control" id="fullname" name="fullname" maxlength="100"> 
 
     </div> 
 
     <div class="col-md-6"> 
 
     <label for="email">Your email address</label> 
 
     <input type="text" class="form-control" id="email" maxlength="100" name="email"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="form-group"> 
 
     <div class="col-md-12"> 
 
     <label for="subject">Subject</label> 
 
     <input type="text" class="form-control" id="subject" maxlength="100" name="subject"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="form-group"> 
 
     <div class="col-md-12"> 
 
     <label for="message">Your message</label> 
 
     <textarea class="form-control" id="message" maxlength="5000" name="message"></textarea> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
     <button id="post-message" type="submit"> 
 
       <span>Send Message</span> 
 
      </button> 
 
    </div> 
 
    </div> 
 
</form>

を動作させるためにいくつかの変更とのコードです。
nameは常に変数の名前が悪く、要素の名前/ IDが悪い場合もあります。window.nameが既に存在することに注意してください。

フォームがイベントハンドラから関数にどのように渡されたかを参照してください。