如何使提交按钮成为href和图像答案

【问题标题】：How to make the submit button a href and image如何使提交按钮成为href和图像
【发布时间】：2016-05-01 17:25:11
【问题描述】：

我正在尝试使我的提交按钮成为图像，并且在单击它时链接到另一个页面。

这是当前有效的提交按钮，但不是 href 或图像

<input type="submit" name="submit"  alt="add" onclick="add()" >

这些是我尝试过的多种方法，但它们似乎都不起作用。谁能看出我哪里出错了？

<input type="image" name="submit" src="img/add.png" class="addButton" id="addButton" />

<a href="bookmarks.php" onclick="$(this).closest('form').submit()"><img src="img/add.png" class="addButton" id="addButton" alt="add button" /> </a>

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

最后是 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>

【问题讨论】：

使用标签和背景图片
How to make a submit out of a <a href...>...</a> link?的可能重复

标签： javascript php jquery html css

【解决方案1】：

检查此链接： 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>

您可以使用 javascript 来模仿 href 重定向

【讨论】：

【解决方案2】：

尝试在你的图像被渲染的地方给 div id，假设你的 div 的 id 是“divImage”，你可以写下面是 JS：

$("#divImage").click(function(){
  //On Click Event
});

您可以在“点击”事件中编写表单提交代码和重定向代码。您的问题将得到解决。

【讨论】：

【解决方案3】：

而不是input 输入submit

使用div，在div 中设置图像tag，如下所示

<div id="yoyo">
   <img src="whateva" />
</div>

现在点击img标签ID或DivID，submitform。

喜欢：

    $( "#yoyo" ).click(function() {
      $( "#FormID" ).submit();

      //or if you want to redirect than
       window.location.href = "http://stackoverflow.com";
    });

【讨论】：

【解决方案4】：

使用 css 将背景图片应用到提交按钮。

// html
<input type="submit" name="submit"  alt="add" onclick="add()" >

// css
form input[type=submit]{
  background-image: url('img/example.png');
}

并根据需要添加其他样式属性。不要忘记从css中的按钮中删除边框等。

【讨论】：