CODEWITHSUNDEEP
javascriptjquery
user978905
user978905

Reputation: 5517

Javascript - get text between <li> by ID

I'm trying to write some javascript that will grab the inner text of li elements (1-16) and put them into hidden fields. 

   var myValue9 = document.getElementById("fileName9").value;
   oForm.elements["fileName9"].value = myValue9;


 <input name="fileName9" type="hidden" id="fileName9" />

<li id="wavName9"> Some Text </li>

How do I return the text in between the <li> and put into the hidden field?

Upvotes: 3

Views: 19818

Answers (6)

jfriend00
jfriend00

Reputation: 707158

LI tags don't have a .value property. Using plain javascript, you could do it this way:

oForm.elements["fileName9"].value = document.getElementById("wavName9").innerHTML;

Or, to do all of them from 1 to 16, you could use this loop:

for (var i = 1; i <= 16; i++) {
    oForm.elements["fileName" + i].value = document.getElementById("wavName" + i).innerHTML;
}

Or since you also tagged your post for jQuery, using jQuery you could do it like this:

$("#fileName9").val($("#wavName9").text());

Or, to do all of them from 1 to 16:

for (var i = 1; i <= 16; i++) {
    $("#fileName" + i).val($("#wavName" + i).text());
}

Upvotes: 1

Jasper
Jasper

Reputation: 75993

Using jQuery:

$('#fileName9').val($('#wavName9').text());

Note that you can change .text() to .html() to return the HTML structure rather than just the text.

You could automate this for multiple <li>'s like so:

$('li[id^="wavName"]').each(function () {
    var number = this.id.replace('waveName', '');
    $('#fileName' + number).val($(this).text());
});

This selects all <li>'s who's id starts with "wavName" and stores the text within the <li> tag in the hidden input who's id starts with "fileName" and ends with the same integer as the <li> tag.

Upvotes: 0

Prusprus
Prusprus

Reputation: 8055

Create your li's with id's following such a structure: listitem-n, where n is 1-16 and input fields following the same structure hiddeninputs-n (n = 1-16)

using jfriend00's code, add it in a loop that will traverse 16 times, incrementing a count variable that you will use to transfer the data from list items to hidden inputs

var count = 0;
for( i=0; i < 16; i++){
  count ++;

  $("form #hiddeninput-"+count).val($("#listitem-"+count).text());

}

Better validate the code, but there's the general idea.

You could also create the hidden fields in javascript from scratch, which would make the code abit more stable IMO as there's less chances of a hidden field missing in the form when the js is executed.

Upvotes: 0

ZeNo
ZeNo

Reputation: 1658

I think this will do in for all li's

$("li[id^=wavName]").each(function(){
var $this = $(this);
$this.closest("input[id^=fileName]").val($this.text())
});

Upvotes: 0

ckruse
ckruse

Reputation: 9740

Simple JavaScript:

document.getElementById("fileName9").value = document.getElementById("wavName9").innerText;

You could, in this case, also use innerHTML but that would also give you the HTML the element contains.

Upvotes: 7

Rob Nield
Rob Nield

Reputation: 514

Use jQuery to do it.

var myvar = $("#wavName9").html()

Upvotes: 0

Related Questions