Отправка формы без перенаправления и перезагрузки

Я новичок в 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 forms html form-submit onsubmit
person TechTotie    schedule 21.06.2016    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Это не подходящий случай для использования <form>. <form> используется, когда вы отправляете данные методом GET или POST на сервер.

Поэтому просто используйте <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>

person Community    schedule 21.06.2016

arrow_upward
0
arrow_downward

При отправке формы на сервер был отправлен запрос 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>

person Alexis    schedule 21.06.2016