Question

我正在尝试使用纯JavaScript，而不是jquery。我有一个具有ID表单并在其中包含表单的div。提交表单后，如何清空此div的内容并将其替换为提交的文本表单？

<div class="form">
   <form action="">
    ...
   </form>
</div>

Answer 1

侦听表单上的submit事件，然后替换容器的innerHTML。

document.addEventListener('DOMContentLoaded', function() {
  const formContainer = document.querySelector('.form');
  const form = formContainer.querySelector('form');
  
  form.addEventListener('submit', function () {
    formContainer.innerHTML = `Thank you for telling me about ${form.someInput.value}`;
  });
});

<div class="form">
  <form>
    <input name="someInput" type="text" />
    
    <button type="submit">submit</button>
  </form>
</div>

Answer 2

为表单及其周围的div提供ID：

<div class="form" id="form-wrapper">
   <form id="my-form" action="#">

   </form>
</div>

和您要求的JavaScript：

var submitted = function(e){
  var d = document.getElementById("form-wrapper");
  d.innerHTML = "Form Submitted";
  e.preventDefault();
}

var ele = document.getElementById("my-form");
if(ele.addEventListener){
    ele.addEventListener("submit", submitted, false);  //Modern browsers
}else if(ele.attachEvent){
    ele.attachEvent('onsubmit', submitted);            //Old IE
}

但是请记住，在这里我们只是阻止表单的提交，所以我猜您将需要在submitted函数内添加一些AJAX处理。

Answer 3

这里有几件事要注意...

正常提交表单时，它会离开页面，因此您希望避免这种情况。
鉴于您现在已经中断了正常的表单提交过程，则需要异步提交表单，理想情况下是等待请求完成
然后您可以在同一位置更新<div>

例如，在文档底部的<script>标签中的</body> ...

let div = document.querySelector('.form') // find the first element by class
let form = div.querySelector('form')      // find the form by tag
form.addEventListener('submit', e => {
  // stop the page navigating away
  e.preventDefault()

  // submit the form via AJAX
  fetch(form.action, {
    method: form.method
    body: new FormData(form)
  }).then(res => {
    // now update the <div> contents
    div.innerHTML = res.ok ? 'Form Submitted' : 'Form submit failed'
  })
})

注意，这会将表单提交为multipart/form-data。如果您的后端只期望application/x-www-form-urlencoded，则需要做更多的工作。参见How do I post form data with fetch api?

有没有一种方法可以仅使用html和javascript来替换表单提交上的div内容？

3 个答案: