Отправка формы с помощью ajax, форма при этом динамически создается на сайте. native JS

186

14 декабря 2018, 12:00

Всем доброго дня. Не получается у меня реализовать отправку формы через js, форма создается при этом при клике на кнопку. И получается что я получаю form = null

document.addEventListener("DOMContentLoaded", function(event) { 
 
  btn = document.getElementById("btn"); 
  wr = document.getElementById("wrap"); 
  btn.addEventListener('click', function(e) { 
    var form = document.createElement("form"); 
    form.id = "myform"; 
    form.innerHTML = "<input placeholder='Наименование' name='title'><input placeholder='Цена' name='price'><input type='submit' value='Добавить'>"; 
    wr.appendChild(form); 
  }, false); 
 
 
}); 
 
window.addEventListener("load", function() { 
  function sendData() { 
    var XHR = new XMLHttpRequest(); 
    var FD = new FormData(form); 
 
    xhr.addEventListener("load", function(event) { 
      alert(event.target.responseText); 
    }); 
 
    xhr.addEventListener("error", function(event) { 
      alert('Oops! Something went wrong.'); 
    }); 
 
    xhr.open("POST", "/add"); 
 
    xhr.send(FD); 
  } 
 
  var form = document.getElementById("myform"); 
  console.log(form); 
 
  form.addEventListener("submit", function(event) { 
    event.preventDefault(); 
    console.log("submit"); 
    sendData(); 
  }); 
});

<button id="btn">CREATE form</button> 
<div id="wrap"> 
  <div>

как решить эту проблему? Заранее спасибо!

Answer 1

window.addEventListener('load', function() { 
  btn = document.getElementById('btn'); 
  wr = document.getElementById('wrap'); 
  btn.addEventListener('click', function(e) { 
    var form = document.createElement("FORM"); 
    form.id = 'myform'; 
    form.innerHTML = '<input placeholder="Наименование" name="title"><input placeholder="Цена" name="price"><input type="submit" value="Добавить">'; 
    form.addEventListener("submit", function(event) { 
      event.preventDefault(); 
      console.log('submit'); 
      sendData(this); 
    }); 
    wr.appendChild(form); 
  }, false); 
 
  function sendData(form) { 
    var xhr = new XMLHttpRequest(); 
    var FD = new FormData(form); 
 
    xhr.addEventListener('load', function(event) { 
      alert(event.target.responseText); 
    }); 
 
    xhr.addEventListener('error', function(event) { 
      alert('Oops! Something went wrong.'); 
    }); 
 
    xhr.open('POST', '/add'); 
 
    xhr.send(FD); 
  } 
});

<button id="btn">CREATE form</button> 
<div id="wrap"> 
  <div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Какие есть плагины для стилизации placeholder?

Подскажите пожалуйста какой-нибудь хороший плагин для стилизации placeholderЧтобы я мог выбрать input's в которых нужно заменить placeholder на кастомизированный...

159

MySQL