Question

我是HTML新手。我编写了一个应用程序，允许用户添加数据，它是本地应用程序。我在这个应用程序中使用了表单，当表单提交发生时我遇到了问题。我不希望页面导航/重定向，甚至不希望重新加载同一页面。目前它正在重新加载页面。请让我知道什么停止重定向/重新加载此应用程序。我不想要任何PHP代码，应用程序只需要纯HTML和JS。以下是HTML应用代码。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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插入行更容易。

完整示例：

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

表单提交没有重定向和重新加载

2 个答案: