Javascript Tapestry Form問題を提出する

Question

私はウェブサイトにアップロードするためにいくつかのHTMLを送ってきました。基本的にはログインフォームですが、ブラウザではログインボタンは何もしません。私はそれが問題であるかもしれないと思う様式化されたボタンイメージ（img src = "images/submit.png" alt = "submit"）を使用してフォームを送信するために "javascript：tapestry.form.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

上記のコメントに続き、ここで私たちの本当の狙いは、インクルードがボタンルックスを提出する方法を変更するのではなく、画像に行動を提出追加することです。 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