0
<!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.

Andrew
  • 19
  • 5
  • i just test your code and i have no issue i see hello test you have 91 years old. What is your issue exactly? You have nothing ? Have you check the browser console ? – jeremy-denis Jun 18 '16 at 17:38
  • Possible duplicate of [Submit and onclick not working together](http://stackoverflow.com/questions/13839459/submit-and-onclick-not-working-together) – Sebastian Simon Jun 18 '16 at 17:39
  • Possible duplicate of http://stackoverflow.com/questions/932653/how-to-prevent-buttons-from-submitting-forms?rq=1 – bvoleti Jun 18 '16 at 17:39
  • The form is not showing me the message on a new page. It just refreshes, gives me a blank form. I'm using google chrome to test it out. – Andrew Jun 18 '16 at 18:27

4 Answers4

1

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();
});
Williz
  • 309
  • 1
  • 9
0

Can't you call the on submit event?

<form name="form" method="post" onsubmit="years()">
Aaron Ullal
  • 4,855
  • 8
  • 35
  • 63
0

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.

andyroschy
  • 499
  • 3
  • 11
-1

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).

Rmj86
  • 1,140
  • 1
  • 7
  • 9