Question

我怎样才能使用jquery来替换带有图像提交按钮的表单提交按钮？

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

Answer 1

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

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

因为我们无法将图像放在type = submit输入中，所以我隐藏它并放置一个输入类型=图像，因为它也可以作为提交。

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

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

Answer 2

按钮是否有可用于将其绑定到某个css的类或ID？如果是这样，您可能不需要使用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>

Answer 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);

使用jquery用图像按钮替换提交按钮

3 个答案: