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.
Related
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();
I've saved the name of the DIV I want to delete in a variable with JQuery.
I want to delete this div with JQuery. I tried this code:
var list = $('#myLists .list').attr('name') == oberpname; //oberpname is the variable with the name
for (index = list.length - 1; index >= 0; index--){
list[index].parentNode.removeChild((list[index]));
}
//$oberpname has the same name as in oberpname in JQuery above
<div id="myLists">
<div class="list" name=$oberpname></div>
</div>
When I run this code nothing happens. How can I refert exactly to div with JQuery?
EDIT NOTE:
Deleted some mistakes like the ID.
Use Attribute Equals Selector and than .remove()
$('#myLists div[name="oberpname"]').remove();
First of all your markup is invalid. Add name attribute value in quotes.and use:
$('#myLists div[name="oberpname"]').remove()
or from variable:
$('#myLists div[name="'+oberpname+'"]').remove()
You can just use:
$('#myLists div[name=oberpname]').remove();
instead of looping like what you're doing at this moment.
Use attribute selector
var oberpname = "somename";
$('div[name=' + oberpname + ']').remove();
for correctness, the element div does not have the "name" attribute. you may use id, class, or data-*, such as data-name.
<div class="list" data-name="custom-name">
...
</div>
if using data-name (assuming oberpname='custom-name'),
$('#myLists [data-name="'+oberpname+'"]').remove()
I'm not sure why you want to use variable in the HTML, as you can't do it like the one in your example. If you want to assign a variable for data-name via jQuery, you should target the element with a specific class then add attribute.
<div class="list">
</div>
your script should look like:
var customName = 'custom-name';
$('.list').attr('data-name',customName);
$('#myLists [data-name="'+customName+'"]').remove()
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
I have a dynamic html table generated using javascript. the table contains diffrent controls like textbox,dropdown box which has custom attributes.How can I loop through all the controls present inside this table and find the control whose custom attribute matches to some value?
This will give you all the form elements inside your table (:input selector):
var $formElements = $('#tableid').find(':input');
You can filter with an attribute selector:
//will select every form element having a data-custom attribute set to 5
var $formElements = $('#tableid').find(':input[data-custom="5"]');
Please see the jsFiddle Demo. For my examples I used HTML5 data- attributes, but the code will work with any attribute you need.
OR you can use the filter() method to write a function that filters your elements:
var $formElements = $('#tableid').find(':input').filter(function () {
return $(this).attr('data-custom') == '5';
});
jsFiddle Demo with filter()
Demo : http://jsfiddle.net/DSqZr/1/
function getControl(_value){
$("#panel :input").each(function(){
if($(this).attr("custom") == _value){
return $(this);
}
})
}
var selectedCrl = getControl(1);
You can use Attribute Contains Selector.
Check the example it is probably very close to what you need which is finding input & select elements with certain attribute values
Give them a class .control and:
$('.control[attribute=value]')
Check Selectors API for more on attribute selectors.
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