JavaScript挂毯表单提交问题

Question

因此，我已经发送了一些HTML来上传到我们的网站，从本质上讲，这是登录表单，但是当在浏览器中按下时，登录按钮无能为力。我看到它使用的是" JavaScript：Tapestry.form.submit"来使用风格化按钮图像（IMG SRC =" Images/submit.png" Alt =" submit"）提交表单，我认为这可能是问题。<<<<<<<<<<<<<<<<<<<<<<

使用（输入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

从上面的注释中关注，我们的真正目的是更改提交按钮外观的方式，而不是将提交行为添加到图像中。我们可以使用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>

在这里工作示例