Display image on click in form field HTML / JQuery

Question

Is it possible to make an image visible when I click in a form field using HTML / jQuery or JavaScript?

This is my form field (in Laravel):

<div class="form-group">

    {!! Form::label('twitter', 'Twitter:') !!}
    {!! Form::text('twitter', null, ['class'=>'form-control']) !!}

</div>

The html part:

<a href="http://ss">
    <img width="16"
    src="https://s3.amazonaws.com/htmlsig-assets/round/twitter.png" alt="Twitter">
</a>

mplungjan · Accepted Answer · 2015-12-31 07:25:52Z

1

Give the link an ID, hide it using CSS

#linkId { display:none }

and do

$(function() {
 $(".form-control").on("click",function() {
   $("#linkId").show();
 });
});

To remove if empty:

$(function() {
 $(".form-control").on("focus, keyup",function() {
   $("#linkId").toggle(this.value!="");
 });
});

answered Dec 31, 2015 at 7:16

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

This is clearly answer. And In case I want to dismiss the image if All character in the form were deleted, how to do that? Thank you very much.

Anil Panwar · Accepted Answer · 2015-12-31 07:19:20Z

1

Initially keep hidden class at your image if you are using bootstrap and when you click on any form field remove hidden class from img tag.

And if you are not using bootstrap then same can be achieved using css.

Suppose your anchor tag has class hidden.

$("input").on("focus", function() {
    $(a).removeClass("hidden");
 }

answered Dec 31, 2015 at 7:09

Anil Panwar

2,6221 gold badge13 silver badges24 bronze badges