How to get inner content form label which have a child in JavaScript?

Question

Suppose, a HTML content like:

<div class="form-group">
   <label class="control-label">Title <span class="text-danger">*</span></label>
   <input type="text" name="sms_title" id="sms_title" class="form-control" required="required" placeholder="SMS Title" onblur="_field_validate('sms_title')" >
</div>

How can I get label content title in JavaScripts. My JS Function:

function _field_validate(fieldId) {
var chars = /[^a-zA-Z 0-9_]/g;
var elem = document.getElementById(fieldId);
if (typeof elem !== 'undefined' && elem !== null) {
    var input = document.getElementById(fieldId).value;
    if (!input) {
        return false;
    } else if (chars.test(input)) {
        console.log("this not proper stirng. You may do something here.");
        return false;
    } else {
        var url = site_url + "/notice/get_sms";
        get_data(url).then(function (result) {
        //PROMISE return data
            if (!result) {
                return false;
            } else {
                var i = 0;
                var flag = 0;
                result.forEach(function () {
                    if (result[i][fieldId] == input) {
                        console.log(result[i][fieldId]);
                        flag = 1;
                        var parent = document.getElementById(fieldId).parentNode;
                        var label = parent.getElementsByTagName("label").innerHTML;
                        console.log(label); //here console the label content
                        alert.innerHTML = 'alert-text';
                        alert.style.margin = 0 + "px";
                        alert.style.paddingLeft = 6 + "px";
                        alert.className = 'text-danger';
                        alert.id = 'alert-field';
                        parent.appendChild(alert);
                    }
                    i++;
                });
            }
        });
    }
  }
}

get_data function return a database data. this is evrything is ok. but how i get the label content?

ab29007 · Answer 1 · 2016-12-25T13:26:30.440

1

Here, when you run this example it show you following strings in the console:

The text in the label.
The text in the span.
the text in the label but not in the span.

document.addEventListener("DOMContentLoaded", function(event) {
  var str1 = document.querySelector('label.control-label').innerText;
  var str2 = document.querySelector('label.control-label span').innerText;
  var res = str1.replace(str2, "");
  console.log(str1);
  console.log(str2);
  console.log(res);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
   <label class="control-label">Title <span class="text-danger">*</span></label>
   <input type="text" name="sms_title" id="sms_title" class="form-control" required="required" placeholder="SMS Title">
</div>

edited Dec 25 '16 at 13:26

answered Dec 25 '16 at 12:59

ab29007

7,611
2
17
43

@Ikram Hasib you wanna get the `Title` right? not the `*` in the `` tag. If yes then please do accept my answer. If no, then let me know, I'll update my answer – ab29007 Dec 25 '16 at 13:01
no. document.querySelector('label').innerText shows undefined – Ikram Ud Daula Dec 25 '16 at 13:05
Did you run the snippet. it's working in the snippet. – ab29007 Dec 25 '16 at 13:07
Are you adding only javascript in your browser console? – ab29007 Dec 25 '16 at 13:07
yes. snippet is ok. but browser console shows undefined. – Ikram Ud Daula Dec 25 '16 at 13:12
did you add the html – ab29007 Dec 25 '16 at 13:13
ok, I updated my answer. I think it should work now. please try it and if it does not work, post a screenshot of your console and send it to me. – ab29007 Dec 25 '16 at 13:21
oh. ok. I am gonna update the code in 2 minutes. try that – ab29007 Dec 25 '16 at 13:25
This doesn't give the expected result if there are multiple labels in the div because it just picks the first label. – user2314737 Dec 25 '16 at 13:39

score 1 · Accepted Answer · edited May 23 '17 at 11:53

A Javascript-only solution (no JQuery).

You need to find the first preceding sibling of the element with id sms_title that has class control-label and extract the text content.

This works also in cas eyou have more than one element of class control-label in your div.

Depending on what you want, you can have:

just the text content using textContent
all content (including HTML labels) using innerHTML

var className = "control-label";
var el = document.getElementById("sms_title");
while(el.previousSibling && el.previousSibling.className != className) {
    el = el.previousSibling;
    }
 
console.log(el.previousSibling.textContent);
console.log(el.previousSibling.innerHTML);

<div class="form-group">
   <label class="control-label">Title <span class="text-danger">*</span></label>
   <input type="text" name="sms_title" id="sms_title" class="form-control" required="required" placeholder="SMS Title">
</div>

(see also this answer)

your answer is working fine. but i can't understand. why != className ? — Ikram Ud Daula, Dec 25 '16 at 13:36
@IkramHasib the idea is that you use `previousSibling` to go upwards in the dom until you find a sibling of the desired class (thus skipping `span`, that is a sibling but not of class `control-label`) — user2314737, Dec 25 '16 at 13:38

Koby Douek · Answer 3 · 2016-12-25T12:58:15.437

0

First, change your code like this, to add an ID to your parent label: <label id="lbl1" class="control-label">Title <span class="text-danger">*</span>

Then in Javascript:

document.getElementById("lbl1").childNodes[0].innerHTML;

edited Dec 25 '16 at 12:58

answered Dec 25 '16 at 12:54

Koby Douek

16,156
19
74
103

i want to get this using javascripts – Ikram Ud Daula Dec 25 '16 at 12:55
i don't want change my code. your answer shows undefined. – Ikram Ud Daula Dec 25 '16 at 13:01

How to get inner content form label which have a child in JavaScript?

3 Answers3