I have some elements in my document like:
<div class="checkbox-inline"><label><input id="mylabel" value="False" type="checkbox">mytext</label></div>
When I try to get the text using:
$("#mylabel").text();
I get an error that text() is not defined on that object. My ids are unique, so my object is in the 0: position in $("#mylabel") but both of these return an empty string for the text:
$("#mylabel").first().text();
$("#mylabel")[0].text();
How can I get the text mytext out of these elements? And how can I programmatically modify it?
I realize now that my problem is slightly different than what I thought it was. Please see: Modifying the text of a label that also contains an input (checkbox) for my follow-up question. Thanks!
The value of an input element is not given by text(), but by val().
If you want to get the label text:
$("#mylabel").parent().text()
It is a bit confusing that you give the id mylabel to an input element, which is not the label element.
I'm assuming you're trying to access the text of the label element, in this case "mytext"? The reason this isn't working is because the id is on the input element, whcih doesn't actually contain that text
<input id="mylabel" value="False" type="checkbox">
That's the entirety of your input element.
As others have stated, you can get the value of that element using
$("#mylabel").val()
Which will give you "False"
However, if you do need the text "mytext" and don't want to change your markup you can use this
$("#mylabel").parent().text()
Which gets the element with the mylabel id, finds it's parent element (in this case the label element) and then gets the text from that element.
Now that you know that, you might realise that it's easier to just put an id on the label!
If you want the label text.. then you want to use
$('.checkbox-inline label').text();
You're targeting the checkbox itself, not its' label.
Its $("#mylabel").html() to get the inner html of tag.
EDIT:
For your particular case it can be:
$("#mylabel").parent().text();
Related
Edit: let me reformulate this question
How to select all elements that ends with certain id
Ex:
<input id="person">
<span id="span_person"></span>
<input id="person_001">
My problem is, when I select with jQuery like
$("[id*=person]");
all inputs with similar id's are returning but in this case I just want to select the first two. I want to select all elements that the id ends with "person". Is there any way?
I use a framework that generates html code, so I can't change the id of the elements because it's based on the attribute name on the framework.
Use the $ operand for CSS selectors
[attribute$=value]
$("[id$='person']");
eg. Selects every element whose attribute value ends with value
An id is supposed to be unique. You should use a class to group elements you want to style with similar CSS, something like '.person'. Refer to: https://www.w3schools.com/html/html_id.asp
ID is only! You can't set ID for 2 tags!
I should change your span's id!
what DOM elements is document.getElementById("id").value used for ?
i mean can i use it with an element like heading tags etc
or it is used with the items have a value attribute [textboxes ] etc
and what is the difference .innerHTML and .value properties
what DOM elements is document.getElementById("id").value used for ?
You can use getElementById to get a reference to any element that has an id attribute on it.
and what is the difference .innerHTML and .value properties
They're completely unrelated. innerHTML is the HTML representation of the contents of the element. value is the value of a form control element like an input.
For example, suppose we have:
<div id="foo">Hey <strong>you</strong></div>
You can do this:
console.log(document.getElementById("foo").innerHTML);
...which will likely give you something like this in the console:
Hey <STRONG>you</STRONG>
Note that this is not exactly the same as what was in your document; when you read the value of innerHTML, the browser makes a string from what's actually currently present in the DOM, using its rules for how to create that string.
You can also set it to change the contents.
In contrast, with a form control:
<input id="bar" type="text" value="Text field value">
console.log(document.getElementById("bar").value);
...which gives you
Text field value
Setting the value is normally used for input/form elements. innerHTML is normally used for div, span, td and similar elements.
Here is a link showing the use of ID.value:
http://www.javascript-coder.com/javascript-form/javascript-form-value.phtml
and
The getElementById() method accesses the first element with the specified id.
and
yes, you can use it with an element like heading tags etc
I have a div in my form
<div id="s2id_s52dcecf43a846_membership">
<div>
I want to find the div by the name "membership" because the other elements of the id are randomly generated.
How to get the div by just getting the partial value of the div id ?
I want to get it via jQuery/Javascript.
Thanks,
FaisalNasir
If the id starts with "membership" and then comes the random part you can use:
$('[id^="membership"])
You can also use "contains" selector, like
$('[id*="membership"])
If you want to search by the name, you can use
$('[name=membership]');
Keep in mind this might give you more than one element.
You can also check more selectors here
just getting the partial value of the div id
Just try the attribute contains selector,
$('[id*="membership"])
Or the better way would be add a common class to those elements
Please read here to know more about Jquery selectors
I am currently trying to figure out a way to work within a selected <div> in order to be able to send a text formatted email.
So there is a button says "email". When a user clicks on it, it grabs a closest div as below.
var selectedDiv = $(callingElement).closest(".myClassName");
And from there I would like to grab various dom elements to create a clean text format. So how do I work within selectedDiv using jQuery?
For example,
Getting <h1> value.
Getting <li> value with certain class names
Getting "title" attribute value.
The selectedDiv jQuery object wraps the div element. Use the find method to search for descendant elements, and attr to get the attributes on the div element itself.
selectedDiv.find('h1');
selectedDiv.find('li.someClass');
selectedDiv.attr('title');
Call the text() method to get the text from the h1, or the li.
selectedDiv.find('h1').text();
selectedDiv.children('h1').text();
selectedDiv.children('li.className').text();
selectedDiv.attr('title');
But somehow I think you might be asking the "wrong" question.
Any reason why jQuery('textarea').text() always returns default value instead of current text when the text area actually has some text and jQuery('textarea')[0].value does return the text?
Take a look at the simple example to see the problem.
Entering a value in an input element (textarea being one of them) doesn't change the markup. text() only grabs the text content of the markup. You should use val() instead:
jQuery('textarea').val()
The jquery way to get the text would be:
jQuery('textarea').val();