Parameters and JQuery - javascript

I have a few name elements in a html document that i want to pass to the jquery function assigned to a variable named "elements"
I want to assign the value of the clicked elements ID to the variable x.
I am new to JQuery can somebody help me please.
var elements = document.getElementsByName('color');
$(elements).click(function() {
x = $(this).id;
});

$('#color').click(function() {
x = $(this).attr('id');
});

$(function(){
var x;
$('[name="color"]').on('click', function(){
x = $(this).attr('id');
alert(x);
});
});
Check jsFiddle

You dont want to use jquery with javascript DOM Objects you've already gotten. You can grab the objects as Jquery objects with the class selector.
$('.color').click(function() {
x = this.id;
alert(x);
});
Here is a http://jsfiddle.net/2gmM3/

Try this:
$('html').on('click', '[name="color"]', function(){
var x = $(this).attr('id');
})

Related

How can I access current html elements certain property value?

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

Find All the controls in a form using jQuery or javascript

I am a starter in jQuery . How to find all the controls in a form using jQuery?
I know the code is like this
function submitValidator(){
$("form :input").each(function(){ });
I want to access their Id's and need to apply regular expressions
Some of the text boxes are numeric remaining will be alphanumeric. Is there any method to sort them to apply regular expressions?
You can add a new property data-charSet in HTML
<input type="text" id='amt' data-charSet='numeric'>
add which all controlles you want to add after the "form :"
function submitValidator(){
$("form :text, textarea").each(function(){
var NumericOnly = "^[0-9]*$";
var svId = $(this).attr('id');
if($(this).attr('data-charSet') == 'numericonly')
{
if(!$(this).val().match(NumericOnly)) {
alert("numeric");
eval("$('#" + svId +"').focus();")
return false;
}
}
});
}
It's jQuery, not j-query.
Anyway...
You can do it like this:
$("form :input").each(function (index, element) {
var id = $(this).attr("id"); // returns the object ID
var value = $(this).val(); // returns the object value
// etc
});
use
function submitValidator() {
$("form :input").each(function(){
var id = $(this).attr('id'); // here you got id
});
} // here missed brace
you need not to get Id if you can get object
function submitValidator() {
$("form :input ,form textarea").each(function(){
$(this).yourfunction();
});
}
:input will only give you tags with input, textarea will be missed so need to add that as well
I think you want to do something like this:
$("form").find("input").each(function(){
var currentElementsId = $(this).attr("id");
if(currentElementsId.match(/^regex/)){
//do something
}
});
if you want to get more than only input elements inside the form tag, you can put multiple selectors in the find() function like this; find("input,select,textarea,.className,[type='valueOfAttributeType']") and obviously any other selectors

jQuery how to get the class or id of last clicked element?

I am trying to get the class or an id of the last clicked element. This is what I have based off of what I found here...
HTML
Button
JQUERY
$('.button').click(function () {
myFuntion();
});
function myFunction (e) {
e = e || event;
$.lastClicked = e.target || e.srcElement;
var lastClickedElement = $.lastClicked;
console.log(lastClickedElement);
}
This sort of does what I want, but I am not sure how to go about modifying it so I can get just the class.
I have also tried using this solution but couldn't get it to work with my code.
$('.button').click(function () {
myFuntion();
});
function myFunction(){
var lastID;
lastID = $(this).attr("id");
console.log(lastID);
}
When I do this my console log comes back as undefined. I am probably missing something obvious. Any help is much appreciated. Thanks.
You can pass clicked element as parameter to your function:
$('.button').click(function () {
myFunction(this);
});
function myFunction(element) {
console.log(element);
console.log(element.id);
console.log($(element).attr("class"));
}
UPDATE added jsfiddle
A couple of ways come to mind:
$(".button").click(myFunction);
Should work with the above myFunction.
$(".button").click(function () { myFunction($(this)); });
function myFunction($elem) {
var lastID;
lastID = $elem.attr('id');
$.data('lastID', lastID);
}
In order to get the class-name of the element, assuming you have an accurate reference to the element from which you want to retrieve the data:
var lastClickedElement = $.lastClicked,
lastClickedElementClassNames = lastClickedElement.className;
This does return the full list of all the classes of the element though.
$('.button').click(function () {
myFuntion(this);
});
function myFunction(ele){
var lastID;
lastID = $(ele).attr("id");
console.log(lastID);
}
First Select all possible DOM Elements
var lastSelectedElement = null
$(document).ready(function(){
$("*").live("click",function(){
lastSelectedElement = $(this);
myFunction($(this));
});
});
function myFunction(element) {
console.log(element);
console.log(element.id);
console.log($(element).attr("class"));
}
than you could play with lastSelectedElement by grabbing it's ID or Class with jQuery .attr("ID OR CLASS");

store HTML tag attribute value in a variable using Jquery

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

Getting a div's information when I mouse over it

I want to be able to mouse over a <div> and use JavaScript to get the information (for example the id) and store it in a variable.
What would be the most efficient way to make this happen?
This sould do it for you :
$('div').mouseover(function(){
var content = $(this).html();
var id = $(this).attr('id');
alert('the element\'s ID is: '+id+'and content is: '+content);
});
$('#yourDivId').hover(function(){
var value = $(this).html();
});
You can try this:
var currentDivID;
var currentDivValue;
$(document).ready(function(){
$('div').mouseover(function(){
currentDivID = this.id
currentDivValue = $(this).html();
});
});
besides the fact that div's doesn't have values, you can store it's text or argument or something else.
var someVar = '';
$(document).ready(function(){
$('div').mouseover(function(){
someVar = $('div').html();
someVar = $('div').attr('id');
someVar = $('div').attr('class');
someVar = $('div').find('input').val();
}
});
$("div").bind("mouseenter",function(){
var divHTML = $(this).html();
});
here is the fiddle http://jsfiddle.net/fveRk/
Here is a simple example:
<div id="test">Hello world!</div>
$('#test').mouseover(function(){
var test = $(this);
console.log(test);
});
http://jsfiddle.net/4uLzf/
Attach a mouseover event to the div.
Using jquery:
$('#theDiv').mouseover(function() {
var value = $(this).html();
//store value
});
jQuery has a nice way to detect the hovering: http://api.jquery.com/hover/
When you say "get the value" are you talking about getting the div's contents? In that case, the html() jQuery method will do it.
http://api.jquery.com/html/

Categories

Resources