locked
how to call second page after the filled the input field? RRS feed

  • Question

  • User1421057020 posted

    I m working with single page application 

    I want to call signup javascript page after the user filled the form

    Now I m facing 2 issue

    when I fill only one input field and press next button, It is getting redirected to the next page

    when I filled all the input field and press the next button, redirection doesn't works.

    signup.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8" />
        <title></title>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            function validatation() {
                debugger
                if ($("#txtfname").val() == "") {
                    debugger
                    alert("Provide a first name");
                    $("#txtfname").focus();
                    return false;
                }
                if ($("#txtmname").val() == "") {
                    debugger
                    alert("Provide a middle name");
                    $("#txtmname").focus();
                    return false;
                }
                if ($("#txtlname").val() == "") {
                    debugger
                    alert("Provide a last name");
                    $("#txtlname").focus();
                    return false;
                }
                return true;
            }
        </script>
        <script src="signup.js"></script>
    </head>
    <body>
        <form id="txtPersonalInformation" onsubmit="return validatation()">
            <h1>Personal Information</h1>
    
            <label for="txtfname">First Name:</label>
            <input id="txtfname" name="txtfname" type="text" /><br />
    
            <label for="txtmname">Middle Name:</label>
            <input id="txtmname" name="txtmname" type="text" /><br />
    
            <label for="txtlname">Last Name:</label>
            <input id="txtlname" name="txtlname" type="text" /><br />
    
            <input id="btnnext" type="submit" value="Next" />
        </form>
    </body>
    </html>

    signup.js

    $(document).ready(function () {
        $('#btnnext').click(function (event) {
            sessionStorage.clear();
            sessionStorage.setItem("firstName", $("#txtfname").val());
            sessionStorage.setItem("lastName", $("#txtlname").val());
            sessionStorage.setItem("middleName", $("#txtmname").val());
            $("#txtPersonalInformation").load("ContactInformation.html");
        });
    });

    Friday, May 15, 2020 12:01 PM

Answers

  • User-474980206 posted

    when your input pass validation, you do a post back. this replaces the dom changes made by the on click handler. when validation fails, the changes done by the on click handler are not overriden.

    I assume this is all coding error on your part. a possible fix:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8" />
        <title></title>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            function validatation() {
                debugger
                if ($("#txtfname").val() == "") {
                    debugger
                    alert("Provide a first name");
                    $("#txtfname").focus();
                    return false;
                }
                if ($("#txtmname").val() == "") {
                    debugger
                    alert("Provide a middle name");
                    $("#txtmname").focus();
                    return false;
                }
                if ($("#txtlname").val() == "") {
                    debugger
                    alert("Provide a last name");
                    $("#txtlname").focus();
                    return false;
                }
                return true;
            }
        </script>
        <script src="signup.js"></script>
    </head>
    <body>
        <form id="txtPersonalInformation">
            <h1>Personal Information</h1>
    
            <label for="txtfname">First Name:</label>
            <input id="txtfname" name="txtfname" type="text" /><br />
    
            <label for="txtmname">Middle Name:</label>
            <input id="txtmname" name="txtmname" type="text" /><br />
    
            <label for="txtlname">Last Name:</label>
            <input id="txtlname" name="txtlname" type="text" /><br />
    
            <input id="btnnext" type="submit" value="Next" />
        </form>
    </body>
    </html>
    
    //signup.js
    
    $(function () {
        $('form').submit(function (event) {
            event.preventDefault();  //prevent submit
            if (validatation) {
                sessionStorage.clear();
                sessionStorage.setItem("firstName", $("#txtfname").val());
                sessionStorage.setItem("lastName", $("#txtlname").val());
                sessionStorage.setItem("middleName", $("#txtmname").val());
                $("#txtPersonalInformation").load("ContactInformation.html");
            }
        });
    });
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, May 15, 2020 3:26 PM

All replies

  • User-474980206 posted

    when your input pass validation, you do a post back. this replaces the dom changes made by the on click handler. when validation fails, the changes done by the on click handler are not overriden.

    I assume this is all coding error on your part. a possible fix:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8" />
        <title></title>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            function validatation() {
                debugger
                if ($("#txtfname").val() == "") {
                    debugger
                    alert("Provide a first name");
                    $("#txtfname").focus();
                    return false;
                }
                if ($("#txtmname").val() == "") {
                    debugger
                    alert("Provide a middle name");
                    $("#txtmname").focus();
                    return false;
                }
                if ($("#txtlname").val() == "") {
                    debugger
                    alert("Provide a last name");
                    $("#txtlname").focus();
                    return false;
                }
                return true;
            }
        </script>
        <script src="signup.js"></script>
    </head>
    <body>
        <form id="txtPersonalInformation">
            <h1>Personal Information</h1>
    
            <label for="txtfname">First Name:</label>
            <input id="txtfname" name="txtfname" type="text" /><br />
    
            <label for="txtmname">Middle Name:</label>
            <input id="txtmname" name="txtmname" type="text" /><br />
    
            <label for="txtlname">Last Name:</label>
            <input id="txtlname" name="txtlname" type="text" /><br />
    
            <input id="btnnext" type="submit" value="Next" />
        </form>
    </body>
    </html>
    
    //signup.js
    
    $(function () {
        $('form').submit(function (event) {
            event.preventDefault();  //prevent submit
            if (validatation) {
                sessionStorage.clear();
                sessionStorage.setItem("firstName", $("#txtfname").val());
                sessionStorage.setItem("lastName", $("#txtlname").val());
                sessionStorage.setItem("middleName", $("#txtmname").val());
                $("#txtPersonalInformation").load("ContactInformation.html");
            }
        });
    });
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, May 15, 2020 3:26 PM
  • User1421057020 posted

    hi bruce

    can you change this if(validation()) you forgot this ()

    thanks for the answer 

    Friday, May 15, 2020 4:17 PM