"Submit" Form and Direct to Javascript Generated URL

Question

I have a login form that, when completed, sends users to a page with a JavaScript generated URL (allowing me to pass a JavaScript variable to my PHP script using $_GET). However, in order to do that, the Login button is currently 'type="button"'. While everything works, it means that users cannot login by hitting Enter; they must actually click the Login button. Is there a way I can "Submit" the form, while still having it point to the JavaScript generated URL?

This seems like a pretty basic concept, which tells me I might be approaching it the wrong way to begin with. Any guidance is appreciated.

HTML:

<form name="login">
    Username: <input type="text" name="user_id"/>
    Password: <input type="password" name="pswrd"/>
    <input type="button" onclick="check(this.form)" value="Login"/>
</form>

JavaScript:

function check(form) {
    var userCredentials = [["jsmith", "smithpassword", "John Smith"], ["jdoe", "doepassword", "Jane Doe"]];
    var credCheck = 0;
    for (var i = 0; i < userCredentials.length; i++) {
        if (userCredentials[i][0] == form.user_id.value) {
            credCheck += 1;
            var displayName = userCredentials[i][2];
            if (userCredentials[i][1] == form.pswrd.value) {
                window.open("home.php?display_name=" + displayName, "_self");
            } else {
                alert('The username and password do not match.');
                return false;
            }
        }
    }
    if (credCheck == 0) {
        alert('The username entered is not valid.');
        return false;
    } else {
        return true;
    }
}

put an other name instead of _self and set it for target for form, and then submit the form — el Dude
– el Dude, Commented Nov 11, 2013 at 21:52
I think, by assigning it once for both form.target and window. Oh, I forgotten. Define a var name for window. Just like var W = window.open(..... — el Dude
– el Dude, Commented Nov 11, 2013 at 22:34

Nasser Torabzade · Accepted Answer · 2013-11-11 22:14:58Z

1

Instead of opening php page via javascript, you need to change the form action dynamically to point to your generated url.

HTML:

<form name="login">
    Username: <input type="text" name="user_id"/>
    Password: <input type="password" name="pswrd"/>
    <input type="submit" onclick="check(this.form)" value="Login"/>
</form>

JavaScript: (line 9 & 10 changed)

function check(form) {
    var userCredentials = [["jsmith", "smithpassword", "John Smith"], ["jdoe", "doepassword", "Jane Doe"]];
    var credCheck = 0;
    for (var i = 0; i < userCredentials.length; i++) {
        if (userCredentials[i][0] == form.user_id.value) {
            credCheck += 1;
            var displayName = userCredentials[i][2];
            if (userCredentials[i][1] == form.pswrd.value) {
                form.action = "home.php?display_name=" + displayName;
                return true;
            } else {
                alert('The username and password do not match.');
                return false;
            }
        }
    }
    if (credCheck == 0) {
        alert('The username entered is not valid.');
        return false;
    } else {
        return true;
    }
}

answered Nov 11, 2013 at 22:14

Nasser Torabzade

6,7308 gold badges30 silver badges36 bronze badges

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

2 Comments

jackel414 Over a year ago

So, I can get this to partially work. When made those changes, I was able to get the form "Submit" as I wanted and go to 'home.php'. However, the rest of the URL is '?user_id=jsmith&pswrd=smithpassword', instead of '?display_name=JohnSmith'. Any idea why that might be?

Nasser Torabzade Over a year ago

@jackel414 add method="post" to the form tag in your html

GluePear · Accepted Answer · 2013-11-11 22:14:54Z

0

You could try:

<form name="login" onsubmit="check(this)">
    Username: <input type="text" name="user_id"/>
    Password: <input type="password" name="pswrd"/>
    <input type="submit" value="Login"/>
</form>

answered Nov 11, 2013 at 22:14

GluePear

7,77321 gold badges73 silver badges127 bronze badges

1 Comment

jackel414 Over a year ago

That was one of the solutions I tried. Can't get it to do anything but refresh the page.

Collectives™ on Stack Overflow

"Submit" Form and Direct to Javascript Generated URL

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related