Javascript Tapestry 表单提交问题

Question

所以我收到了一些 HTML 来上传到我们的网站，本质上它是一个登录表单，但是在浏览器中按下登录按钮时没有任何作用。我看到它使用“javascript:tapestry.form.submit”来使用我认为可能是问题的风格化按钮图像（img src="images/submit.png" alt="submit"）提交表单。

当我使用 (input type="submit" value="Login" /) 将此按钮更改为标准按钮时，它工作正常。是否有任何人可以想到为什么此按钮可能导致问题而不是浏览器中的负载？如果您输入您的详细信息并按回车键，则该表单有效。

<div id="loginPanel">
    <div class="text">
        <p class="loginText">Welcome</p>
        <p class="loginText">Log-in to place your order</p>
    </div>
    <form method="post" action="http://coreprint.net/aspire/Login,loginForm.sdirect" id="loginForm">
        <div style="display:none;" id="loginFormhidden">
            <input type="hidden" name="formids" value="If_0,If_2,username,password,loginButton,If_4" />
            <input type="hidden" name="seedids" value="" />
            <input type="hidden" name="submitmode" value="" />
            <input type="hidden" name="submitname" value="" />
            <input type="hidden" name="If_0" value="F" />
            <input type="hidden" name="If_2" value="F" />
            <input type="hidden" name="If_4" value="F" />
            <input type="hidden" name="Hidden" id="Hidden" value="X" />
        </div>

        <table>
            <tr>
                <td>Username</td>
                <td><input type="text" name="username" value="" id="username" size="30" /></td>
            </tr>
            <tr>
                <td>Password</td>
                <td><input type="password" name="password" value="" id="password" size="30" /></td>
            </tr>
        </table>

        <a href="javascript:tapestry.form.submit('loginForm', 'loginButton');" id="loginButton" class="bLink"> 
            <img src="images/submit.png" alt="submit">
        </a>
        <input type="submit" style="width:0;height:0;border:0"/>
    </form>
</div>

Answer 1

从上面的 cmets 开始，我们的真正目标是改变提交按钮的外观，而不是向图像添加提交行为。我们可以用 CSS 做到这一点。

#loginForm > input[type="submit"] {
  width:60px;
  height:60px;

  // transparent background colour
  background-color: rgba(0,0,0,0);

  // allows the background to resize when you change width/height
  background-size:100% 100%;

  // use your submit image
  background-image: url("images/submit.png");

  // remove default button border
  border:none;

  // make a nicy pointy cursor
  cursor:pointer;
}

我已经从 HTML 中删除了锚点和图像，并向提交按钮添加了一个空白值，因此我们的背景图像上不会显示任何文本。

<div id="loginPanel">
    <div class="text">
        <p class="loginText">Welcome</p>
        <p class="loginText">Log-in to place your order</p>
    </div>
    <form method="post" action="http://coreprint.net/aspire/Login,loginForm.sdirect" id="loginForm">
        <div style="display:none;" id="loginFormhidden">
            <input type="hidden" name="formids" value="If_0,If_2,username,password,loginButton,If_4" />
            <input type="hidden" name="seedids" value="" />
            <input type="hidden" name="submitmode" value="" />
            <input type="hidden" name="submitname" value="" />
            <input type="hidden" name="If_0" value="F" />
            <input type="hidden" name="If_2" value="F" />
            <input type="hidden" name="If_4" value="F" />
            <input type="hidden" name="Hidden" id="Hidden" value="X" />
        </div>

        <table>
            <tr>
                <td>Username</td>
                <td><input type="text" name="username" value="" id="username" size="30" /></td>
            </tr>
            <tr>
                <td>Password</td>
                <td><input type="password" name="password" value="" id="password" size="30" /></td>
            </tr>
        </table>

        <input type="submit" value="" />
    </form>
</div>

Working example here