提出後にフォームsuccess msgが消える

Question

フォームを送信した直後に、成功メッセージが一番下に表示されて消えます。成功のメッセージが消えるのを止めるにはどうすればいいのですか？これを引き起こしていることを説明してください。私はJavaScriptを学んでいます。 Link to codepen私は私がフォームを提出するのを止めるのではないかと心配していますが、提出後にmsgを残す方法を考えました。

Htmlの

<form name="myform" onsubmit="return validateForm()"> 
    <input type="text" name="name" placeholder="name" /><br /> 
    <input type="number" name="number" placeholder="phone number"/><br /> 
    <input type="text" name="email" placeholder="email"/><br /> 
    <input type="submit"/> 
</form> 

はJavaScript

function validateForm() { 
    var n = document.myform.name.value; 
    var p = document.myform.number.value; 
    var e = document.myform.email.value; 

    if (n === '' || n === null) { 
    alert("please enter your name!"); 
    return false; 
    } else if (p === '' || p === null) { 
    alert("please enter your number!"); 
    return false; 
    } else if (e === '' || e === null) { 
    alert("please enter your email!"); 
    return false; 
    }else if(p.length <= 7){ 
    alert("Please enter a valid phone number!"); 
    return false; 
    }else{ 
    var msg = "Thank you! your info has been sent!"; 
    var el = document.createElement('p'); 
    var textNode = document.createTextNode(msg); 
    el.appendChild(textNode); 
    document.body.appendChild(el); 
    } 
} 

Answer 1

フォームでaction='somepage.php'を使用していない、データは現在のページ自体に送信されます。ページがリフレッシュされ、msg変数がそのページに残らなくなりました。

メッセージを含むセッション変数（Ajaxなどを使用）を作成することをお勧めします。ページがリロードされると、セッション変数が存在するかどうかを確認します。

if(isset($_SESSION['msg']){ 
    echo "<div class='alert alert-success'>".S_SESSION['msg']."</div>"; 
} 

---

もう一つの方法は、Ajaxを使用してサーバーにデータを送信し、そこにデータを検証することです。検証後、成功または失敗に応じてメッセージが返されます。次に、ページにデータを表示することができます。このプロセスでは、ページは更新されません。次のようなもの：

$.ajax({ 
    type: 'POST', 
    url: "processForm.php", 
    data: { 
     name: n, 
     number: p, 
     email: e 
    }, 
    cache: false, 
    success: function (data) { 
     document.getElementById("message_area").innerHTML = data; 
    } 
});