CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
alan smith
alan smith

Reputation: 127

How to make the submit button a href and image

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?

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

Upvotes: 3

Views: 3891

Answers (4)

Ajir
Ajir

Reputation: 215

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

Upvotes: 3

Kunal Gadhia
Kunal Gadhia

Reputation: 360

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.

Upvotes: 3

Amar Singh
Amar Singh

Reputation: 5622

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

Upvotes: 2

Someone
Someone

Reputation: 3568

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.

Upvotes: 2

Related Questions