CODEWITHSUNDEEP
javascriptjqueryhtml
Lucky Luke
Lucky Luke

Reputation: 619

Display image on click in form field HTML / JQuery

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>

Upvotes: 0

Views: 322

Answers (2)

mplungjan
mplungjan

Reputation: 177940

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!="");
 });
});

Upvotes: 1

Anil Panwar
Anil Panwar

Reputation: 2622

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

Upvotes: 1

Related Questions