logo标签列表

如何将提交按钮设置为超链接和图像

javascriptphpjqueryhtmlcss
3
我正在尝试将提交按钮更改为图像，并在单击后链接到另一个页面。
这是当前的提交按钮，它可以工作，但不是超链接或图像。
<input type="submit" name="submit"  alt="add" onclick="add()" >

以下是我尝试过的多种方法，但似乎都不起作用。有人能看出我哪里出了问题吗？
  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>

最后是位于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>
请使用带有背景图像的<a>标签。 - Arun Kumar M
<img src="(your image url)" onclick="add()" /> - Nithin Paul
可能是重复的问题：如何将<a href...>...</a>链接制作为提交？ - Abhijith Sasikumar
4个回答
3
尝试给呈现图像的 div 元素赋予 id，假设该 div 的 id 是 "divImage"，可以在 JS 中编写以下代码：
尝试在渲染图像的 div 元素中添加 id 属性，假设该 div 元素的 id 是 "divImage"，则可使用以下 JS 代码：
$("#divImage").click(function(){
  //On Click Event
});

您可以将表单提交代码和重定向代码编写在“on-click”事件中，这样您的问题就会得到解决。

3

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>

您可以使用JavaScript模拟href重定向。
2
使用CSS向提交按钮应用背景图像。
// html
<input type="submit" name="submit"  alt="add" onclick="add()" >

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

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

2

不要使用 input 类型的 submit

可以使用一个 div，在其中设置一个图像 tag，如下所示

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

现在，在单击img标签的ID或Div的ID时，submit表单。

例如：

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

      //or if you want to redirect than
       window.location.href = "http://stackoverflow.com";
    });
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接