UmarAbbasKhan UmarAbbasKhan - 1 month ago 4
HTML Question

how to pass value to javascript through clicking <li> element

I have the following Unordered List which has been dynamically populated from database through JQuery .ajax, with a few list items which are names of the products.

<ul id="here">
<li>Product 1</li>
<li>Product 1</li>
<li>Product 1</li>
<li>Product 1</li>
<li>Product 1</li>

I can hover over these through mouse events in css with the following code

li:hover {background: #ccc; cursor: pointer;}

The javascript code for populating the
is as follows:

var pr= [Product1, Product2, Product3, Product4, Product5];
for (var option in pr){
var newLi = document.createElement("li");

But I want to pass the Product Name inside of the
element to another input element through Javascript or JQuery when that
element is clicked. How can I do this?


Since I see you are using jQuery, you can bind the ul's "click" event like so:

$("#here").on("click", "li", function(evt) {

Example at jsfiddle: