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

【问题标题】：Form submit without redirection and reloading表单提交无需重定向和重新加载
【发布时间】：2016-06-21 12:07:31
【问题描述】：

我是 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>

【问题讨论】：

标签： javascript html forms form-submit onsubmit

【解决方案1】：

这不适合使用<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>

【讨论】：

【解决方案2】：

表单提交向服务器发出 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>

【讨论】：