Question 66375 in Html Question posted in
Some basic documentation can be found here.

Why isn't the alert box appearing? – Html

This is my HTML and JS code:

<!DOCTYPE html>
<html>
    <head>
        <script>
            function validateForm() {
                let x = document.forms["myForm"]["fname"].value;
                 if (x == "") {
                    alert("Name must be filled out");
                    return false;
                }
            }

            function validateForm() {
                let x = document.forms[myForm][lname].value;
                if (x == "") {
                    alert("Last name should be filled out");
                    return false;
                }
                else
                    alert("Thank you for your response");
            }
        </script>
    </head>

    <body>
        <h1>Student Information Form</h1>

        <br>
        <br>

        <form name="myForm" onsubmit="return validateForm()" method="post">
            <label for="fname">First name:</label><br>
            <input type="text" id="fname" name="fname"><br>
            <label for="lname">Last name:</label><br>
            <input type="text" id="lname" name="fname"><br> <br>
            <label for="email">Email:</label>
            <input type="text" id="email" name="email">

            <input type="reset">
            <input type="submit" value="Submit">
        </form>
    </body>
</html>

And upon clicking the submit button I’m calling the alert to appear but it’s not appearing. When I have data in the input tags, when I click submit the data just dissapears. Why is this happening???

Tags:

3

Answers


  1. 0

    There are 2 problems with your code:

    1. the first instance of validateForm() is over written by the second and will never be called. You should move all your code into a single function.

    2. You are missing quotes around the strings in the document.forms["myForm"]["lname"].value code.

    Login or Signup to reply.
  2. 0

    as Allen Morris said, you have multiple things todo:

    1. the first validateForm() function it’s overwritten by the second one, so you have to merge your both functions in one.
    2. you have syntax error missing quotes while passing the index key in the document in the second function document.forms["myForm"]["lname"]

    so after we fix this errors and merge our logic in one, your function will looks like:

    function validateForm() {
    let fname = document.forms["myForm"]["fname"].value;
    let lname = document.forms["myForm"]["lname"].value;
    if (!fname) {
        alert("First name must be filled out");
        return false;
    }
    if (!lname) {
        alert("Last name must be filled out");
        return false;
    }
    alert("Thank you for your response");
    return true;
}
    Login or Signup to reply.
  3. 0

    Here is a working snippet of your code.
    The function validateForm() which you used twice is the problem that you are facing. If you have to use a function, you should just invoke it once.

    For validating the rest of the inputs, I added a bit more logic to the rest of the function in case you would have to validate your last name.

    Hope that helps.

    <!DOCTYPE html>
<html>
    <head>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
            function validateForm() {
                let x = document.forms["myForm"]["fname"].value;
                let y = document.forms["myForm"]["lname"].value;                   
                  if(x == "" && y == ""){
                    alert("Name and Last name must be filled out");
                    return false;
                  }

                  if (x == "" && y != "") {
                    alert("Name must be filled out");
                    return false;
                  } 
                   
                  if (x != "" && y == "") {
                    alert("Last name must be filled out");
                    return false;
                  } 

            }

        </script>
    </head>

    <body>
        <h1>Student Information Form</h1>

        <br>
        <br>

        <form name="myForm" onsubmit="return validateForm()" method="post">
            <label for="fname">First name:</label><br>
            <input type="text" id="fname" name="fname"><br>

            <label for="lname">Last name:</label><br>
            <input type="text" id="lname" name="lname"><br> <br>

            <label for="email">Email:</label>
            <input type="text" id="email" name="email">

            <input type="reset">
            <input type="submit" value="Submit">
        </form>
    </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search