Here is my code:
<form action="telecallerinfo.php?action=modify&id=<?php echo $id;?>" method="post" enctype="multipart/form-data">
<table class="panel1">
<tr>
<td>Caller Name: <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>
but then I am clicking on the cancel image. The form is being submitted. How to stop it because I want only the page to be refreshed. Is there any way of giving reset functionality to an image?
Here is my code:
<form action="telecallerinfo.php?action=modify&id=<?php echo $id;?>" method="post" enctype="multipart/form-data">
<table class="panel1">
<tr>
<td>Caller Name: <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>
but then I am clicking on the cancel image. The form is being submitted. How to stop it because I want only the page to be refreshed. Is there any way of giving reset functionality to an image?
Share Improve this question edited Sep 27, 2010 at 8:29 bragboy 35.6k30 gold badges116 silver badges175 bronze badges asked Sep 27, 2010 at 8:25 champchamp 8172 gold badges11 silver badges23 bronze badges5 Answers
Reset to default 3Image inputs submit the form when clicked. You need to return false in your event handler to stop the normal action of the button taking place.
<input name="cancel" id="cancel" type="image" src="images/cancel.gif" width="60" onclick="window.location.href='telecallerinfo.php'; return false;"/>
In theory the same should hold for the submit-image, but actually you should just discard the event handler and let the default action submit the form when clicked.
For a button that just navigates to a page you would be better off using a simple link.
Is there any way of giving reset functionality to an image?
If you really wanted:
<img onclick="document.getElementById('someform').reset();">
But it'd be better to do it without JS using a real reset button:
<button type="reset">
<img src="images/cancel.gif" alt="Reset"/>
</button>
This will give you a button graphic around the image, but you can get rid of that with CSS:
border: none; padding: 0; margin: 0; background: transparent;
Are you sure you want a ‘reset’? They're rarely useful, and often annoying if accidentally clicked thinking they're submit buttons...
<a href="telecallerinfo.php"><img src="images/cancel.gif" alt="DON'T FORGET ALTERNATIVE TEXT"></a>
You may try this if you want it as an image:
<button type="reset">
<img src="image location" alt="Reset" />
</button>
It works but, RESET buttons are destructive and should not be used, except in situations where destruction of user input is really desirable.
<input type="reset" name="Reset" id="button" value="Reset" />
Just try this one
<input type="image" src="butup.gif" alt="Submit button">
Some browsers wont support to "alt" tab so there is another way:
<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>