My code has been given below . Why i am getting undefined? Please help me out.
//HTML is here
<input type="hidden" id="element_id">
//Jquery code is here
$('#student_update_form').on('submit', function(event) {
event.preventDefault();
var id = $(this).attr("element_id");
alert(id);
});
Short answer: just
$('#element_id').attr('id')
To selects a single element with the given id attribute:
$('#id')
it equivalent to document.getElementById() in Javascript: https://api.jquery.com/id-selector/
To get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.
.attr()
https://api.jquery.com/attr/
You get undefined because
$(this) does not refer to <input type="hidden" id="element_id">, it refer to the form has id='student_update_form'
and this form does not has an attribute named: element_id, so js return undefined
You can try:
var id = $('#element_id').attr('id');
alert(id);
$('#student_update_form').on('submit', function(event) {
event.preventDefault();
var id = $("#element_id").val();
alert(id);
});
There's no need to use attr, you can use id directly.
Related
This is my js/jquery code in which I am trying to access the current button that was clicked, with class of delete, and then get the property data-id's value. When I console.log the string that I hope to have it says undefined?
Any suggestions on what I am doing wrong?
$(".delete").click(function(){
var id = $(this).prop("data-id");
console.log(id);
});
Since data-* is an attribute you need to use attr()
var id = $(this).attr("data-id");
or you can get data-* attribute value using data()
var id = $(this).data("id");
Try the attr() method.
var id = $(this).attr("data-id");
The shortest would be:
$(".delete").on('click', function(){
var id = $(this).data("id");
console.log(id);
});
Try
$('.delete').on('click',function(){
var id= $(this).attr('data-id');
console.log(id);
})
How can I retrieve this Id using jQuery?
<span data-itemkey="40e1eec6-f949-468e-8a25-ba97d0ec3fb2" class="word">
<div class="additionalStyling green" id="2">Approval Process</div>
</span>
I tried this which returns undefined
$(document).on("click", ".word", function (e) {
var id = $(".word:first-child").attr("id");
}
Change this:
var id = $(".word:first-child").attr("id");
To:
var id = $(this).find("> div").first().attr("id");
Just to make sure, I am not copying the same one:
var id = $(this).children().first().attr('id');
As there will be multiple elements with class .word, $('.word') will return a set of elements.
Use
$(this) // The element that is clicked
.children() // Get all direct descendants
.first() // Get first element from it
.attr('id'); // Get the `id` attribute value
children accepts a selector so you can make the above shorter thus:
$(document).on("click", ".word", function (e) {
var id = $(this).children(':first').attr('id');
}
Try:
$(document).on("click", ".word", function (e) {
var id = $(this).find('[id]').attr('id');
});
I can't figure out how to get the select tag value. I need to alert the text value "ART"
Any Idea?
<select class='category_drop43' value="ART"><option value='test'>Test</option></select>
$(document).ready(function(){
$('.category_drop43').change(function() {
var keyword = $('select' this ).val();
alert(keyword);
});
})
You need to use .val() instead of .value():
var keyword = $(this).val();
or better using pure javascript to get the value:
var keyword = this.value;
Please note that select does not have value attribute as well as your select don't have any class name as .category_drop43, so you can either add this class to your select
<select class="category_drop43"><option value='test'>Test</option></select>
or target the select element using:
$(document).ready(function(){
$('select').change(function() {
var keyword = this.value;
alert(keyword);
});
});
value is invalid HTML attribute for select element, you can use data-* HTML5 attribute instead:
<select class="category_drop43" data-value="ART"><option value='test'>Test</option></select>
then you can use .data() to retrieve the value:
$(document).ready(function(){
$('select').change(function() {
var keyword = $(this).data('value');
alert(keyword);
});
});
Fiddle Demo
I have more similar elements in HTML which are being added continously with PHP. my question is the following:
With jQuery, I would like to add a click event to each of these <div> elements. When any of them is being clicked it should display it's content. The problem is that I guess I need to use classes to specify which elements can be clickable. But in this case the application will not be able to decide which specific element is being clicked, right?
HTML:
<div class="test">1</div>
<div class="test">2</div>
<div class="test">3</div>
<div class="test">4</div>
<div class="test">5</div>
jQuery try:
$("test").on("click", function()
{
var data = ???
alert(data);
});
UPDATE - QUESTION 2:
What happens if I'm placing <a> tags between those divs, and I want to get their href value when the DIV is being clicked?
I always get an error when I try that with this.
this refers to the element triggering the event. Note that it is a regular js element, so you'll need to convert it to a jQuery object before you can use jQuery functions: $(this)
$(".test").on("click", function()
{
var data = $(this).text();
alert(data);
});
Like this:
$(".test").on("click", function(event)
{
var data = $(event.target);
alert(data.text());
});
this variable contains the reference of current item
$(document).ready(function() {
$(".test").click(function(event) {
var data = $(this).text();
alert(data);
});
})
;
The class selector in jquery is $(".ClassName") and to access the value, use $(this) as such:
$(".test").on("click", function(){
var data = $(this).text();
alert(data);
});
You can use this inside the function which mean clicked div
DEMO
$(".test").on("click", function () {
alert($(this).html());
});
I am developing an application using JQuery. This is a fragment of the HTML code I am using:
<MarkNag class="altcheckboxoff" id="markable_38" Azpimark_id="100038">helburua </MarkNag>
<MarkNag class="altcheckboxoff" id="markable_2" Azpimark_id="100002">Oriolek </MarkNag>
<MarkNag class="altcheckboxoff" id="markable_39" Azpimark_id="100039">gas liberalizazioa </MarkNag>
I have the next JQuery script in the HTML page:
<script type='text/javascript'>
$("MarkNag").click(function (){
$(this).toggleClass("highlight");
});
</script>
I would like to know how could I store "markable_39" in a variable if this MarkNag tag was clicked. I guess I should use .data(). But I dont really know how. Any ideas? Thanks
Do it like this
$("MarkNag").click(function ()
{
$(this).toggleClass("highlight");
var IdOfTag = this.id;
//or
IdOfTag = $(this).attr('id');
});
Also, you can just use this.id,
like:
var id = this.id;
Actually, the correct code would be $(this).attr("id").
$("MarkNag").click(function (){
$(this).toggleClass("highlight");
alert(this.id); // Method 1: this.id
alert($(this).attr('id')); // Method 2: $(this).attr('id')
});
here u will get object from where the event occurs
var eventobject = arguments.callee.caller.arguments[0];
here u can access any attribute of currentTarget (in this case id)
var id = $(eventobject.currentTarget).attr("id");