0

I am in school for software engineering and not brand new but still a student of the field with a lot to learn and was wondering if someone could tell me if I was just making a newbie mistake. I had a homework assignment in my html and JavaScript class to make a page that someone could enter there name, age and prompt a background color change through JavaScript. I was able to do the assignment but after the alert to tell you your name, age and what color the background was turned to (at this point the background is the color you put in) it resets the form/page. I do not know why it is doing this and neither does anyone else in my class so I was wondering if anyone could tell me why it is resetting and if it is something I did in the code so I can watch out for it in the future.

<!DOCTYPE html>    
<html>
    <head>
    <script>
        function getInformation() {
            var strColor = prompt("What is your favorite color");
            var strFirstName = document.getElementById("txtName").value; 
            var strYourAge = document.getElementById("txtAge").value;
            document.body.style.backgroundColor= strColor;    
            alert(strFirstName + "Your favorite background color was applied to the backgrond of the page. \n\n and your age is" + strYourAge);     
        }
    </script>
    </head>

    <body>
        <form>
            <table>
                <tr>
                    <td><label>First Name</label>
                </tr>
                <tr>
                    <td><input id="txtName" type="text" name="Name" required></td>
                </tr>
                <tr>
                    <td><label>Your Age</label></td>
                </tr>
                <tr>
                    <td><input id="txtAge" type="number" name="Age" required></td>
                </tr>
                <tr>
                    <td><button onclick="getInformation()">Submit</button></td>
                </tr>
            </table>
        </form>
    </body>
</html>
Cœur
  • 37,241
  • 25
  • 195
  • 267
Student113
  • 3
  • 2
  • 3
    This seems to be an epidemic today ; ) Do you know what happens when you submit a form? – Teemu Dec 01 '15 at 20:01

3 Answers3

1

This is because when you click the Submit button in your form, it submits the form. Since (from what I can tell by your code) you don't want to actually submit a form, all you need to do is remove the <form></form> tag.

Consider the following revision:

<!DOCTYPE html>    
<html>
    <head>
    <script>
        function getInformation() {
            var strColor = prompt("What is your favorite color");
            var strFirstName = document.getElementById("txtName").value; 
            var strYourAge = document.getElementById("txtAge").value;
            document.body.style.backgroundColor= strColor;    
            alert(strFirstName + "Your favorite background color was applied to the backgrond of the page. \n\n and your age is" + strYourAge);     
        }
    </script>
    </head>
    <body>
      <!-- <form> was removed -->
        <table>
            <tr>
                <td><label>First Name</label>
            </tr>
            <tr>
                <td><input id="txtName" type="text" name="Name" required></td>
            </tr>
            <tr>
                <td><label>Your Age</label></td>
            </tr>
            <tr>
                <td><input id="txtAge" type="number" name="Age" required></td>
            </tr>
            <tr>
                <td><button onclick="getInformation()">Submit</button></td>
            </tr>
        </table>
    </body>
</html>

Note:

If you want to learn more about the form tag, feel free to read more about it here.

A form tag should have:

  • action - Where you want to send the form data to.
  • method - How you want to send that data.

Consider this example:

<form action="demo_form.asp" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
</form>
Nick Zuber
  • 5,467
  • 3
  • 24
  • 48
0

Add type="button" to this line to achieve no refresh.

<td><button type="button" onclick="getInformation()">Submit</button></td>

Reference this question for more info:

prevent refresh of page when button inside form clicked

Community
  • 1
  • 1
Pete R.
  • 16
  • 2
0

Hi everyone thank you for all the help! I tried both ways and ended up going with Pete R. With type button If I do need the form in the future I would still be in the same predicament of it refreshing. With the type button I can still keep the form for later modification and not have the problem of the refresh.

To Nick Z I appreciate the link to the information and defiantly will use it. I'm still pretty new to the field and am always looking for good references for information to help me.

Again thank you all for your help!

Student113
  • 3
  • 2