I'm trying to make my submit button a image and also when clicked it links to another page.
This is the current submit button which works but isn't a href or image
<input type="submit" name="submit" alt="add" onclick="add()" >
These are the multiple methods I've tried but none of them seem to work. Can anyone see where I'm going wrong?
<input type="image" name="submit" src="img/add.png" class="addButton" id="addButton" />
2.
<a href="bookmarks.php" onclick="$(this).closest('form').submit()"><img src="img/add.png" class="addButton" id="addButton" alt="add button" /> </a>
3.
<a href="bookmarks.php" onclick="document.forms['form'].submit(); return false;" type="submit" name="submit"><img src="img/addToBookmarks.png" class="addButton" id="addButton" alt="add button" /></a>
Lastly the form itself on stadiumLargeSymbol.php:
<form class="form" action="stadiumLargeSymbol.php?submit=true" method="post">
<img id="enlargedSymbol" type="text" size="60" name="pathOfSymbol" src='' />
<br />
<input class="inputBox" type="hidden" name="pathOfSymbol" id="pathOfSymbol" />
<script>
var querySrc = URI(window.location.href).search(true).src;
$("#enlargedSymbol").prop("src", querySrc);
$('#pathOfSymbol').val(querySrc);
</script>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br/>
<input type="submit" name="submit" alt="add to bookmarks button" onclick="add()" >
</form>
I'm trying to make my submit button a image and also when clicked it links to another page.
This is the current submit button which works but isn't a href or image
<input type="submit" name="submit" alt="add" onclick="add()" >
These are the multiple methods I've tried but none of them seem to work. Can anyone see where I'm going wrong?
<input type="image" name="submit" src="img/add.png" class="addButton" id="addButton" />
2.
<a href="bookmarks.php" onclick="$(this).closest('form').submit()"><img src="img/add.png" class="addButton" id="addButton" alt="add button" /> </a>
3.
<a href="bookmarks.php" onclick="document.forms['form'].submit(); return false;" type="submit" name="submit"><img src="img/addToBookmarks.png" class="addButton" id="addButton" alt="add button" /></a>
Lastly the form itself on stadiumLargeSymbol.php:
<form class="form" action="stadiumLargeSymbol.php?submit=true" method="post">
<img id="enlargedSymbol" type="text" size="60" name="pathOfSymbol" src='' />
<br />
<input class="inputBox" type="hidden" name="pathOfSymbol" id="pathOfSymbol" />
<script>
var querySrc = URI(window.location.href).search(true).src;
$("#enlargedSymbol").prop("src", querySrc);
$('#pathOfSymbol').val(querySrc);
</script>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br/>
<input type="submit" name="submit" alt="add to bookmarks button" onclick="add()" >
</form>
- use <a> tag with background image – Arun Kumar M Commented Jan 25, 2016 at 11:57
- <img src="(your image url)" onclick="add()" /> – Nithin Paul Commented Jan 25, 2016 at 12:01
- Possible duplicate of How to make a submit out of a <a href...>...</a> link? – Abhijith Sasikumar Commented Jan 25, 2016 at 12:07
4 Answers
Reset to default 3Check this link: https://jsfiddle/0e2rykap/
<html>
<body>
<h1>
<button type="submit" class="btn_submit">
<img src="http://www.smartwebby./imgs/tutorials/fireworks/website-design/submit-button.jpg" />
</button>
</h1>
</body>
</html>
you can use javascript to mimick the href redirection
Try giving id to div where your image is being rendered, Assuming id of your div is "divImage",You can write following is JS :
$("#divImage").click(function(){
//On Click Event
});
You can write your form submission code and redirecting code inside "on-click" event.Your problem will be solved.
Apply a background image to the submit button using css.
// html
<input type="submit" name="submit" alt="add" onclick="add()" >
// css
form input[type=submit]{
background-image: url('img/example.png');
}
And add other styling properties as necessary. Don't forget to remove the border and such from the button in the css.
Instead of input type submit
Use a div , inside div set a image tag like below
<div id="yoyo">
<img src="whateva" />
</div>
Now on click of img tag ID or Div ID , submit the form.
Like :
$( "#yoyo" ).click(function() {
$( "#FormID" ).submit();
//or if you want to redirect than
window.location.href = "http://stackoverflow.";
});