getting the value of a div in jquery? - javascript

i wanted to get the value of a hidden div in jquery i.e.
<div id="text">hello i am the value, you want</div>
and i want insert this value into a another div in jquery i.e.
$('#bio').html($value);
EDIT:
i forgot to mention that it had to be the text within the block div sorry i.e. its parent
<div class="block" id="status_13">
<div id="text">.......</div>
</div>
i.e.
$('.block').click(function(){
$('#bio').html($('$text').html());

If your #text element contains HTML you might want to do:
$('#bio').html($('#text').html());
If you are only concerned with the literal text of #text then you can do:
$('#bio').text($('#text').text());
Of course, if you want to store the text in a variable first, you can do so:
var textValue = $('#text').text();
$('#bio').text(textValue);
In regard to your later edit:
$('.block').bind('click', function() {
var thisTextValue = $(this).children('.text').first().html();
$('#bio').html(thisTextValue);
});
Notice that I assumed the child div is marked with a class and not an id. Based on your description, it sounds like you have multiple "block" elements which each contain a "text" element. If that is the case, then $('#text') will always return the first "text" element in the document; IDs are unique in the document.

Don't use $ for variables (like $value), just value
var value = $('#text').html();

Did you try
$('#bio').html($('#text').html());

I think this would work
//get the value from hidden field and store it in the variable 'valueYouWant'
var valueYouWant = $("#text").html();
//set it in other field
$("#bio").html(valueYouWant);
edit:
More information can be found here

Related

How to get value from a dynamic element

I need to get the value from a "p" element, I draw this "p" with jQuery and it's ok, then I have a button and when I click on it I want to display the value from "p" element but I don't get any information, here is a simple code example:
$(document).ready(function() {
$('#c').click(function() {
var p = $('#p1').val();
alert(p);
});
draw();
});
function draw() {
var html = "";
html += '<p id="p1">Hi</p>';
$('#d').html(html);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="c">Click</button>
<hr />
<div id="d">
</div>
How can I solve this? I don't get any console error.
Change :
var p = $('#p1').val();
To :
var p = $('#p1').text();
.val() only returns the value from input, textarea and select elements. If you just want to read the content of an element, you should use .text() or .html(). The first returns just the text, and the second – HTML content of an element.
Here is the quote from jQuery
The .val() method is primarily used to get the values of form elements
such as input, select and textarea. When called on an empty
collection, it returns undefined.
So as #ehsan suggested, use .text() method if you want to get content as text.
.val() is used to get the value of input, select and textarea elements.
If you want to get the text inside an element (e.g: div, p, etc), you need to use .text().
So, in your case, you need to change this:
var p = $('#p1').val();
for this:
var p = $('#p1').text();
Note: If you want the full html code inside an element, you need to use .html().
Sources:
http://api.jquery.com/val/
http://api.jquery.com/text/
http://api.jquery.com/html/
you can also use var p = $('#p1').html();

can divs hold numerical values?

I have a normal div, and I wanted to know if it can actually hold a numerical value. Take cookie clicker for instance, the number of cookies you have is shown in a div, how do I do that with my div?
<div id="myDiv">0</div>
Or
<div id="myDiv" value="0"></div>
I tried the second option, and it doesn't show my value doesn't show. I tried the first option, but what I want to do with it, it doesn't really work, because I can't edit the value with my javascript functions.
How would I do this, so that the div can hold my value and my value can be edited?
Your question isn't clear for me but is this what you want?:
you can use JavaScript to get the value of that div.
HTML
<div id="myDiv">0</div>
JavaScript
var text = $('#myDiv').text();
var text has the value of 0 now. you can do with it what you want.
You can do with the second option like the following:
SETTING THE VALUE
document.getElementById('myDiv').setAttribute('value',50)
GETTING THE VALUE
console.log(document.getElementById('myDiv').getAttribute('value'));
SUGGESTION:
Try data-value instead of value, because value is not a valid attribute of div.
Values are for form input elements.
To modify content of other elements search Javascript DOM for more.
For example:
You can edit the innerHTML property with Javascript.
https://developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML
You'll have to convert the value because the value you're trying to pull will technically be a string.
var SomeVar = $('#MyDiv').html();
var SomeAnswer = 8 + parseInt(SomeVar);

Search through document and find all inputs with titles

I want to search through my document, and find all inputs with title attribute, but at the same the title attribute can not be empty. So it should look for every input with title attribute that has at least one character in length.
Then I would like to make some event on those inputs (like add them some CSS class).
Is that even possible with jQuery or other javascript library?
I believe this would give you what you want:
$('input[title][title!=""]')
To apply css
$('input[title][title!=""]').addClass('class1 class2 class3');
http://jsfiddle.net/5hkAG/
$("input[title]").not('[title=""]')
var myInputs = [];
$("input").each(function() {
if($(this).attr("title").length > 0) {
myInputs.push(this);
// do other events as usual, using $(this) as selector for current input
}
});
// do something with myInputs, which is an array of all inputs with a title attribute

get the value of hidden parameter present in a div using jquery

I have a div whose id is "mainDiv" and a hidden field is in this div whose class name is "myHiddenField". Now I want to get the value of that hidden parameter using jquery.
I have tried:
$("#mainDiv .myHiddenField").val()
and
$("#mainDiv .myHiddenField").attr('value')
$("#mainDiv .myHiddenField").val()
This is a fairly straightforward combination of $, find, and val:
var value = $("#mainDiv").find(".myHiddenField").val();
Or you can omit the find part by using a descendant selector instead:
var value = $("#mainDiv .myHiddenField").val();
var value = $('#mainDiv > .myHiddenField').val();
Use a combination of id- and class-selector, so that you select the element of class myFiddenField that has an ancestor with id mainDiv. When you have selected the proper element, you use .val() to get the value of that element.
Something like this:
$("#mainDiv .myHiddenField").val()
HTML part :
<div class="myHiddenField">hidden value</div>
JS Part:
var x = $('.myHiddenField').html();
Here x gives the value of your hidden div.

Parse string for text between divs

I have a string of html text stored in a variable:
var msg = '<div class="title">Alert</div><div class="message">New user just joined</div>'
I would like to know how I can filter out "New user just joined" from the above variable in jQuery/Javascript so that I can set the document title to just the message.
Like this:
document.title = $(msg).filter("div.message").text();
Note that if the message changes to be wrapped in an element, you'll need to replace filter with children.
EDIT: It looks like the div that you want is nested in other element(s).
If so, you can do it like this:
document.title = $("div.message", msg).text();
Explanation: $('<div>a</div><div>b</div>') creates a jQuery object holding two different <div> elements. You can find the one you're looking for by calling the filter function, which finds mathcing elements that are in the jQuery object that you call it on. (Not their children)
$('<p><div>a</div><div>b</div><p>') creates a jQuery object holding a single <p> element, and that <p> element contains two <div> elements as children. Calling $('selector', 'html') will find all descendants of the elements in the HTML that match the selector. (But it won't return the root element(s))
This is a hack and not very clean, but it should work:
add a div node and set its html to your text message,
get the text of the added element and store it in a variable
destroy the node
set the title with the contents of the variable in step 2

Categories

Resources