Как собрать данные из формы и отправить их через ajax POST (из jQuery в Vanilla JS)

Question

У меня есть эта функция контактной формы, написанная в jQuery, но я реализую свой сайт с помощью vanllia JS

. Вот HTML-код для формы:

<form id="contact-form" method="post">
  <label for="required_question" style="position:absolute; left:-10000px; bottom:auto; width:1px; height:1px; overflow:hidden;"></label>
  <label for="required_question2" style="position:absolute; left:-10000px; bottom:auto; width:1px; height:1px; overflow:hidden;"></label>
  <label for="name" style="position:absolute; left:-10000px; bottom:auto; width:1px; height:1px; overflow:hidden;">name</label>
  <label for="email" style="position:absolute; left:-10000px; bottom:auto; width:1px; height:1px; overflow:hidden;">email</label>
  <label for="subject" style="position:absolute; left:-10000px; bottom:auto; width:1px; height:1px; overflow:hidden;">email</label>
  <label for="text" style="position:absolute; left:-10000px; bottom:auto; width:1px; height:1px; overflow:hidden;">message</label>
  <label for="submit" style="position:absolute; left:-10000px; bottom:auto; width:1px; height:1px; overflow:hidden;">submit</label>

  <input tabindex="-1" name="required_question" placeholder="Required..." style="position:absolute; left:-10000px; bottom:auto; width:1px; height:1px; overflow:hidden;"></input>
  <input tabindex="-1" name="required_question2" placeholder="Required..." style="position:absolute; left:-10000px; bottom:auto; width:1px; height:1px; overflow:hidden;"></input>
  <input type="text" name="name" placeholder="Name..." required></input>
  <input type="email" name="email" placeholder="Email..." required></input>
  <input type="text" name="subject" placeholder="Subject..." required></input>
  <textarea name="text" placeholder="Enter your message here" required></textarea>
  <input type="submit" class="submit" value="Submit."></input>
</form>

. Вот фрагмент кода jquery:

$('#ajaxform').on('submit', function() {

  $('#submit').val('Sending...');

  var  data = {};

  $(this).find('[name]').each(function(index, value) {
    data[$(this).attr('name')] = $(this).val();
  });
  $.post('/dss-assets/PHP/mailto.php', {term: data}).done(function(data) {
    $('body').append(data);
  });
    return false;
});

и вот что у меня есть в JS:

document.getElementById('contact-form').onsubmit = function(){
  document.querySelector('input[type="submit"]').value = 'Sending...';
  document.querySelector('input[type="submit"]').blur();

  var $data = {};
  var $contact_data = this.querySelectorAll('input[name], textarea[name]');

  for(i = 0; i < $contact_data.length; i++){
    $data[this.getAttribute('name')] = this.value;
  }
  Array.prototype.forEach.call($contact_data, function(index, value){
    console.log($data)
  });
  return false;
}

кажется, что регистрирует данные формы, но возвращает значения как 'null: undefined';пожалуйста, помогите!

Answer 1

Вы ссылаетесь на элемент формы вместо входных данных. Вы должны изменить:

$data[this.getAttribute('name')] = this.value;

на

$data[$contact_data[i].getAttribute('name')] = $contact_data[i].value;

Answer 2

Я считаю, что ваша проблема со словами this this.getAttribute и this.value будут ссылаться на форму, а не на DOM отдельных входных данных.

[ПРАВИТЬ] Одна вещь, которую я бы предложилиспользует метод forEach, который является частью NodeList, возвращаемого querySelectorAll следующим образом:

var $data = {};
var $contact_data = this.querySelectorAll('input[name], textarea[name]');
$contact_data.forEach(function($input) {
  $data[$input.getAttribute('name')] = $input.value;
});

Делая это таким образом, избавляет от необходимости итератор и становится чище. Если вам не нужна переменная $contact_data, то она также не нужна, и вы можете использовать:

var $data = {};
his.querySelectorAll('input[name], textarea[name]').forEach(function($input) {
  $data[$input.getAttribute('name')] = $input.value;
});

Надеюсь, это поможет.