Bhaskar Saurabh Vicky Bhaskar Saurabh Vicky - 4 months ago 8
CSS Question

How to add .click() event on form element using javascript?

HTML code:

<body>
<select multiple="multiple" id="imglist" class="image-picker show-html">
<option><a href="http://placekitten.com/220/200" target="_blank">Cute Kitten 1</a></option>
<option><a href="http://placekitten.com/180/200" target="_blank">Cute Kitten 1</a></option>
<option><a href="http://placekitten.com/130/200" target="_blank">Cute Kitten 1</a></option>
</select>
</body>


CSS code:

.thumbnails {
overflow: auto;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
padding: 0px;
margin: 0px;
}

.thumbnails li {
float: left;
}

.image-picker option {
border-radius: 15px;
}

.image_picker_image {
border-radius: 118px !important;
height: 50px !important;
width: 50px !important;
}

ul.thumbnails.image_picker_selector li .thumbnail.selected {
/* background: #fff !important; */
border: 0px !important;
filter: alpha(opacity=40) !important;
opacity: 0.6 !important;
background-image: url('https://cdn0.iconfinder.com/data/icons/feather/96/circle-check-128.png') !important;
background-size: contain !important;
}

ul.thumbnails.image_picker_selector li .thumbnail {
border: 0px !important;
}

ul.thumbnails.image_picker_selector li .thumbnail.selected {
background: #fff !important;
}


Javascript Code:

function imgpop() {
var il, imga, imgatxt;
il = document.getElementById('imglist').getElementsByTagName('option');
for (i = 0; i < il.length; i++) {
imga = il[i].getElementsByTagName('a')[0];
imgatxt = imga.firstChild;
imgatxt.nodeValue = imgatxt.nodeValue.replace(/ \(new window\)/, '');
imga.onclick = function() {
return popw(this);
}
//imga.onkeypress=function(){return popw(this);}
}
}

function popw(o) {
var newimg;
if (o.parentNode.getElementsByTagName('img').length > 0) {
o.parentNode.removeChild(o.parentNode.getElementsByTagName('img')[0]);

} else {
newimg = document.createElement('img');
newimg.style.display = 'block';
newimg.onclick = function() {
this.parentNode.removeChild(this);
};
newimg.src = o.href;
o.parentNode.appendChild(newimg)
}
return false;
}

if (document.getElementById && document.createTextNode) {
window.onload = function() {
imgpop();
}
}


I want to generate image on click of option tag. And after clicking on option tag image should be hide. If I select first option tag, it should display image. and same with all the option tag.
My js file is not working for tags " select option /option /select" but if I provide image under " ul li /li /ul" tag it start working.

Answer

You can add an .click() event on form element using jQuery as in the below example.

Documentation details from jQuery: https://api.jquery.com/click/

In can do the same in vanilla JavaScript (no jQuery) like this:

document.getElementById("imglist").addEventListener('click', function (){console.log('execute on click')});

$(function() {
  $('#imglist').click(function(event) {
    alert(event.target.value);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple="multiple" id="imglist" class="image-picker show-html">
  <option>Cute Kitten 1</option>
  <option>Cute Kitten 2</option>
  <option>Cute Kitten 3</option>
</select>