即使在onclick =“return true;”

时间:2015-10-05 05:57:02

标签: javascript html twitter-bootstrap

即使onclick返回true,我也遇到链接无法跟踪的问题。它在chrome和firefox中运行良好。我注意到这个特殊的行为只有锚在tag.I我使用bootstrap响应(不确定这是否影响..)

样品:

<form>
<a id="SignonButton" class="SignonButton" HREF="https://www.google.com" onClick="return true;">
    <button type="button" class="btn btn-primary" id="button1" name="button1">Inside form doesnt work</button>
        </a>
</form>

<a id="SignonButton" class="SignonButton" HREF="https://www.google.com" onClick="return true;">
    <button type="button" class="btn btn-primary" id="button1" name="button1">Outside form works</button>
        </a>

@TJ是的确有效。 实际上我正在修改一个现有的表单以使其响应表单有两个动作和两个输入元素 1. HREF =&#34; Javascript:transferRequest()&#34; 2. onClick =&#34; validateRequest()&#34;

表单有两个输入元素input1:email和input2:password。

我从现有代码中可以理解的是,validateeRequest()验证了电子邮件模式(x@y.z)和密码的alphanum模式并返回true

如果两种模式匹配。

验证请求检查两个文本框以确认输入文本是否与模式匹配(不验证只检查模式是否匹配,转移

请求实际上将两个文本原样转移到服务器上。

正如建议使用<a>按钮是正确的,或者我需要将验证方法添加到按钮 我不被允许彻底改造网站,只是将其转换为响应。     

<div>
    <label for="email">Email</label>
    <input type="TEXT" size="16" maxlength="19" autocomplete="OFF">
</div>
<div>
    <label for="Password" >Password</label>
    <input type="PASSWORD" size="16" maxlength="19" autocomplete="OFF>
</div>
<div>   
    <a id="SignonButton" HREF="javascript:transferRequest('verify')" onClick="return ValidateRequest('Verify');">
     <button type="button" class="btn btn-primary" id="button1" name="button1">Inside form doesnt work</button>
        </a>
</div>
</form>


function transferRequest()
{

var form = document.loginForm;
document.loginForm.submit();//submits to local exchange server
//some crazy validation 
}

function validateRequest()
{
// code to check if the email input follows pattern (x@y.z) or not
// code to check if the password has alphanum as pattern or not
//return true if both pattern matches
}

2 个答案:

答案 0 :(得分:0)

您无法在链接中找到button。它的invalida的内容模型是

  

透明,但必须没有interactive content后代。

因为它无效,浏览器可以自由地做任何它认为应该做的事情,包括在链接之外重新定位按钮。

另外,return trueonClick没有任何影响。 (return false可以,但不是return true。)

因此,您需要做的是修改您的内容以使其有效。然后它可以跨浏览器正常工作。由于您正在使用Bootstrap,因此有两种选择:

  1. 完全摆脱button

    <a id="SignonButton" class="btn btn-primary SignonButton" href="https://www.google.com">Click Me</a>
    

    由于Bootstrap样式,它看起来像一个按钮。

  2. 完全摆脱链接:

    <button type="button" id="SignonButton" class="SignonButton btn btn-primary" onclick="location = 'http://www.google.com'>Click Me</button>
    
  3. #1将是强烈首选,因为它毕竟是一个链接。

答案 1 :(得分:0)

从标签中取出按钮。如前所述,它无效。使用这样的东西:

<button type="button" class="btn btn-primary" id="button1" name="button1" onclick="window.location='http://www.google.com';">Inside form should work. ;)</button>