When clicking on the submit button it just refreshes the page. How can I get it to display the message I desire?
Question
<!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>
Trying to get the javascript portion to display the messages when a user clicks the submit button. However, for me it just refreshes the page, and doesn't output any messages.
4 answers
solution1
1 2016-06-18 18:42:32
It is because when you submit a form, its default behavior is to refresh the page. If you do not actually care about submitting the data to a server, just change
<p><input type = "submit"
to
<p><input type = "button"
If you do want the data submitted do something like this: you need to use preventDefault()
<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();
});
solution2
0 2016-06-18 17:38:07
您不能调用提交事件吗？
<form name="form" method="post" onsubmit="years()">
solution3
0 2016-06-18 18:41:07
You need to change the type of the Input to 'button' instead of 'form'. You don't need a form submission in this case, as it is only needed to interact with a server.
solution4
-1 2016-06-18 17:40:30
It's because you don't have an action of the form I think? Add the same file as
<form method="post" action="index.php">
Hope this helps! You probably wll need an if formula in your javascript to activate of post part of the file (the popup).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.