JSを使用して分割した後にデータが消えて同じページにフォームデータが表示される

Question

JavaScriptを使用して同じページにフォームデータを表示しようとしていました。

はJavaScript

function renderInput(age) { 
    document.getElementById('display').innerHTML += age; 
} 

送信ボタンをフォーム要素の外側に配置されたときに動作します。

HTML - それだけで一瞬のid「表示」とdiv要素をレンダリングしてから提出するフィールドはフォーム要素の内側に配置された場合に消えますが、それは

<form> 
    <label><b>Enter your age</b></label> 
    <input type="text" name="age" id="user_input"> 
</form> 

<input type="submit" 
onclick='renderInput(document.getElementById("user_input").value);'><br/> 

<div id='display'>Your age is </div> 

を働くとき。

HTML - それは

<form> 
    <label><b>Enter your age</b></label> 
    <input type="text" name="age" id="user_input"> 
    <input type="submit" 
onclick='renderInput(document.getElementById("user_input").value);'><br/> 
</form> 

<div id='display'>Your age is </div> 

動作しない場合は、私はこのまわりで私の頭を取得するように見えることはできません。なぜこうなった？

Answer 1

あなたはこのようonclickイベントにfalseを返すことによって、提出からフォームを停止する必要があります：あなたは、フォーム、ブラウザ「ロード」フォーム「アクション」のURLを送信すると

<input type="submit" onclick='renderInput(document.getElementById("user_input").value); return false;'>