CODEWITHSUNDEEP
javascripthtml
Michael
Michael

Reputation: 3239

I want the user to not be able to advance to the next screen if he/she doesn't enter the required information

The function receives the username and password of the user. If either are left empty, nothing happens and they won't be linked to google.ca if they click the "Go" button. If they filed in the required sections then they will be directed to google.ca. For some reason, if any of the text boxes are left unfilled and the Go button is pressed, it brings me to a 404 error page when I want it to just stay on that page until the user fills the textbox. What is causing this problem? This is the HTML file.

<form action="index.php" method="get" id="form" onsubmit="return go(document.getElementById('username'), document.getElementById('password'))">
    <table>
        <tr><td>Username: <input type="text" name="username" maxlength="16" id="username" onKeyUp="updateLength('username', 'usernameLength')" onblur="checkTextField(this);"/> <span id="usernameLength"></span></td></tr>     
        <tr><td>Password: <input type="password" name="password" maxlength="50" id="password" onKeyUp="updateLength('password', 'passwordLength')"> <span id="passwordLength" onblur="checkTextField(this);"></span></td></tr>
        <tr><td><input type="submit" value="Go" id="goButton" onclick="go(username, password)"/></td></tr>
    </table>
</form>

And here is the js file

function loginFunction() {
    var url = "login.html";
    window.open(url);
}

function createAccountFunction() {
    var url2 = "createAccount.html";
    window.open(url2);
}

function go(username, password) {
    if (username != null && password != null) {
        var url = "https://www.google.ca/";
        window.open(url);
    }
}

function updateLength(field, output) {
    var curr_length = document.getElementById(field).value.length;
    var field_mLen = document.getElementById(field).maxLength;
    document.getElementById(output).innerHTML = curr_length + '/' +     field_mLen;
}

function checkTextField(field) {
    if (field.value == '')
        alert("Field is empty");
}

Upvotes: 2

Views: 64

Answers (2)

Zelter Ady
Zelter Ady

Reputation: 6338

I didn't understand your code logic, but maybe I can offer you a way to fix your code by yourself.

You have a form and a button. If you click on the button you execute the go() function. Because the button is a submit button, on the same click you execute one more time the go() function.

My advice is to create a new function, you may name it validate():

function validate() {
    var username = document.get........ 
    var password = document.get........ 
    // more logic here, if need
    if(!username || !password) {
        return false;
    } 
    return true
}

and now, your submit button looks like:

<input type="submit" value="Go" id="goButton" onclick="return validate()"/>

The form won't submit if the validate() function returns false.

Hope this helps.

Upvotes: 0

Matthew Herbst
Matthew Herbst

Reputation: 31983

You aren't stopping the default event of the onsubmit. You can do that by changing your go function to:

function go(username, password) {
    return function(event) {
        event.preventDefault();

        if (username != null && password != null) {
            var url = "https://www.google.ca/";
            window.open(url);
        }
    }
}

You also don't need the return in the HTML. Just call the function.

Upvotes: 1

Related Questions