Question

在我的网页中，我想以两种方式提交表单。

点击图片（说继续）
点击超链接（再次是图片）

我需要验证我的表单。请参阅下面的代码

<table width="989" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td width="989" align="center" valign="top" style="text-align:left;"><table align="left" width="989" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="24" align="left" valign="top" background="../images/box-top-tile.jpg"><img src="../images/box-left-top.jpg" width="24" height="24" /></td>
                  <td width="941" align="left" valign="top" background="../images/box-top-tile.jpg"><img src="../images/box-top-tile.jpg" width="24" height="24" /></td>
                  <td width="24" align="right" valign="top" background="../images/box-top-tile.jpg"><img src="../images/box-right-top.jpg" width="24" height="24" /></td>
                </tr>
                <tr>
                  <td align="left" valign="top" background="../images/box-left-tile.jpg"><img src="../images/box-left-tile.jpg" width="24" height="24" /></td>
                  <td height="380" align="left" valign="top" bgcolor="#F9F9F9" style="vertical-align:top;"><table border="0" cellspacing="0" width="941" >
                      <tr>
                      <td width="44"></td>
                        <td style="vertical-align:top;"><!-- start left side-->
                          <form name="frm_signup1" action="signuppersonal" onSubmit="return frmvalidate();" method="post">
                            <table border="0" cellspacing="0" cellpadding="0" width="455" height="380" >
                              <tr>
                                <td class="signup-head" height="50" style="color:#FFFFFF;">&nbsp;Create Your Profile:&nbsp;<span style="font-size:16px">Getting Started</span></td>
                              </tr>
                              <tr>
                                <td class="signup-box" style="padding-bottom:0px;">MY text. 
                      <br>
                                  <div style="float:left">
                                    <input type="checkbox" name="read" id="id_read" />
                                    I have read and would like to continue</div>
                                  <div style="float:right">
                                    <input type="image" src="../images/site/continue.png" border="0" />
                                    <input type="hidden" name="frm_submit" value="1" />
                                  </div></td>
                              </tr>
                              <tr>
                                <td height="50" style="background-image:url(../images/site/box-grey.png); background-repeat:no-repeat"></td>
                              </tr>
                            </table>
                          </form></td>
                          <td width="50"></td>
                        <td width="355" style="text-align:right; vertical-align:top"><img src="../images/site/main-category.jpg" border="1" /> </td>
                        <td width="44"></td>
                      </tr>
                      <tr>
                      <td colspan="5">&nbsp;</td>
                      </tr>
                      <tr>
                        <td colspan="5" align="center"><table border="0" cellpadding="0" align="center" cellspacing="0">
                            <tr>
                              <td width="30" align="left" style="vertical-align:middle"><img src="../images/site/right-arrow-disabled.png"></td>
                              <td style="border:1px solid #999999; width:300px;"><table border="0" cellspacing="0" cellspacing="0" height="20" >
                            <tr>
                              <td width="20" style="background-color:#CCCCCC"></td>
                            </tr>
                          </table></td>
                        <td width="30" style="text-align:right; vertical-align:middle"><a href="#" onclick="document.frm_signup1.submit();"><img src="../images/site/left-arrow.png" border="0"></a></td>
                      </tr>
                    </table></td>
                </tr>
                <tr>
                      <td colspan="5" height="25" style="text-align:center; vertical-align:bottom;" ><span style="font-size:16px; color:#000000;">Your Progress</span></td>
                      </tr>
              </table></td>
            <td height="380" align="right" valign="top" background="../images/box-right-tile.jpg"><img src="../images/box-right-tile.jpg" width="24" height="24" /></td>
          </tr>
          <tr>
            <td align="left" valign="top" background="../images/box-btm-tile.jpg"><img src="../images/box-left-bottom.jpg" width="24" height="24" /></td>
            <td align="left" valign="top" background="../images/box-btm-tile.jpg"><img src="../images/box-btm-tile.jpg" width="24" height="24" /></td>
            <td align="right" valign="top" background="../images/box-btm-tile.jpg"><img src="../images/box-right-bottom.jpg" width="24" height="24" /></td>
          </tr>
        </table></td>
    </tr>
  </table>

单击图像时（即第一种方式），我的表单验证工作正常。但是，当我点击超链接表单验证不起作用。请参阅我的表单验证码

<script type="text/javascript">
function frmvalidate(){

    if(document.getElementById('id_read').checked == false){
        alert('Please select the Checkbox');
        return false;
    }
    return true;
}
</script>

Answer 1

应该回答您的问题：http://www.webdevelopersnotes.com/tips/html/using_an_image_as_a_submit_button.php3

Answer 2

使用

<input type="image"...>

在表单中，并使用表单上的onsubmit处理程序进行验证。

Answer 3

'fm'是您的表单ID

在超链接上提交表单

<a href="" onclick="document.getElementById('fm').submit();return false;">Submit</a>

带图片

（只需使用<input type="image" instead of <input type="submit"

<input type="image" src="" onclick="document.getElementById('fm').submit();return false;" >

单击超链接时提交表单

3 个答案: