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?

Answer 1

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)

Answer 2

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

1. The text in the label.
2. The text in the span.
3. 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>

Answer 3

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;