JavaScript提交操作期間從DOM中刪除HTML表單

基本上它在錫上表示。我有一個生成一個JavaScript行動的一種形式：JavaScript提交操作期間從DOM中刪除HTML表單

// in head 
function process() { 
    setupform = document.getElementById("setup"); 
    setupform.parentNode.removeChild(setupform); 
    // do other stuff 
} 

// in body 
<form id="setup" name="setup"> 
    <input id="entrybox" name="entry" type="text"> 
    <button type="submit" onclick="process()">Process</button> 
</form>

當表單被觸發時，頁面重新加載，而不是與「其他東西」繼續和葉的形式空。錯誤控制檯中不顯示錯誤。

我有另一個版本的地方，而不是從DOM中刪除表單，它只是有setupform.innerHTML = "";，它工作正常。但是，留下一個空的元素似乎是錯誤的。我只是想弄清楚爲什麼上面的代碼不起作用。

我也不想在任何人建議之前使用JQuery或任何其他框架。

來源

2014-11-02 Rainman Noodles

這是一個提交按鈕，所以當它被點擊時提交表單。你期望什麼？什麼是*其他的東西*？ – Yogu 2014-11-02 21:31:36

你的按鈕有提交功能。如果你不想發送表單數據並重定向到自己（因爲你沒有設置表單動作），你必須將你的按鈕設置爲「type =」按鈕「 – 2014-11-02 21:32:26

您必須阻止提交表單。這會觸發您正在討論的頁面刷新。

<form id="setup" name="setup" onsubmit="return false;"> 
    <input id="entrybox" name="entry" type="text"> 
    <button type="submit" onclick="process()">Process</button> 
</form>

@ boulder_02評論也是對的！

來源

2014-11-02 21:32:21 thinklinux

該按鈕是一個submit按鈕，因此它會提交表單。並且表單提交的默認操作正在對action屬性指定的URL發出請求。

如果不希望重定向你，你有兩個選擇：

禁用形式完全提交。這樣，輸入按下文本框會觸發該功能，但不會重定向到新頁面。

function process(e) { 
    e.preventDefault(); 
    setupform = document.getElementById("setup"); 
    // ... 
} 

document.getElementById('form').addEventListener('submit', process, false);

通過改變type屬性button使按鈕正常按鈕。用戶可能仍會提交表單並重新加載頁面。

來源

2014-11-02 21:35:42 Yogu

JavaScript提交操作期間從DOM中刪除HTML表單

回答

相關問題