Develop Reference

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

Get text value of html elements with same #Id

<a id="s_6_2_19_0_mb" class="siebui-ctrl-drilldown" name="Name" rowid="1" href="javascript:void(0)">00102400010630001</a>
<a id="s_6_2_19_0_mb" class="siebui-ctrl-drilldown" name="Name" rowid="2" href="javascript:void(0)">00102402608820001</a>
I need to get the text values of both these elements. so I use the following code:
$('a#s_6_2_19_0_mb[rowid="1"]').text();
$('a#s_6_2_19_0_mb[rowid="2"]').text();
But the #Id will differ from page to page. So I am getting the id in a variable, say "idVal". And idVal = s_6_2_19_0_mb. So now to get the text value I used the below code
$('\'a' +'#'+idVal+'\[rowid\=\"1\"]'+'\'').text();
But this throws me an error. Please let me know how to extract the text value using a variable for #id in the above case

Well, as others have said IDs must be unique, but if you really can't change that (and assuming classes and rows may differ), then you could do:
$("a[id='"+idVal+"'][rowid='1']").text();

You may simplify your selector and remove the a and use the following code where rowId holds the id of the row you wish to retrieve:
var linkText = $('#'+ idVal +'[rowid=\"'+ rowId +'\"]').text();
or just hardcode the row id like that:
var link1Text = $('#'+ idVal +'[rowid="1"]').text();
var link1Text = $('#'+ idVal +'[rowid="2"]').text();
Cheers,

Id be unique in HTML so use class instead of id
$(".siebui-ctrl-drilldown[rowid = 1]").text();
$(".siebui-ctrl-drilldown[rowid = 2]").text();

You don't need to escape the =, nor the "s, and you have an uneven number of quotes.
So you should have something like this:
$('a' +'#'+idVal+'[rowid="1"]').text();
Oh and yeah, as everybody else said, IDs should always be unique. Trying to access multiple elements with the same ID will always return the first one.

You should never have same IDs for multiple elements on same page. however You can use class selector to target them:
$("a.siebui-ctrl-drilldown[rowid=1]").text();
$("a.siebui-ctrl-drilldown[rowid=2]").text();

like that:
$('a#' + idVal + '[rowid="1"]').text();
However you have to avoid same id in DOM

You can simply use this:(Remove ids with same value)
$("a[rowid=1]").text();
$("a[rowid=2]").text();

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.

Very simple javascript request. Grab element ID

I have an element that I'm grabbing the value, thus:
var text = form1.elements[i].value;
What I want to know is if I can grab form1.elements[i].value's ID somehow.

var id = form1.elements[i].id;

Javascript to get elements by their attributes

<body>
<span someAttribute="xyz">.....</span>
...
<div>
...
<span someAttribute="abc">.....</span>
...
<div someAttribute="pqr">.....</div>
...
</div>
</body>
Here is a sample html page.. I need to select the html elements by its attributes i can get the attribute values by getAttribute() but i need to select all the elements first.
How in javascript to get elements which has the attribute name as "someAttribute". Once i get the elements i can get the attribute values and use my function.
Note: i want to do this without using jquery.

In new browsers you can do:
var el = document.querySelector('[someAttribute="someValue"]');

store each element in a array the loop throught each element, and if the element contains the attribute someAttribute do somgthing.
var arr_elms = [];
arr_elms = document.body.getElementsByTagName("*");
var elms_len = arr_elms.length;
for (var i = 0; i < elms_len; i++) {
if(arr_elms[i].getAttribute("someAttribute") != null){
alert("FOUND : " + arr_elms[i].getAttribute("someAttribute"));
}
}

You can select elements by tag name using document.body.getElementsByTagName("div") to get all the div elements inside your document. This function returns an array of elements, which you can parse and filter out elements that don't match your criteria.

You can traver all elements of DOM tree.

you can use
var all = document.getElementsByTagName('*');
but this also returns the html, head and body ...
and then do a loop over all elements and look for the attributes.

I found a snippet called getElementsByAttribute(doc, tagArray, attribute, attributeValue)
You can give a try to a working fiddle: http://jsfiddle.net/Yx7EU/
Hope this can help.