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?
Here, when you run this example it show you following strings in the console:
label
. span
. 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>
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:
textContent
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 )
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;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.