CODEWITHSUNDEEP
javascriptjqueryhtml
SmootQ
SmootQ

Reputation: 2122

Pass a li tag value to a text input

hi I have a li tag as follows:

<li value="myLi" class="myLi">My element</li>

I tried this jquery code:

$(".myLi").click(function(){
    document.getElementById("mytext").value=$(this).value;
});

knowing that mytext is an input of type text, how can I pass the value of the li tag to the input , if it's not possible, how can I use the innerHTML to pass the code between the li tags.

the code that I tried does not work thank you

Upvotes: 1

Views: 10424

Answers (5)

Bentino
Bentino

Reputation: 1

You can use global attribute 'title' for quick and easy.

<li title="myLi" class="myLi">My element</li>

then

$(".myLi").click(function(){
    document.getElementById('myText').value=this.attr('title');
});

Hope this help.

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1074238

Despite what some have said, value is indeed a valid attribute for li elements, and it's reflected in the value property, but it's required to be an integer (reference):

The value attribute, if present, must be a valid integer giving the ordinal value of the list item.
...
If the value attribute is present, user agents must parse it as an integer, in order to determine the attribute's value. If the attribute's value cannot be converted to a number, the attribute must be treated as if it was absent. The attribute has no default value.

If your pasted code was just a quick edit and you really will be using an integer, then your code would work if you didn't wrap this in a jQuery instance:

HTML:

<li value="3" class="myLi">My element</li>

JavaScript using jQuery:

$(".myLi").click(function(){
    document.getElementById('myText').value=this.value;
    // Or
    // $('#myText').attr('value', this.value);
});

If you want to use a string, probably best to stick with the new HTML5 data- prefix:

HTML:

<li data-value="myLi" class="myLi">My element</li>

JavaScript using jQuery:

$(".myLi").click(function(){
    document.getElementById('myText').value=$(this).attr('data-value');
    // Or
    // $('#myText').attr('value', $(this).attr('data-value'));
});

Upvotes: 3

Ender
Ender

Reputation: 15221

I think what you want is this:

$(".myLi").click(function(){
    $('#mytext').val($(this).text());
});

Here's a demo of that: http://jsfiddle.net/Ender/QdWxH/

Or if you wanted the val from that value attribute: As Felix points out, value isn't a valid attribute of <li>. (See @T.J. Crowder's answer) You could change that to data-value, like so:

<li data-value="myLi" class="myLi">My element</li>

Then do this:

$(".myLi").click(function(){
    $('#mytext').val($(this).data('value'));
});

Demo of that: http://jsfiddle.net/Ender/BHrmR/

Upvotes: 1

Felix Kling
Felix Kling

Reputation: 816384

AFAIK value is not valid attribute for li elements. (Not entirely true, see @T.J. Crowder's answer)
You can use rel though:

<li rel="myLi" class="myLi">My element</li>

And to set the value of the input element, use val():

$(".myLi").click(function(){
    $("#mytext").val($(this).attr('rel'));
});

If you want to get the text from the li element instead, use $(this).text().

Reference: attr, text

Upvotes: 3

JaredPar
JaredPar

Reputation: 754665

Try the following

$(".myLi").click(function() {
  $("#myText").val($(this).text());
});

Upvotes: 2

Related Questions