Hi guys, 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 going into the plugin's code.
Thanx in advance!
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);
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');