Skip to content Skip to sidebar Skip to footer
Home / Html / Jquery

Replacing A Submit Button With A Image Button Using Jquery

Post a Comment
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

Solution 1:

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

Solution 2:

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><metahttp-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:#fffurl([URL TO IMAGE]) no-repeat 00 ; line-height:0 font-size:0; }
    </style></head><body><form>
      [...]
      <inputtype="submit"class="form-submit"/></form></body></html>

Solution 3:

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

Post a Comment for "Replacing A Submit Button With A Image Button Using Jquery"