Replacing a submit button with a image button using jquery_问答_开发者

Replacing a submit button with a image button using jquery

开发者 https://www.devze.com 2023-01-06 20:59 出处：网络

how could I go about replacing a form submit button with a image submit button using jquery? The reason I need to use jquery is because I am using a plugin to generate the contact form and jquery see

相关专题：jquery

how could I go about replacing a form submit button with a image submit button using jquery?

The reason I need to use jquery is because I am using a plugin to generate the contact form and jquery seems like the most effective way of replacing it without 开发者_JAVA百科going into the plugin's code.

if you are doing it in jQuery, and your form is generated dynamically, you can apply these

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

since we cannot put an image in a type=submit input I hide it and place an input type=image since it also acts as a submit.

we can also use the css provided by DHuntrods by

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

Does the button have a class or id that you could use to tie it to some css? You may not need to use jQuery if so:

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

You could do it with a couple lines of 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');

for IE, though, you need to replace the element because IE does not allow dynamic change of the type.. so

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