使用 jquery 将提交按钮替换为图像按钮答案

【问题标题】：Replacing a submit button with a image button using jquery使用 jquery 将提交按钮替换为图像按钮
【发布时间】：2013-01-29 12:07:13
【问题描述】：

如何使用 jquery 将表单提交按钮替换为图像提交按钮？

我需要使用 jquery 的原因是因为我正在使用插件来生成联系表单，而 jquery 似乎是在不进入插件代码的情况下替换它的最有效方法。

【问题讨论】：

标签： jquery html

【解决方案1】：

如果你是在 jQuery 中做的，并且你的表单是动态生成的，你可以应用这些

var submit = $('form').find('input[type=submit]');
submit.hide();
submit.after('<input type=image src=test.jpg />');

由于我们无法将图像放入 type=submit 输入中，因此我将其隐藏并放置输入 type=image，因为它也充当提交。

我们也可以使用DHuntrods提供的css by

var submit = $('form').find('input[type=submit]');
submit.addClass('form-submit');

【讨论】：

谢谢，我会尝试并报告！

【解决方案2】：

按钮是否有一个类或 id 可以用来将它绑定到一些 css？如果是这样，您可能不需要使用 jQuery：

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style>
      .form-submit { text-indent:-9999em; border:0; width:[WIDTH OF IMAGE]; height:[HEIGHT OF IMAGE]; background:#fff url([URL TO IMAGE]) no-repeat 0 0 ; line-height:0 font-size:0; }
    </style>
  </head>

  <body>

    <form>
      [...]
      <input type="submit" class="form-submit"/>
    </form>

  </body>
</html>

【讨论】：

不是我看不出来，它指定它只是一个“输入”。
那太糟糕了，本来是最简单的！如果您不担心 ie6，您可以使用类似于 rob 发布的 'input[type=submit] { [...] } '但纯粹是 css 的属性选择器。但说真的，谁能忽略ie6呢？叹息。

【解决方案3】：

你可以用几行javascript来做到这一点

var element = document.getElementById('btn'); //assuming the button has an ID of btn

element.setAttribute('type','image');
element.setAttribute('src','path-to-image.ext');

不过，对于 IE，您需要替换元素，因为 IE 不允许动态更改类型.. 所以

var oldO = document.getElementById('btn');

var newO=document.createElement('input');
newO.type='image';
newO.name = oldO.name;
// any other attributes you want to copy over..
newO.src='path-to-image.ext';
oldO.parentNode.replaceChild(newO,oldO);

【讨论】：