How to make the submit button a href and image

Question

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>

Possible duplicate of [How to make a submit out of a ... link?](http://stackoverflow.com/questions/275039/how-to-make-a-submit-out-of-a-a-href-a-link) — Abhijith Sasikumar, Jan 25 '16 at 12:07

score 3 · Answer 1 · answered Jan 25 '16 at 12:07

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.

score 3 · Accepted Answer · answered Jan 25 '16 at 12:08

Check this link: https://jsfiddle.net/0e2rykap/

<html>
  <body>
    <h1>
      <button type="submit" class="btn_submit">
        <img src="http://www.smartwebby.com/imgs/tutorials/fireworks/website-design/submit-button.jpg" />
      </button>
    </h1>
  </body>
</html>

you can use javascript to mimick the href redirection

score 2 · Answer 3 · answered Jan 25 '16 at 11:59

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.

score 2 · Answer 4 · answered Jan 25 '16 at 12:00

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.com";
    });

How to make the submit button a href and image

4 Answers4