get Id of input field using JavaScript - javascript

I have input in grid, which each unique ID, output as following;
I want to know what is equivalent to $(this).attr("ID") in javaScript
function load_getUserListByGroupID()
{
var selectedGroupID = document.getElementById('input');
alert(selectedGroupID);
}

You can simply get it using .id attribute like this:
this.id;
Or you can also use .getAttribute() method:
this.getAttribute('id')
So your example should be, like this:
function load_getUserListByGroupID(element) {
alert(element.id);
}
aa

Pass this to onclick event handler. Then you can directly get its id.
Use
Script
function load_getUserListByGroupID(elem){
alert(elem.id);
}

Use a variable,
onClick="reply_click(this.id)"
function reply_click(clicked_id)
{
alert(clicked_id);
}
Add the OnClick function the element you'd like, this will also throw the ID value when processing to the function.
Hope this helps :)

Related

How to create href link to function

I want to create link that send to function:
tdLink2.innerText="Delete";
tdLink2.href="javascript:deleteDepartment(id)"
but the "id" parameter was not sent.
How can I insert the parameter?
ID is not parsed in your string
EITHER (Don't forget the extra quotes if ID is a string
tdLink2.href="javascript:deleteDepartment('"+id+"')"
alternative with template literals
tdLink2.href=`javascript:deleteDepartment('${id}')`;
I would personally keep DELETE far away from a href
This is better
tdLink2.href="#"
tdLink2.addEventListener("click",function(e){
e.preventDefault(); /stop the link
deleteDepartment(id); // id is some global variable
})
EVEN better is to do
tdLink2.href="#";
td.dataset.id = id; // assign to a data attribute
tdLink2.addEventListener("click",function(e){
e.preventDefault(); // stop the link
deleteDepartment(this.dataset.id); // pass the data attribute
})
If id is already a defined variable then you can do like this:
tdLink2.href=`javascript:deleteDepartment(${id})`
You can do this if it is of type string.
Otherwise you can go for this:
function f(){
deleteDepartment(id)
}
tdLink2.href='javascript:f()'
Just assign function result to property
tdLink2.href = deleteDepartment(id);

toggle div with a class name derived from a parameter

I am having a JavaScript function where the classname comes as a parameter. So i want to toggle() the specific class name which came in the parameter. How should i do this? I tried like this but it doesnt work.
function hideclass(classval){
$("#divname.classval").toggle();
}
try this
function hideclass(classval){
$("#divname."+classval).toggle();
}
or
function hideclass(classval){
$("#divname").hasClass(classval).toggle();
}
Simply concatenate the value to the text of the selector:
function hideclass(classval){
$("#divname." + classval).toggle();
}

insert random numbers into a class

If I do this:
$('.classname').html(Math.floor(Math.random()*10)+1);
All of "classname" is filled with the same number.
Is it possible to fill every instance of "classname" with a different random number?
The only possible way I can think of solving this is to go through each instance of "class name" and apply a random number one by one.
.html()
$(".classname").html(function(idx, oldValue) {
return (Math.floor(Math.random()*10)+1);
});
fiddle
the html method has an "overload" that accepts a function. The function should return the value to set the inner html to. In your case you can do:
$(".classname").html(function() {
return (Math.floor(Math.random()*10)+1);
});
the function is actually called with two arguments. The first is the index of the element in the selection and the second is the current value of the elements inner html
You can use jQuery's .each() function to iterate over each element matching the selector you provide -
$.each('.classname',function(index,elem){
var newRandomNumber = (Math.random()*10)+1;
$(elem).html(Math.floor(newRandomNumber));
});
For every iteration of the each() function, you'll have the index of the element you are on and the element itself in the elem parameters.
http://api.jquery.com/jQuery.each/
try this
$('.classname').each(function(index) {
$(this).html(Math.floor(Math.random()*10)+1);
});
Yes. The easiest way to do so would be using the jQuery each function:
$('.classname').each(function() {
$(this).html(Math.floor(Math.random()*10)+1);
});

How to access a calling element's id in a jQuery click() function

So I am binding a .click() function to a css class, but I want to be able to access the calling element's id from inside this function when it is called. What is the best way to do this?
You can pull it right out of this:
$(selector).click(function() {
var id = this.id;
// Do interesting things.
});
The this in a jQuery click callback is just a DOM object that exposes its attributes as object properties.
You can use the this key word:
$(".elementClass").click(function () {
var currentElement = $(this); // refers to the current element
var theId = currentElement.attr("id");
});

Is it possible to use variables as dom elements?

I have a several input fields in a form each having a unique name. For example, to change the color I would do:
testForm.username.style.background = "yellow";
username being the name of the input and testform being the form name
I want to do this: replace username with a variable elem so that when I call the function to change the background color I don't need to have a separate function for every unique field. I would just send the elem name and that function would work for every field.
testForm.elem.style.background = "yellow";
My problem is it doesn't work. For example it passed the elem into the function fine, but it says that testForm.elem.style is null. For some reason javascript doesn't like variables for element names I'm guessing?
var elem = 'username';
testForm[elem].style.background = 'yellow';
try
testForm [elem].style.background = "yellow";
or
var elem = testForm.username
elem.style.background = "yellow";
in the first case elem holds the username, and in the second case, elem points to the actual DOM element.
A property of a JavaScript object (in this case, the "username" property of the object "testform") can be accessed using either object.property or object["property"] syntax. As the second form takes a string (as shown by the double quotes), it follows that a variable containing a string can also be used with that syntax. Hence:
testform[elem].style.background = "yellow";
will do what you want.
It sounds like you're creating a function to do this anyway. In that case, why not just use the following function:
function changeBackgroundOfElementToYellow(element){
element.style.background = "yellow";
}
And call it with:
changeBackgroundofElementToYellow(testForm.username);
In general I find the RaYell/kangax method posted already to be better, but this is another option.
You'd have to do an eval to do something like that, eg eval("testform." + elem + ".style.background=yellow");

Categories