正しく出力するためにフォームを取得する

Question

フォーム入力を段落に表示させようとしていますが、一時的に表示されてから消えてしまいます。ここに私のコードはありますか：

<form onSubmit = "submitForm()" name="myForm"> 
    First Name:<input type="text" name="firstName" /><br /> 
    Last Name:<input type="text" name="lastName" /><br /> 
    <input type="submit" value=" Submit " name="submit" /> 
    </form> 

<p id="para"> 

</p> 

function submitForm() { 
    var firstName = document.forms["myForm"]["firstName"].value; 
    var lastName = document.forms["myForm"]["lastName"].value; 
    document.getElementById('para').innerHTML = "Your first name is " + firstName + " and your last name is " + lastName; 
} 

恐らく消えている理由はおそらくフォーム自体と関係がありますか？しかし、私は完全には分かりません。何かご意見は？

Answer 1

あなたの解決策は次のとおりです。

問題は、実際にはフォームのデフォルト動作を妨げていないからです。したがって、フォームのデフォルト動作を停止する必要があります。そのためには、を返す必要があります。あなたの関数で

ここでは、デモリンクenter link description here

<form action="#" method="POST" name="myForm" onsubmit="return yourFunctionName();"> 

    First Name:<input type="text" name="firstName" /><br /> 

    Last Name:<input type="text" name="lastName" /><br /> 

    <input type="submit" name="submit" value="Submit"> 

</form> 

<div id="result"></div> 

<script> 
    function yourFunctionName() 
    {   
     var firstName = document.forms["myForm"]["firstName"].value; 
     var lastName = document.forms["myForm"]["lastName"].value; 

     document.getElementById('result').innerHTML = "Your first name is <b>" + firstName + "</b> and your last name is <b>" + lastName + "</b>"; 

     return false; 

    } 
</script> 

Answer 2

は、次のような何か：ザ・が消える、つまり

<form onSubmit = "return submitForm()" name="myForm"> 
    First Name:<input type="text" name="firstName" /><br /> 
    Last Name:<input type="text" name="lastName" /><br /> 
    <input type="submit" value=" Submit " name="submit" /> 
    </form> 

<p id="para"> 

</p> 
<script> 
function submitForm() { 
    var firstName = document.forms["myForm"]["firstName"].value; 
    var lastName = document.forms["myForm"]["lastName"].value; 
    document.getElementById('para').innerHTML = "Your first name is " + firstName + " and your last name is " + lastName; 
    return false; 
} 
    </script> 

をonSubmit = "return submitForm()"すなわちイベントにreturnを追加し、その終了

でfalseを返す関数を作るフォームを実行するためです提出すると、データの送信が妨げられます。チェックアウトthis demo