表单提交无需重定向和重新加载

Question

我是 HTML 的新手。我写了一个应用程序，它允许用户添加数据，它是一个本地应用程序。我在这个应用程序中使用了表单，当表单提交时我遇到了问题。我不希望页面 navigate/redirect 甚至不希望重新加载同一页面。目前它正在重新加载页面。请让我知道是什么阻止了 redirecting/reloading 这个应用程序。我不需要任何 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

A 表单提交向 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 属性并调用您的函数。不要忘记 return 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> =37=].

因此只需使用一个<button>和两个<input>。

使用 insertRow and 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>  </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>

表单提交无需重定向和重新加载

Form submit without redirection and reloading

javascript

html

forms

form-submit

onsubmit