表格在点击图片上提交

时间:2010-09-27 08:25:46

标签: javascript html

这是我的代码:

<form action="telecallerinfo.php?action=modify&id=<?php echo $id;?>" method="post" enctype="multipart/form-data">
<table class="panel1">
    <tr>
        <td>Caller Name:&nbsp;<input name="tele_caller" type="text" size="15" value="<?php echo $tele_caller?>" /></td>
    </tr>
    <tr>
        <td align="right">
        <input name="submit" id="submit" type="image" src="images/submit.gif" width="60" onclick="this.form.submit();"/>
        <input name="cancel" id="cancel" type="image" src="images/cancel.gif" width="60" onclick="window.location.href='telecallerinfo.php';"/>
        </td>
    </tr>
</table>
</form>

然后我点击了取消图片。表格正在提交中。如何阻止它,因为我只想刷新页面。有没有办法为图像提供重置功能?

5 个答案:

答案 0 :(得分:3)

图像输入在单击时提交表单。您需要在事件处理程序中return false停止按钮的正常操作。

<input name="cancel" id="cancel" type="image" src="images/cancel.gif" width="60" onclick="window.location.href='telecallerinfo.php'; return false;"/>

理论上,对于submit-image应该同样如此,但实际上你应该放弃事件处理程序并让默认操作在单击时提交表单。

对于只导航到某个页面的按钮,最好使用简单的链接。

  

有没有办法为图像提供重置功能?

如果你真的想要:

<img onclick="document.getElementById('someform').reset();">

但是如果没有JS使用真正的重置按钮,最好这样做:

<button type="reset">
    <img src="images/cancel.gif" alt="Reset"/>
</button>

这将为您提供图像周围的按钮图形,但您可以使用CSS摆脱它:

border: none; padding: 0; margin: 0; background: transparent;

您确定要重置吗?它们很少有用,如果不小心点击它们认为它们是提交按钮,通常很烦人......

答案 1 :(得分:2)

<a href="telecallerinfo.php"><img src="images/cancel.gif" alt="DON'T FORGET ALTERNATIVE TEXT"></a>

答案 2 :(得分:2)

如果您想将其作为图像,可以试试这个:

<button type="reset">
<img src="image location" alt="Reset" />
 </button>

它有效,但 RESET按钮具有破坏性,不应该 使用,除非在真正破坏用户输入的情况下 合乎需要的。

答案 3 :(得分:0)

试试这个

    <input type="image" src="butup.gif" alt="Submit button">

有些浏览器不支持“alt”标签,因此还有另一种方式:

   <html>
   <body>
   <form action="example.cgi" method="post">
   <input type="text" name="login">
   <br>
    <input type="image" src="submit.gif">
   <input type="image" src="reset.gif">
  </form>
  </body>
  </html>

答案 4 :(得分:0)

<input type="reset" name="Reset" id="button" value="Reset" />