Redirect simple HTML page using JavaScript

Question

I am performing JavaScript validation on a simple HTML page. On error I am trying to redirect the page to Error.html, using window.location.href="Error.html".

I get the JavaScript pop displaying the error but page doesn't redirect.

JS:

function checkifFormIsFilled() {

    var txtUserName = document.getElementById("txtUserName").value;
    var txtFirstName = document.getElementById("txtFirstName").value;
    var txtLastName = document.getElementById("txtLastName").value;
    var txtEmail = document.getElementById("txtEmail").value;
    var txtArea = document.getElementById("txtArea").value;

    var errMessage = "";
    var errorInForm = false;

    if (txtUserName === "") {
        errMessage = "UserName";
        errorInForm = true;
    }
    if (txtFirstName === "") {
        errMessage += ", First Name";
        errorInForm = true;
    }
    if (txtLastName === "") {
        errMessage += ", Last Name";
        errorInForm = true;
    }
    if (txtEmail === "") {
        errMessage += ", Email";
        errorInForm = true;
    }
    if (txtArea === "") {
        errMessage += ", Address";
        errorInForm = true;
    }


    if (errorInForm == true) {
        errMessage += " are required fields";
        window.alert(errMessage);
        //window.location.href = "Error.html";        
        window.navigate("Error.html");
    }
}

HTML:

<form method="post" style="width: 560px; height: 850px; margin-left: 10px; margin-top:10px">
    <fieldset>
        <legend>New User</legend>
        <table>
            <tr>
                <td>
                    <label>User Name:</label></td>
                <td>
                    <input type="text" id="txtUserName" name="User Name" onblur="checkRequired(this)" maxlength="10" /></td>
            </tr>

            <tr>
                <td>
                    <label>First Name:</label></td>
                <td>
                    <input type="text" id="txtFirstName" name="First Name" maxlength="10" onblur="checkRequired(this)" /></td>
            </tr>

            <tr>
                <td>
                    <label>Last Name:</label></td>
                <td>
                    <input type="text" id="txtLastName" name="Last Name" maxlength="10" onblur="checkRequired(this)" /></td>

            </tr>
            <tr>
                <td>
                    <label>Email: </label>
                </td>
                <td>
                    <input type="text" name="emailInput" id="txtEmail" onblur="checkRequired(this)" /></td>
            </tr>

            <tr>

                <td>
                    <label for="lblAddress">Address</label></td>
                <td>
                    <textarea id="txtArea" name="txtAddress" cols="50" rows="5" maxlength="1000" onblur="checkRequired(this)"></textarea></td>
            </tr>


            <tr>
                <td>Groups</td>
                <td>
                    <select name="selGroups">
                        <option value="c1">Employee</option>
                        <option value="c1">HR</option>
                        <option value="c1">Director</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>Status</td>
                <td>
                    <select name="selStatus">
                        <option value="c1">Active</option>
                        <option value="c2">Inactive</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <input id="btnSubmit" value="Add User" type="submit" onclick="checkifFormIsFilled();" />
                </td>
                <td>
                    <button id="btnCancel">Cancel</button>
                </td>
            </tr>

        </table>
    </fieldset>

</form>

@qwerty You probably put the function definition in page load — user1726343
– user1726343, Commented Oct 27, 2012 at 12:22
Put the function call in an onsubmit attribute on the form instead. You may also have to return false as well. — DanMan
– DanMan, Commented Oct 27, 2012 at 13:14
Also, just a note on user experience, I, as the user, would appreciate you much more if you'd state where the error is inline, rather than throwing me away on some error page. — Madara's Ghost
– Madara's Ghost, Commented Oct 27, 2012 at 14:49

Shiridish · Accepted Answer · 2012-10-27 12:36:09Z

2

This should do:

  if (errorInForm == true) {
            errMessage += " are required fields";
            window.alert(errMessage);
            window.location = "Error.html";
        }

answered Oct 27, 2012 at 12:36

Shiridish

4,9625 gold badges37 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1726343 Over a year ago

That is actually less semantic than window.location.href and achieves the same results.

DanMan · Accepted Answer · 2012-10-27 14:44:02Z

1

Put the function call in an onsubmit attribute on the form element instead. You may also have to return false as well, if an error was found, to prevent it from going to the same page instead of your error page.

answered Oct 27, 2012 at 14:44

DanMan

11.6k4 gold badges43 silver badges61 bronze badges

Comments

score 0 · Accepted Answer · 2012-10-27 12:46:41Z

0

Try this:

<input id="btnSubmit" value="Add User" type="button" onclick="checkifFormIsFilled();" />

Since the form was submitting to itself, the redirect wasn't occurring.

DEMO

edited Oct 27, 2012 at 12:46

answered Oct 27, 2012 at 12:27

user1726343

2 Comments

User Over a year ago

I had specified action="SomeOtherPage.html" in form tag, but still was not able to redirect using JS.

user1726343 Over a year ago

@ankit If you do that it will redirect to SomeOtherPage instead of Error.html. Check the demo.

Collectives™ on Stack Overflow

Redirect simple HTML page using JavaScript

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related