Formular senden ohne Umleitung und erneutes Laden

Question

Ich bin neu in HTML. Ich habe eine App geschrieben, die dem Benutzer erlaubt, Daten hinzuzufügen, und es ist eine lokale Anwendung. Ich habe in dieser Anwendung Formulare verwendet, und ich stehe vor einem Problem, wenn die Formularübermittlung stattfindet. Ich möchte nicht, dass die Seite durchsucht/umgeleitet wird und nicht möchte, dass die gleiche Seite neu geladen wird. Derzeit wird die Seite neu geladen. Bitte lassen Sie mich wissen, was mit dem Weiterleiten/Neuladen dieser App aufhört. Ich will keinen php Code, Anwendung muss reines HTML und JS nur sein. Im Folgenden finden Sie den HTML-App-Code.

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

Diese nicht der richtige Fall ein <form> zu verwenden. A <form> wird verwendet, wenn Sie über GET oder POST Methodendaten an den Server senden.

Verwenden Sie daher nur <button> und zwei <input>.

Es ist einfacher, eine Zeile mit insertRow und insertCell einzufügen.

Komplettes Beispiel:

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>

Answer 2

A Form Vorlage eine gemacht GET/POST Anfrage an den Server. Sie können nicht nur JS zum Abrufen von Daten aus einer Formularübergabe verwenden.

Wenn Sie nicht serverseitige Sprache für einige einfache Anwendungen verwenden möchten, können Sie Ihre eigene Funktion machen, ohne wirklich Ihr Formular einzureichen.

Beispiel ohne Form

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>

Sie können onsubmit Attribut verwenden und Ihre Funktion aufrufen. Vergessen Sie nicht, zurückgeben falsche für die Formularübergabe zu verhindern.

Beispiel mit Form

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>