Почему объект FormData пуст

Question

Почему объект FormData пуст

1

Когда я запускаю код ниже, я всегда получаю пустой FormData, из-за слишком сложной формы? Как мне изменить код?

Кажется, если я использую только теги, такие как form, input, label для создания формы, объект 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>

ЯШ:

'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();
    }
  };
}();

Sunny 12 сен. 2017, в 17:24

Источник

0

Почему sendData находится внутри другой функции
brk 12 сен. 2017, в 14:42
0

Обратите внимание, что namedItem не является кросс-браузерным, вы должны использовать именно this в обработчике отправки, чтобы вместо этого перехватить форму. И, как отмечено выше, функция Contact никогда не выполняется, а функция sendData находится внутри нее.
adeneo 12 сен. 2017, в 14:43
0

Contact.init() действительно вызывается до завершения загрузки страницы?
Lennholm 12 сен. 2017, в 14:50
0

@adeneo да, ниже в html, я забыл опубликовать здесь: <script> $ (document) .ready (function () {Main.init (); Contact.init ();}); </ script> .и я пытаюсь использовать var queryForm = document.getElementById ("query"); заменить namedItem, я думаю, тоже не работает ..
Sunny 12 сен. 2017, в 14:56
0

Так вы используете jQuery? Почему вы делаете это так сложно?
adeneo 12 сен. 2017, в 14:58
0

@Mikael Lennholm, я так думаю, потому что я также добавил некоторые функции console.log, чтобы узнать, где останавливается код, который здесь удален.
Sunny 12 сен. 2017, в 15:00
0

@adeneo какой-то старый код jQuery, но я хочу, чтобы js сделал это здесь? Вы имеете в виду, что я должен просто использовать Form.submit (), чтобы сделать вещи менее сложными?
Sunny 12 сен. 2017, в 15:04
0

Боже мой Это действительно очень очевидно, но ни один из ваших элементов формы не имеет name . Если вы хотите, чтобы они были отправлены, им нужно имя.
adeneo 12 сен. 2017, в 15:21

Показать ещё 6 комментариев

Теги:

javascript

1 ответ

Ещё вопросы

Почему sendData находится внутри другой функции
Обратите внимание, что namedItem не является кросс-браузерным, вы должны использовать именно this в обработчике отправки, чтобы вместо этого перехватить форму. И, как отмечено выше, функция Contact никогда не выполняется, а функция sendData находится внутри нее.
Contact.init() действительно вызывается до завершения загрузки страницы?
@adeneo да, ниже в html, я забыл опубликовать здесь: <script> $ (document) .ready (function () {Main.init (); Contact.init ();}); </ script> .и я пытаюсь использовать var queryForm = document.getElementById ("query"); заменить namedItem, я думаю, тоже не работает ..
Так вы используете jQuery? Почему вы делаете это так сложно?
@Mikael Lennholm, я так думаю, потому что я также добавил некоторые функции console.log, чтобы узнать, где останавливается код, который здесь удален.
@adeneo какой-то старый код jQuery, но я хочу, чтобы js сделал это здесь? Вы имеете в виду, что я должен просто использовать Form.submit (), чтобы сделать вещи менее сложными?
Боже мой Это действительно очень очевидно, но ни один из ваших элементов формы не имеет name . Если вы хотите, чтобы они были отправлены, им нужно имя.

adeneo · Accepted Answer · 2017-09-12T12-57-00.000Z

Вам нужно будет добавлять имена ко всем элементам формы, иначе они не будут отправлены с формой.

Здесь код с некоторыми изменениями, чтобы заставить его работать

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

Кстати, вы вызываете Contact.init() вы, вероятно, хотели IIFE.
Обратите внимание, что name всегда плохое имя для переменной и даже худшее имя/идентификатор для элемента, поскольку window.name уже существует.

Посмотрите, как форма просто передается из обработчика события, в функцию.