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/
Related
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');
})
I am trying to append to a link with id a value that is entered from the input text field. I came this far searching stackoverflow but id doesn't work!
<script type="text/javascript">
jQuery(function(){
$("#txt_name").keypress(function() {
var value = $("#txt_name").val();
});
$("a#coupon_link").attr("href", function(i) {
return href + '&discount_code='.text(value);
});
});
</script>
and this is how the html looks like
<form>
<fieldset>
<input id="txt_name" type="text" value="discount" />
</fieldset>
</form>
<a id="coupon_link" href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=XXXXXX&cl=YYYYYY&ejc=2" target="ej_ejc" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this);"><img src="http://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" alt="Add to Cart"/></a>
You probably meant this:
$(function() {
$("#coupon_link").on('click', function(e) {
e.preventDefault(); // apparently not needed
location.href = $(this).attr('href') + '&discount_code=' + encodeURIComponent($('#txt_name').val());
});
});
You don't have to update the value of #txt_name on keypress; you only have to use the value when the link is pressed.
Fix your code like this :
$(function(){
$("#txt_name").keypress(function() {
var value = $("#txt_name").val();
var link = $("#coupon_link");
var originalHref = link.attr('originalHref');
if (!originalHref) {
originalHref = link.attr("href");
link.attr("originalHref", originalHref)
}
link.attr("href", originalHref + '&discount_code='+value);
});
});
A few things to note :
never add anything to a selector when you're targeting an element by ID
your value variable wasn't in the same scope
the return of val can be directly concatenated, you don't need to try to change it to text
you don't need to pass a function to attr in your case
you're trying to make the href grow with every key stroke. This is a bad idea. The solution I propose is to keep the original href
if you're not sure the original href has yet some parameters (i.e. has '?') you should test it (I let you do that)
Overall a much cleaner solution wouldn't be to change the link but to build the href on click on the link :
$("#coupon_link").click(function(e) {
location = this.href + '&discount_code=' + $('#txt_name').val();
});
Not sure to understand, but it looks like a scope issue try this javascript :
<script type="text/javascript">
jQuery(function(){
var value = 0;
$("#txt_name").keypress(function() {
value = $("#txt_name").val();
$("a#coupon_link").attr("href", function(i) {
return href + '&discount_code=' + encodeURIComponent(value);
});
});
});
</script>
Try this:
jQuery(function(){
$("#txt_name").keypress(function() {
var value = $("#txt_name").val();
$("a#coupon_link").attr("href", '&discount_code=' + String(value));
});
});
This isnt working because the href isnt being changed as the function is called before a keypress event is triggered. Look into replacing keypress with blur and update the href when blur() is called
i think you need this:
<script type="text/javascript">
$(function(){
$("#txt_name").keypress(function() {
var value = $("#txt_name").val();
$("a#coupon_link").attr("href",href+'&discount_code='+value.toString);
});
});
</script>
look at href don't know where you have that var, if it is needed ok else remove that
You probably need to change the href when a key has been pressed, not only on page load. To do so you will have to do the replacing of the href inside the keyup function, like so:
$(function(){
var link = $("a#coupon_link");
link.data('href', link.attr("href"));
$("#txt_name").on('keyup', function() {
link.attr("href", link.data('href') + '&discount_code='+ this.value);
});
});
So as to not append the &discount_code=*** several times, you need to store the original href somewhere, like in a data attribute.
this one worked for me getting value from input field and append it to the existing link using jquery.
$('#qty').on('keyup', function() {
var theQty = 0;
theQty = $("#qty").val();
var oldHref=$("a#buybtn").attr("href");
$("a#buybtn").attr("href",oldHref+ '&qty=' + String(theQty));
});
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");
I need to get value from a href button. Here I have just developed a code which show all href value. Actually I need to get value from where I click.
here is my code
$(document).ready(function() {
$("a.me").click(function(){
var number = $('a').text();
alert(number);
});
});
You should do
$(document).ready(function() {
$("a.me").click(function(){
//It's not clear if you want the href attribute or the text() of the <a>
//this gives you the href. if you need the text $(this).text();
var number = this.href;
alert(number);
});
});
$("a.me").click(function(){
var number = $(this).attr('href');
alert(number);
});
In jQuery you can use $(this) to reference the element that was clicked (or otherwise used)
Like so:
$("a.me").click(function(){
var number = $(this).text();
alert(number);
});
var number = $(this).attr('href');
$(document).ready(function() {
$("a.me").click(function(){
var target=$(this).attr("href");
alert(target);
});
});
one of the answers above will work or you could use
...
$("a.me").click(function(e){
var number = $(e.target).text();
alert(number);
});
So I would like to set a variable to the text of an element when that element is clicked:
$('.clickme').click(function() {
var selected;
var selected = this.text();
});
I've looked at the documentation and I believe this should work. Any ideas what the issue might be?
Try:
var selected = $(this).text();
If no luck, maybe it's form element so it has value:
var selected = $(this).val();
If still no luck let us know what is clickme (div? span?) and try this as "last resort":
var selected = $(this).html();
if .clickme is input or textarea :
var selected;
$('.clickme').click(function()
{
selected = $(this).val();
});
Other :
var selected;
$('.clickme').click(function()
{
selected = $(this).text();
});
You need to wrap the this with the jQuery object...
var selected = $(this).text();
If your listener is on a button, IE doesn't know the difference between the text and value properties and jQuery doesn't fix it, getAttribute doesn't help either. You need to use getAttributeNode:
<button value="the value"
onclick="alert(this.getAttributeNode('value').value);">The text</button>