リダイレクトおよびリロードなしでフォームを送信

Question

私はHTMLを初めて使用しています。私はユーザーがデータを追加することができるアプリケーションを書いており、それはローカルアプリケーションです。私はこのアプリケーションをフォームintに使用していましたが、フォームの送信が行われるときに問題に直面しています。ページを移動/リダイレクトする必要はなく、同じページをリロードする必要もありません。現在、ページをリロードしています。このアプリのリダイレクト/リロードが何を止めるのか教えてください。私は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> \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

とこれが<form>を使用するない右ケースです。 GETまたはPOSTメソッドデータをサーバーに送信するときには、<form>が使用されます。

したがって、<button>と2つの<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>

Answer 2

フォーム投稿は、サーバーへの/POSTをGET要求を行いました。フォーム提出のデータを取得するためにJSのみを使用することはできません。

いくつかの単純なアプリケーションでサーバー側の言語を使用したくない場合は、は実際にフォームを提出することなく独自の関数を作成できます。フォームあなたがをonSubmit属性を使用して、あなたの関数を呼び出すことができます

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>

なし

例。フォーム提出を防ぐために偽を返すことを忘れないでください。

例形

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>