javascript - 单击图像提交表单

Question

这是我的代码:

<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>

但随后我点击了取消图像。正在提交表格。如何停止它，因为我只想刷新页面。有没有办法为图像提供重置功能？

Answer 1

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

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

理论上，提交图像也应该如此，但实际上您应该放弃事件处理程序并让默认操作在单击时提交表单。

对于仅导航到页面的按钮，最好使用简单的链接。

Is there any way of giving reset functionality to an 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;

您确定要“重置”吗？它们很少有用，而且如果不小心点击认为它们是提交按钮，通常会很烦人......