有沒有一種方法可以僅使用html和javascript來替換表單提交上的div內容？

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

這里有幾件事要注意...

1. 正常提交表單時，它會離開頁面，因此您希望避免這種情況。
2. 既然您現在已經中斷了正常的表單提交過程，則需要異步提交表單，理想情況下是等待請求完成
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 ，則需要做更多的工作。 請參閱如何使用獲取API發布表單數據？