Form input:Image onClick event doesn't redirect page. HTML and Javascript

Question

I'm having issues trying to put a simple password protect script in my HTML (I know its not secure, I don't need high level protection) but the redirect function doesn't work.

I'm having trouble with the input:image Onclick action it doesn't redirect to the proper page when the correct password is entered. If I use a input:button then it works but I want to use a input:image. What am I doing wrong? Any help is appreciated.

Here is the Javascript:

<script language="javascript">
<!--//
/*PW Script*/
function pasuser(form) {
if (form.pass.value=="fred") {              
window.location="portfolio.html";
} 
else { 
	alert("Please enter the correct Password. Or request one under contacts");
}
}

//-->
</script>

Here is my form to call the Javascript:

 <form name="login">
            <fieldset>	
            <div class="LC_field2">
           	
           	    <span class="ghosttext">
				<input type="password" name="pass" placeholder="Password"> 
              </span>
            </div>    
			<div class="LC_field3">    
                <input type="image" border="0" src="images/go_button.png" width="52" height="25" alt="Go" onClick="pasuser(this.form);" />
             </fieldset>
			</form>

Notice, that clicking on input type="image" submits the form. For some reason form submitting overrides setting the location. (Related question.) Also you shouldn't hardcode passwords to the page. — Teemu
– Teemu, Commented Dec 16, 2014 at 19:41
@Teemu Thanks for your suggestion. I know its not secure but the page it goes to doesn't have anything valuable. I just need a light secure layer feature — contenthouse
– contenthouse, Commented Dec 17, 2014 at 23:52

daniel.brubeck · Accepted Answer · 2014-12-16 20:01:22Z

2

You just have to return false on your onclick event to prevent the default browser behavior for input elements.

onClick="pasuser(document.forms.login); return false;"

answered Dec 16, 2014 at 20:01

daniel.brubeck

6544 silver badges12 bronze badges

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

Comments

Raham · Accepted Answer · 2014-12-16 20:07:44Z

1

First of all you should do like this.

And then,

<script language="javascript">
<!--//
/*PW Script*/
function pasuser(form) {
    var pass = document.getElementsByName("pass")[0].value;
   if (pass == "fred") {              
    var your_url            = "portfolio.html";
    window.location.href       = your_url;
   } 
  else
  { 
    alert("Please enter the correct Password. Or request one under contacts");
  }
}

//-->
</script>

edited Dec 16, 2014 at 20:07

answered Dec 16, 2014 at 19:56

Raham

4,9613 gold badges26 silver badges29 bronze badges

Comments

SeanCannon · Accepted Answer · 2014-12-16 19:45:46Z

0

Change this:

<input type="image" border="0" src="images/go_button.png" width="52" height="25" alt="Go" onClick="pasuser(this.form);" />

to this:

<img border="0" src="images/go_button.png" width="52" height="25" alt="Go" onClick="pasuser(document.forms.login);" />

answered Dec 16, 2014 at 19:45

SeanCannon

78.1k17 gold badges126 silver badges145 bronze badges

1 Comment

SeanCannon Over a year ago

No really, an <img/> tag with a click event is not an input field and will not trigger form submission.

Collectives™ on Stack Overflow

Form input:Image onClick event doesn't redirect page. HTML and Javascript

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related