CODEWITHSUNDEEP
jqueryhtmlhtml-listsattr
Brad
Brad

Reputation: 1691

Click on an LI and send that value to an input as the value with Jquery

I am trying to click on an LI, and have the value of that li sent to a search box input as the value to search for.

I can strip the class from the LI but do not know how to strip out the LI itself. I am probably going at this completely wrong. 

$(function(){
//var art = $('li.inliner').val();
$('li.inliner').on('click',function(){// select the artist from the ul
$( this ).clone() //copy it
.removeClass("inliner") //remove the inliner class
//remove the li from the clone??
.appendTo( "input(value)?? ); //this needs to be inserted into the search input as the value
  });
})

Currently I can send the clicked LI to a div with the class removed, but its still an LI. I also dont know how to make it the input value. Any help is appreciated.

Upvotes: 0

Views: 4210

Answers (2)

IngGaberick
IngGaberick

Reputation: 319

If I get it the right way you could try something like

$(function(){
//WHEN YOU CLICK THE ELEMENT..
$('li.inliner').on('click',function(){
//GET THE TEXT INSIDE THAT SPECIFIC LI
var content= $(this).text();
//PLACE THE TEXT INSIDE THE INPUT FIELD, YOU CAN CHANGE YOUR SELECTOR TO TARGET THE RIGHT INPUT
$('input[name='MySearchBox']').val(content);
//HERE YOU CAN DO SOMETHING ELSE LIKE SIBMITING THE FORM, OR CLICK A BUTTON.. OR SOMETHING ELSE
  });
});

I hope this is what you need. I made a little example using a different selector for the input. hope this works for you.

http://jsfiddle.net/kbFUu/1/

Upvotes: 3

jeremysawesome
jeremysawesome

Reputation: 7254

You want to add something like this to your code:

$(document).ready(function(){
    // use event delegation to listen for '.inliner' clicks
    $('ul.liner').on('click', '.inliner', function(){
        // when an element is clicked, update the search box
        $('#art').attr('value', $(this).text())
    })
});

Upvotes: 2

Related Questions