Add image to Submit input with Jquery

Question

Hi I have the following code

<input type="submit" name="btnCheckOut" value="Buy >>" id="btnCheckOut" />

I don't have direct access to the source code, but I would like to add a image "money.png" in front of the "Buy" text.

How would one do this with Jquery?

Answer 1

By "in front" do you mean in front of the <input/> or in front of the actual text (i.e. within the input)?

If it's the former then this should do:

$('input[name=btnCheckOut]').before('<img src="money.png"/>');

If it's the latter then you should use a <button> instead since it allows almost any elements within it:

$('input[name=btnCheckOut]').before(
    '<button name="btnCheckOut"><img src="money.png"/>Buy &gt;&gt;</button>'
).remove();

Answer 2

You can do it with CSS by adding a background image to the "submit" element.

submit {

    background: url('/myimage.png') no-repeat top left;
    padding: 2px 8px;
}

Answer 3

Use before() to inject your image before the input tag.

http://api.jquery.com/before/

$('#btnCheckOut').before('<img src="money.png" id="..." />');

PS If you want the image to be clickable too you have to manage it via jQuery too by binding the click event.

Answer 4

A la Aaron Huran's solution, but in JQuery:

$(this).css('background', "url('/myimage.png') no-repeat top left").css('padding', '2px 8px');