jquery append to html with image then remove it not being displayed

Question

Hey all i am trying to get my jquery code below to work:

function submitContactUs() {
    if ($('#cf-name-txt').val() == '' || $('#cf-name-txt').val().charAt(0) == '*') {
        $('#cf-name-txt').append("<img src=\"img/attention.png\" width=\"16\" height=\"16\" style=\"position:absolute; left: -7px; top: 7px;\" />");
    }       
}

And the HTML code is this:

<div id="contactus-name">
    <input type="text" id="cf-name-txt" style="width: 200px;" class="formBoxesContact" value="*Your Name">
</div>

It works with adding the image to the end of the html code above but its not displaying? It looks like this in firebug:

What am i doing to cause it not to display?

Answer 1

You are trying do display an image inside an input. try using an styled editable div or something.

Answer 2

Try this

$('#cf-name-txt').after("<img src=\"img/attention.png\" width=\"16\" height=\"16\" style=\"position:absolute; left: -7px; top: 7px;\" />");

OR

$("<img src=\"img/attention.png\" width=\"16\" height=\"16\" style=\"position:absolute; left: -7px; top: 7px;\" />").insertAfter($('#cf-name-txt'));

You are trying to append image to input.. Try appending after the input tag..

.after() should work

EDIT

if( !$('#cf-name-txt').next('img').length)
$('#cf-name-txt').after("<img src=\"img/attention.png\" width=\"16\" height=\"16\" style=\"position:absolute; left: -7px; top: 7px;\" />");​

FIDDLE

Answer 3

You probably want to insert the image after the input, not inside of it. For that, use jQuery's after function, instead of append .

As an alternative, you can use a CSS class to add the image beside the input, and spare the embedded HTML inside your javascript.

On your CSS:

input.attention:after {
  content: url('img/attention.png');
}

Then, on the javascript:

function submitContactUs() {
  if ($('#cf-name-txt').val() == '' || $('#cf-name-txt').val().charAt(0) == '*') {
      $('#cf-name-txt').addClass("attention");
    }       
}

Answer 4

Seems like (from the name of your image) that you are basically wanting to show an "attention" image when a form has been submitted and a field has not been entered.

As the other posts say, you cannot put an image inside the <input> tag, however this does not mean that you can not have an image appear inside the tag.

The way to do this is to set the background style of the input . So to do this with jQuery, use;

$('#cf-name-txt').addClass('alert-icon');

Then have the css

input.alert-icon{ background: url(img/attention.png) no-repeat right center; }

You can then play about with the styling, also remove the class when a user set the focus onto the input.

Answer 5

A input field cannot contain a element (As well as pretty much anything). Use $('#cf-name-txt').before(""); to add the image and $("#cf-name-txt-img").remove() to delete it.

Or even better, Put the image in the HTML with style display:none and turn it on changing the style in display:block

   <div id="contactus-name">
    <img src="img/attention.png" id="cf-name-txt-img" width="16" height="16" style="position:absolute; left: -7px; top: 7px; display:none" />
    <input type="text" id="cf-name-txt" style="width: 200px;" class="formBoxesContact" value="*Your Name">
   </div>

And use $("#cf-name-txt-img").show() to display it, $("#cf-name-txt-img").hide() to remove it.

In your case:

function submitContactUs() {
    var $img = $("#cf-name-txt-img");
    if ($('#cf-name-txt').val() == '' || $('#cf-name-txt').val().charAt(0) == '*') {
       $img.show();
    } else {
       $img.hide();
    }

}