送信ボタンをクリックすると、ページが更新されます。私が望むメッセージを表示するにはどうすればいいですか？

<!DOCTYPE html> 
<html> 
<meta charset = "utf-8"> 
<head> 
<title>Assignment 6</title> 
<script type = "text/JavaScript"> 
function years() 
{ 
    var yourName = document.getElementById("name").value; 
    var yearBorn = document.getElementById("yearBorn").value; 
    var today = new Date(); 
    var currentYear = today.getFullYear(); 
    var age = currentYear - yearBorn; 
    if(age >= 0) 
    { 
     document.write("Hello, " +yourName+ ". You are " +age+ " years old."); 
    } 
    else 
    { 
     document.write("You are not born yet."); 
    } 
    document.close(); 
}; 
</script> 


</head> 


<body> 
<form method = "post"> 
<p>Enter your name: <input type = "text" id = "name" size = "25" /></p> 
<p>Enter year Born: <input type = "text" id = "yearBorn" size = "4" /></p> 
<p><input type = "submit" value = "Click to show message" onClick = "years()" /></p> 
</form> 
</body> 
</html>

ユーザーが送信ボタンをクリックしたときにjavascript部分にメッセージを表示しようとしました。しかし、私にとっては、ページを更新するだけで、メッセージは出力されません。送信ボタンをクリックすると、ページが更新されます。私が望むメッセージを表示するにはどうすればいいですか？

出典

2016-06-18 Andrew

私はちょうどあなたのコードをテストし、私はあなたが91歳を持っているこんにちはテストを参照してください問題はありません。あなたの問題は何ですか？あなたは何もありません？ブラウザのコンソールを確認しましたか？ –

[Submitとonclickが連携していない可能性があります]の複製があります（http://stackoverflow.com/questions/13839459/submit-and-onclick-not-working-together） – Xufox

可能な複製のhttp://stackoverflow.com/questions/932653/how-to-prevent-buttons-submitting-forms？rq = 1 – bvoleti

あなたはon submitイベントを呼び出せませんか？

<form name="form" method="post" onsubmit="years()">

出典

2016-06-18 17:38:07

これは役に立ちませんでしたが、投稿時に新しいページにメッセージが表示されません。 – Andrew

-1

私は思った形式の行動がないからです。同じファイルを追加してください

<form method="post" action="index.php">

あなたはおそらくファイルのポスト部分（ポップアップ）をアクティブにするためにあなたのjavascriptのif式が必要になります。

出典

2016-06-18 17:40:30 Rmj86

これは私が望むものではありません。 – Andrew

クリックイベントをアクションイベントに入れます。 onclickを削除します。それは役に立ちますか？ – Rmj86

入力のタイプを「フォーム」ではなく「ボタン」に変更する必要があります。この場合は、フォームの提出は必要ありません。サーバーと対話する必要があるからです。

出典

2016-06-18 18:41:07 andyroschy

フォームを送信すると、デフォルトの動作はページを更新するためです。あなたがでpreventDefaultを（使用する必要があります：あなたが実際にサーバーにデータを提出する気にしない場合は、提出されたデータは、このような何かをしたい場合は、単に

<p><input type = "button"

に

<p><input type = "submit"

を変更）

<body> 
<form id="form1" method = "post" action=""> 
<p>Enter your name: <input type = "text" id = "name" size = "25" /></p> 
<p>Enter year Born: <input type = "text" id = "yearBorn" size = "4" /></p> 
<p><input id="myButton" type = "submit" value = "Click to show message"/></p> 
</form> 
</body> 
</html> 

<script> 
document.getElementById("myButton").addEventListener("click",function(event){ 
    event.preventDefault(); 
    var yourName = document.getElementById("name").value; 
    var yearBorn = document.getElementById("yearBorn").value; 
    var today = new Date(); 
    var currentYear = today.getFullYear(); 
    var age = currentYear - yearBorn; 
    if(age >= 0) 
    { 
    document.write("Hello, " +yourName+ ". You are " +age+ " years old."); 
    } 
    else 
    { 
    document.write("You are not born yet."); 
    } 
    document.close(); 
    document.getElementById("form1").submit(); 
});

出典

2016-06-18 18:42:32 Williz

送信ボタンをクリックすると、ページが更新されます。私が望むメッセージを表示するにはどうすればいいですか？

答えて

関連する問題