表單提交沒有重定向和重新加載

Question

我是HTML的新手。 我編寫了一個應用程序，允許用戶添加數據，它是一個本地應用程序。 我在這個應用程序中使用了表單，當表單提交發生時我遇到了問題。 我不希望頁面導航/重定向，甚至不希望重新加載同一頁面。 目前它正在重新加載頁面。 請讓我知道什么停止重定向/重新加載此應用程序。 我不想要任何PHP代碼，應用程序只需要純HTML和JS。 以下是HTML應用代碼。

 function addInfo() { var InfoForm = document.forms["InfoForm"]; var trelem = document.createElement("tr"); for (var i = 0; i < InfoForm.length - 1; i++) { var tdelem = document.createElement("td"); tdelem.innerHTML = InfoForm[i].value; trelem.appendChild(tdelem); } document.getElementById("current_table").appendChild(trelem); return false; } function done(e) { e.preventDefault(); return false; } 

 <div id="current_div"> <h2>Table Heading</h2> <table border="1" id="current_table"> <tr> <th>Name</th> <th>Age</th> </tr> </table> </div> <div id="input_div"> <form name="InfoForm" accept-charset="utf-8" onsubmit="done(e)"> Name : <input type="text" name="Name" value=""> <br> <br>Age : <input type="number" name="Age" value=""> <br> <br> <input type="submit" value="Add_Info" onclick="addInfo()"> </form> </div> 

Answer 1

表單提交向服務器發出了GET / POST請求。 您不能僅使用JS從表單提交中獲取數據。

如果您不想在某些簡單的應用程序中使用服務器端語言，則可以在不提交表單的情況下創建自己的函數 。

沒有表格的例子

 function gocalc() { var number = document.getElementById("number").value; var text = document.getElementById("text").value; if(number>0 && number <11 && text !="") { for(var i=0;i<number;i++) { document.getElementById("content").innerHTML=document.getElementById("content").innerHTML+"<p>"+text+"</p>"; } } else alert("You must write some text and choose a number between 1 and 10"); } 

 Choose a number between 1 and 10 <input type="number" max="10" id="number"> <br> Write some text <input type="text" id="text"><br> <button onclick="gocalc()">Ok</button> <div id="content"></div> 

您可以使用onsubmit屬性並調用您的函數。 不要忘記返回false以防止表單提交。

表格示例

 function myfunction(myform) { alert(myform.mytext.value); return false; } 

 <form onsubmit="return myfunction(this)"> <input name="mytext" type="text"> <button type="submit">Submit</button> </form> 

Answer 2

這不是使用<form>的正確案例。 當您通過GET或POST方法數據發送到服務器時，使用<form> 。

因此，只需使用<button>和兩個<input> 。

使用insertRow和insertCell插入行更容易。

完整的例子 ：

 var nName = document.getElementById("nName"); var nAge = document.getElementById("nAge"); var btn = document.getElementById("addData"); var tbl = document.getElementById("myData"); function addData() { var row = tbl.insertRow(0); var d1 = row.insertCell(0); var d2 = row.insertCell(1); d1.innerHTML = nName.value; d2.innerHTML = nAge.value; } btn.addEventListener("click", addData); 

 table { margin: 15px 0; } #inputData > div { margin: 5px 0; } #inputData > div > span { display: inline-block; width: 100px; } 

 <table border="1"> <thead> <tr> <th>Name</th> <th>Age</th> </tr> </thead> <tbody id="myData"></tbody> <!-- Insert data --> </table> <div id="inputData"> <div><span>Name:</span> <input type="text" id="nName"> </div> <div><span>Age:</span> <input type="number" id="nAge"> </div> <div> <button id="addData">Add data</button> </div> </div>