CODEWITHSUNDEEP
javascripthtmlforms
Jamie
Jamie

Reputation: 1094

HTML Form using Javascript did not verify instead changed the link

Code:

<h1>Login Form</h1>
<form onsubmit="loginUsingPassword(this.form.loginPassword.value);return false;">
Password : <input type="password" name="loginPassword" /> <input type="submit" value="Submit" />
</form>

<script>
//This is for verifying use.
function generateUserPassword(){
var passwordArray = [];
passwordArray[0]="198237645";
passwordArray[1]="infotalkong";
function loginUsingPassword(inputPassword){
for (int i; i<passwordArray.length; i++){
if (inputPassword=passwordArray[i]){
document.cookie="reportLogged=true;";
window.location.href="http://tool-box.weebly.com/report.html";
}
}
}
</script>

Result:

Input : 198237645 Output : The link changed to http://tool-box.weebly.com/report-login.html?loginPassword=198237645

What is the solution?

Upvotes: 0

Views: 30

Answers (2)

Lawrence Liu
Lawrence Liu

Reputation: 489

I am not quite sure of your requirement, but there are some points might be helpful for you,

  • Generally we use method post for such form submission, rather than the default one(get).

So you might want to to change the follow code

<form onsubmit="loginUsingPassword(this.form.loginPassword.value);return false;">

to the follow one

<form onsubmit="loginUsingPassword(this.form.loginPassword.value);return false;" method="post">

After you do the above change, the password will not be displayed in the URL as you mentioned, to avoid security issue.

  • By reading your code, I assume you would like to check whether the password inputed by user is the same as a list of predefined password in your code.

But you have the follow code there

if (inputPassword=passwordArray[i]){//This is a common bug to mistake === to = in if

If you would like to compare the variable inputPassword and your predefined passwords(passwordArray), you should use == or === rather than the assignment operation(=), so the code should be 

if (inputPassword === passwordArray[i]){

Hope the above hints could help you on debug your code.

Here is a working version based on my understanding to your requirement, but actually you didn't specify your requirement...

<h1>Login Form</h1>
<form onsubmit="loginUsingPassword(document.forms['myForm']['loginPassword'].value);return false;" method="post" name="myForm">
Password : <input type="password" name="loginPassword" /> <input type="submit" value="Submit" />
</form>

<script>
    //This is for verifying use.
    var passwordArray = [];
function generateUserPassword(){
    passwordArray[0]="198237645";
    passwordArray[1]="infotalkong";
}

function loginUsingPassword(inputPassword) {
    generateUserPassword();
    var passwordCorrect = false;
    for (i = 0; i< passwordArray.length; i++){
        if (inputPassword === passwordArray[i]){
            document.cookie="reportLogged=true;";
            passwordCorrect = true;
            window.location.href="http://tool-box.weebly.com/report.html";
        }
    }
    if (passwordCorrect !== true){
        alert("Wrong Password!");
        return false;
    }
}
</script>

Upvotes: 1

Two-Bit Alchemist
Two-Bit Alchemist

Reputation: 18457

Your form tag has no method attribute, so it defaults to GET. It has no action attribute, so it defaults to the page you're on. If you submit the form, it encodes the submitted values in the URL (how GET is designed to work) and you land on the same page. This is exactly the behavior you have specified.

Upvotes: 0

Related Questions