表单输入：图像 onClick 事件不会重定向页面。 HTML 和 Javascript答案

【问题标题】：Form input:Image onClick event doesn't redirect page. HTML and Javascript表单输入：图像 onClick 事件不会重定向页面。 HTML 和 Javascript
【发布时间】：2014-12-16 19:38:45
【问题描述】：

我在尝试在我的 HTML 中放置一个简单的密码保护脚本时遇到问题（我知道它不安全，我不需要高级保护）但重定向功能不起作用。

我在 input:image Onclick 操作时遇到问题，当输入正确的密码时，它不会重定向到正确的页面。如果我使用输入：按钮，那么它可以工作，但我想使用输入：图像。我究竟做错了什么？任何帮助表示赞赏。

这里是 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>

这是我调用 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>

【问题讨论】：

注意，点击input type="image" 会提交表单。由于某种原因，表单提交会覆盖设置location。 (Related question.) 此外，您不应将密码硬编码到页面。
最简单的解决方案是删除无用的表单。
@Teemu 感谢您的建议。我知道它不安全，但它转到的页面没有任何有价值的东西。我只需要一个轻量级的安全层功能

标签： javascript html form-submit

【解决方案1】：

您只需在 onclick 事件上返回 false 即可阻止输入元素的默认浏览器行为。

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

【讨论】：

【解决方案2】：

首先你应该这样做。

然后，

<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>

【讨论】：

【解决方案3】：

改变这个：

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

对此：

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

【讨论】：

不是，带有点击事件的<img/> 标签不是输入字段，不会触发表单提交。