2

Here, I am trying to use the signUp() function to get the users details and store them into the database. I already tested the backend Javascript file (signUp function) using postman and it works perfectly fine.

HTML: 

<!DOCTYPE html>
<html>

<head>
    <title>Login</title>

    <link href="css\signup.css" rel="stylesheet" type="text/css">

    <script>

        function signUp() {
            if (document.getElementById("password2").value == document.getElementById("cfmpassword2").value) {
                var users = new Object();
                users.firstName = document.getElementById("firstName").value;
                users.lastName = document.getElementById("lastName").value;
                users.username2 = document.getElementById("username2").value;
                users.email = document.getElementById("email").value;
                users.password2 = document.getElementById("password2").value;


                var postUser = new XMLHttpRequest(); // new HttpRequest instance to send user details

                postUser.open("POST", "/users", true); //Use the HTTP POST method to send data to server

                postUser.setRequestHeader("Content-Type", "application/json");

                // Convert the data in "users" object to JSON format before sending to the server.
                postUser.send(JSON.stringify(users));
            }
            else {
                alert("Password column and Confirm Password column doesn't match!")
            }
        }

    </script>


</head>

<body>

    <div style="margin-top: -703px; margin-left: 1250px; position: absolute;">
        <!-- Sign up button -->
        <p>Need an account? &nbsp;
            <button class="signup" id='signup' onclick="document.getElementById('id02').style.display='block'" style="width:auto; height: 6.1vh;">
                Sign Up
            </button>
        </p>
    </div>

    <!-- The Sign Up Modal-->
    <div id="id02" class="modal2">
        <span onclick="document.getElementById('id02').style.display='none'" class="close2" title="Close Modal">&times;</span>

        <!-- Modal Content -->
        <form class="modal-content2">
            <div class="container3">
                <h1>Sign Up</h1>
                <p>Please fill in this form to create an account.</p>
                <hr>
                <label for="firstName"><b>First Name</b></label>
                <input type="text" id="firstName" placeholder="Enter First Name" name="firstName" required>

                <label for="lastName"><b>Last Name</b></label>
                <input type="text" id="lastName" placeholder="Enter Last Name" name="lastName" required>

                <label for="username"><b>Username</b></label>
                <input type="text" id="username2" placeholder="Enter Username" name="username" required>

                <label for="email"><b>Email</b></label>
                <input type="text" id="email" placeholder="Enter Email" name="email" required>

                <label for="psw"><b>Password</b></label>
                <input type="password" id="password2" placeholder="Enter Password" name="psw" required>

                <label for="psw-confirm"><b>Confirm Password</b></label>
                <input type="password" id="cfmpassword2" placeholder="Confirm Password" name="psw-confirm" required>

                <br>
                <br>
                <p>By creating an account you agree to our <a href="aboutus.html" style="color:dodgerblue">Terms &
                        Privacy</a>.</p>

                <div class="clearfix">
                    <button type="button" onclick="document.getElementById('id02').style.display='none'" class="cancelbtn2">Cancel</button>
                    <button type="submit" class="signupbtn" onclick="signUp()">Sign Up</button>
                </div>
            </div>
        </form>
    </div>

</body>

</html>

If Confirm Password matches Password, I will get the user details and send the data to my database server. Else, an alert msg is supposed to pop up.

However, I after trying it out, I see nothing being added into my database. My else part works though, an alert message does pop up on my browser.

Is this due to an error about the Confirm Password? Because I have a very similar set of working codes except that it doesn't contain the Confirm Password column. I got the confirm password from here how to check confirm password field in form without reloading page

Could someone please help identify the problem? Thanks a lot!

CBCH
  • 127
  • 1
  • 3
  • 14
  • If the request is sent successfully then the code that processes this data is where the problem lies. Please add the relevant PHP ( or other ) code that does the db work – Professor Abronsius Jan 20 '20 at 13:31
  • You also want to change the button from a submit to a standard button ~ OR call `event.preventDefault` in your function to prevent the page from reloading – Professor Abronsius Jan 20 '20 at 13:36
  • 1
    @RamRaider if i change to a standard button, it made the button unclickable – CBCH Jan 20 '20 at 13:41

2 Answers2

0

You are calling signUp() when a submit button is clicked.

The JavaScript runs, but as the XHR request is being prepared, the form is submitted, the browser navigates, and the XHR request is canceled.

Don't use a submit button if you aren't submitting the form.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • 1
    If I use button with a `type='button'`, I cannot click the button – CBCH Jan 20 '20 at 13:42
  • @CBCH — That shouldn't happen under normal circumstances. Maybe you have other JS or CSS interfering with it. – Quentin Jan 20 '20 at 13:45
  • 1
    I don't see anything in my css file that will affect the button type; I added my css file in the question – CBCH Jan 20 '20 at 13:57
  • 1
    Jus like https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_signup_form_modal when i change it to button, it also doesnt work? – CBCH Jan 20 '20 at 14:03
  • 1
    @CBCH – That example doesn't use JavaScript to make a request with XHR. The whole point of it is to submit the form. – Quentin Jan 20 '20 at 14:05
  • @CBCH — You're the one who wrote `var postUser = new XMLHttpRequest();` and everything that follows it. – Quentin Jan 20 '20 at 14:09
-1

Your comment that changing the submit to a regular button prevents you from actually being able to click it seems a little odd. The below code has a standard button and seems OK which suggests a css issue perhaps. I tested this with a php endpoint and the request was sent OK so it ought to be find hitting your javascript endpoint - unless there is another factor (css most likely ) interfering with the button

<!DOCTYPE html>
<html>

<head>
    <title>Login</title>
    <link href="css/signup.css" rel="stylesheet" type="text/css">
    <script>
        function signUp(event) {

            event.preventDefault();

            if (document.getElementById("password2").value == document.getElementById("cfmpassword2").value) {
                var users = new Object();
                    users.firstName = document.getElementById("firstName").value;
                    users.lastName = document.getElementById("lastName").value;
                    users.username2 = document.getElementById("username2").value;
                    users.email = document.getElementById("email").value;
                    users.password2 = document.getElementById("password2").value;


                var postUser = new XMLHttpRequest();
                    /* 
                        Optional:
                        A callback to process response from the server and possibly manipulate the DOM
                        or let the user know if things went OK.
                    */
                    postUser.onreadystatechange=function(){
                        if( this.status==200 && this.readyState==4 ){
                            alert( this.response )
                        }
                    }
                    postUser.open( "POST", "/users", true );
                    postUser.setRequestHeader( "Content-Type", "application/json" );
                    postUser.send( JSON.stringify( users ) );
            }
            else {
                alert("Password column and Confirm Password column doesn't match!")
            }
        }
    </script>
</head>
<body>

    <div style="margin-top: -703px; margin-left: 1250px; position: absolute;">
        <!-- Sign up button -->
        <p>Need an account? &nbsp;
            <button class="signup" id='signup' onclick="document.getElementById('id02').style.display='block'" style="width:auto; height: 6.1vh;">
                Sign Up
            </button>
        </p>
    </div>

    <!-- The Sign Up Modal-->
    <div id="id02" class="modal2">
        <span onclick="document.getElementById('id02').style.display='none'" class="close2" title="Close Modal">&times;</span>

        <!-- Modal Content -->
        <form class="modal-content2">
            <div class="container3">
                <h1>Sign Up</h1>
                <p>Please fill in this form to create an account.</p>
                <hr>
                <label for="firstName"><b>First Name</b></label>
                <input type="text" id="firstName" placeholder="Enter First Name" name="firstName" required>

                <label for="lastName"><b>Last Name</b></label>
                <input type="text" id="lastName" placeholder="Enter Last Name" name="lastName" required>

                <label for="username"><b>Username</b></label>
                <input type="text" id="username2" placeholder="Enter Username" name="username" required>

                <label for="email"><b>Email</b></label>
                <input type="text" id="email" placeholder="Enter Email" name="email" required>

                <label for="psw"><b>Password</b></label>
                <input type="password" id="password2" placeholder="Enter Password" name="psw" required>

                <label for="psw-confirm"><b>Confirm Password</b></label>
                <input type="password" id="cfmpassword2" placeholder="Confirm Password" name="psw-confirm" required>

                <br>
                <br>

                <p>By creating an account you agree to our <a href="aboutus.html" style="color:dodgerblue">Terms & Privacy</a>.</p>

                <div class="clearfix">
                    <button type="button" onclick="document.getElementById('id02').style.display='none'" class="cancelbtn2">Cancel</button>
                    <!--
                        modify the button to a standard button rather than a submit
                        - this enables the ajax function to do what is intended.

                        An alternative would be to invoke `event.preventDefault()` within
                        the signUp(event) function to stop the submit button from actually
                        submitting the form
                    -->
                    <button type="button" class="signupbtn" onclick="signUp(event)">Sign Up</button>
                </div>

            </div>
        </form>
    </div>

</body>

</html>
Professor Abronsius
  • 33,063
  • 5
  • 32
  • 46
  • 1
    I used this https://www.w3schools.com/howto/howto_css_signup_form.asp to code my signup form (modal), doesnt seem to have anything that will affect the button type. – CBCH Jan 20 '20 at 13:54