How to get value from a dynamic element - javascript

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();

Related

prev() not returning div element

I'm probably being especially dense about this, but I can't get an element to return using prev(). My basic HTML structure is:
<div>
<table></table>
</div>
<input type="button">
Where when I press the button, I want to get the previous element (the div element). To achieve this my button has a function attached to it with
var nearestDiv = $(this).prev();
When I've checked the contents of nearestDiv in the console it appears to be some kind of JQuery object rather than a HTML div. I've tried popping .val() at the end of .prev() but this comes back empty. How can I get the div element?
Note that my button is generated on the fly and doesn't have anything which identifies it.
you need to use jquery get function, to get a native html object and not the jquery wrapper:
$("input").on("click",function(){
console.log("jquery wrapper:",$(this).prev());
console.log("native html div object:",$(this).prev().get(0));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<table></table>
</div>
<input type="button">
If your html structure is same as you provided in the question, it will definitely return the div element. Note that there is no val() method for div element, you need to either use .html() or .text() inorder to get the contents.
$("input[type='button']").click(function () {
var div = $(this).prev();
alert(div.html());
alert(div.text());
});
Fiddle
You need to give .text() or .html() for standard HTML Elements. So your code should be:
var nearestDiv = $(this).prev().html();
var nearestDiv = $(this).prev().text();

Change the text of a textarea, from the selected item in a select

I have this function that successfully populates a textarea with text from a select, when the select is changed.
function Favourites()
{
$('select#favourites').change(function() {
var text = $(this).find('option:selected').attr('data-post');
$('textarea#post').text(text);
});
}
Problem is if I change the select, delete the contents of the textarea, and change the select again, it no longer populates the textarea.
Any idea why please?
You need to use .val() instead of .text():
$('#post').val(text);
Demo: http://jsfiddle.net/jtbowden/HaZWC/
.text() essentially sets the text between the tags <textarea></textarea>, which sets the default value of the textarea. This is fine as long as the user has not typed anything in the text box. But, just like when you do <textarea>My Text</textarea> in html, the default value is always overridden by what the user inputs. Because this is an input, the .val() function sets the actual value of the input, which overrides the default value.
Is there a reason that the change function is inside the Favourites function? You simply need it in your DOM ready function like this:
$(document).ready(function(){
$('select#favourites').change(function() {
var text = $('option:selected', this).attr('data-post');
$('textarea#post').val(text);
});
});
I've also changed:
the .text to .val which will always change a form field value correctly
removed find and replaced with method for searching inside this: $('option:selected', this)
Here's a jsFiddle for you: http://jsfiddle.net/sp5L4/2/
Try using something like on() (the new live()), also, use val() and not text(). might be able to use data() too
$(document).on('change', 'select#favourites', function() {
var text = $(this).find('option:selected').data('post');
$('textarea#post').val(text);
});
Use the 'on' method to attach/listen to event handlers throughout the DOM.
$('select#favourites').on('change', function(){
var text = $(this).find('option:selected').attr('data-post');
$('textarea#post').text(text);
});

get the content when the div does not have the id of the div ... only has the class

Good afternoon. I have a table listing days. These days are within a <div>, but I do not have an ID for the <div>. I tried to get the contents of the <div> but it still fails, as it does when I try to get the value.
This is an example of the <div> I'm trying to get the class of.
<div class="fc-day-number">6</div>`
I'm trying to get this value with the Seguito function but am not getting the value of the content div ..
$(".fc-widget-content").click(function () {
var diaSelecionado = $('.fc-day-number').val();
alert(diaSelecionado);
});
});
Instead of val(), use .html() to return the element's innerHTML property:
$(".fc-widget-content").click(function () {
var diaSelecionado = $('.fc-day-number').html();
alert(diaSelecionado);
});
});
val() is used to get the value of form elements, you probably want html():
$(".fc-widget-content").click(function () {
var diaSelecionado = $('.fc-day-number').html();
alert(diaSelecionado);
});
});
From jQuery documentation:
The .val() method is primarily used to get the values of form elements such as input, select and textarea.
In an HTML document, .html() can be used to get the contents of any element.
You will want to change the $('.fc-day-number').val(); to $('.fc-day-number').html();

how to get the value of a span tag?

I want to get the contents of a span tag but what I have isn't working. An alert shows an empty dialog box. I've tried the following but nothing works.
var test=$('#test').val()
var test=$('span#test').val()
var test=$('td span#test').val()
Can someone tell me what I'm doing wrong?
span elements do not have a value property.
Instead, use html() for the HTML or text() for the text nodes.
$('span#test').text()
will give you the text. val() is for the attribute value
You are correct almost, but instead of the val() to Need to say html().
var test=$('#test').html();
var test=$('span#test').html();
var test=$('td span#test').html();
a span doesn't have a value attribute.
You should instead do the following
var test=$('span#test').html()
or
var test=$('span#test').text()
use this
var test=$('#test').html()
You should use .text(). .val() is only for input elements.
var test = $('span#test').text();

getting the value of a div in jquery?

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

Categories

Resources