String value in li's value attribute using jquery - javascript

I have string value in li's value attributes but it is giving me 0 when I am trying to get with jquery. Any Idea why? fiddle
$(function(){
alert($('li').attr('value'))
})
<li value="CAD"></li>

For custom properties you could use $.data() method, for sample:
alert($('li').data('value'));
and in your html use the prefix data-,
<li data-value="CAD"></li>
You also could use $.data() method to set values in a data custom property, for sample:
$('li').data('value', '123');

In html value is a predefined attribute for li which can store only number. you can find it here. As it can be used to store number of the list.
http://www.w3schools.com/tags/tag_li.asp

You can use data- prefix.
http://jsfiddle.net/37pAZ/1/
$(function(){
alert($('li').attr('data-value'))
})
<li data-value="CAD"></li>

You can try following..
Html:
<li data-value="CAD"></li>
JS:
alert($('li').data('value'));
Here is demo : http://jsfiddle.net/ed8ZL/

try this one fiddle
<li data-value="CAD"></li>
alert($('li').data('value'))

Related

HTML store value into div and get its value

I have a div like
<div class="firstclass" id="first" data-value="firstvalue">SomeThing</div>
Here I want to get the value in data-value like by doing document.getElementById('first').value or something like this..
How can I get this value or if there is similar approach
Use .attr() or .getAttribute(). That would work.
jQuery Solution
$(function(){
console.log($('#first').attr('data-value'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="firstclass" id="first" data-value="firstvalue">SomeThing</div>
JavaScript Solution
function Example(){
console.log(document.getElementById('first').getAttribute("data-value"));
}
Example();
<div class="firstclass" id="first" data-value="firstvalue">SomeThing</div>
jQuery has the data() method. Consider using it:
// To get/read the value
$("#first").data("value")
// To set the value
$("#first").data("value", "foo-bar")
Docs:
Return the value at the named data store for the first element in the
jQuery collection, as set by data(name, value) or by an HTML5 data-*
attribute.
You can consider it as a normal attribute and use plain javascript as follows:
document.getElementById("first").getAttribute('data-value');
Since the attribute naming follows the data- naming convention we can use the HTML5 data specification.
In plain javascript you use the dataset API:
document.getElementById("first").dataset.value;
However, jQuery provides a nice shortcut for this:
$("#first").data("value");
I have found that using .val() works nicely here
To Set:
$("#div").val(1); // Sets value of div to 1
To Retrieve:
let foo = $("#div").val(); // Retrieves "1"
Use the getAttribute() method.
In your case -
document.getElementById('first').getAttribute('data-value')
Documentation can be found here:
http://www.w3schools.com/jsref/met_element_getattribute.asp

JQuery: Calling the input value by an ID

I try to get the value of the input id="registration_type"
I type on console:
$('#registration_type')
then it will appear:
<input id=​"registration_type" name=​"contact_registration[type]​" type=​"hidden" value=​"ContactRegistration">​
I want to get the value only which is "ContactRegistration"
How will I do that on JQuery?
You need to use
$('#registration_type').val();
USE .val() Method of jQuery:
$('#registration_type').val()
DEMO
you are missing val() of jquery .
$('#registration_type').val();
$('#registration_type').value;
If you can get it as whole object, it means you are able to access its property.
using $('#registration_type') you get dom element. Now from this element you can fetch any property or function.
for value of $('#registration_type') you need to
$('#registration_type').val()

Adding data attribute value not working

I am trying to add a data attribute with a value to a li, but for some reason its not working.
Iv done this before on divs but for some reason its not working correctly now.
Here is my jsfiddle http://jsfiddle.net/76MDE/1/
Here is my code.
<ul class="title-area">
<li class="name">
<h1>cool</h1>
</li>
</ul>
$('.name').data("element", "name");
.data() does not add the data-* attribute. It creates a jQuery object and it will be stored internally in a jQuery cache variable.
If you want to set the attribute you must use .attr()
$('.name').attr("data-element", "name");
Use this :
$('.name').attr("data-element", "name");
Demo
Fiddle
USE THIS
$('.name').attr("data", "element");
It IS working, as you can verify by putting a:
alert($('.name').data("element"));
It's only that the HTML is not modified.
If you want to see it in the HTML, too, use the following:
$('.name').attr("data-element", "name");

Set the value of element by classname, without having the element's ID

Assume that we have the following code:
<span class="input-text">
<input type="search">
</span>
Is there any way, we could set the value of that without having the ID of the element?
Possible solutions are many. .val('your value') is the method to set the input tag value
jQuery
With class referring to span element
$('.input-text').find('input').val('value');
$('.input-text input').val('value'); // descendent selector
$('.input-text > input').val('value'); // direct children selector
Without referring to span element
$('input[type=search]').val('value'); // attribute selector
Javascript
$('.input-text').find('input')[0].value = 'value'
Or If you want to over write the content inside the <span> tag use
$('.input-text').html('content')
$('span.input-text').html('content')
You can do like this :-
$(".input-text").children().val('set any value you want to')
Use like this:
$('input[type="search"]').val("set your value");
You can use Attribute Equals Selector [name="value"]
$('input[type="search"]').val("Your Value");
or
$('.input-text input').val("you value");
DEMO
You should refer jQuery selectors. This would be more helpful to you.
try val() or value
$('input[type="search"]').val("Your Value");
or
$('input[type="search"]').value = "Your Value"
Try this:
$(".className").val("your value");

Selecting custom data attributes in JQuery

I have a list here
<ul id="demo2" data-name="demo2">
<li data-value="here">here</li>
<li data-value="are">are</li>
<li data-value="some...">some</li>
<!-- notice that this tag is setting a different value :) -->
<li data-value="initial">initial</li>
<li data-value="tags">tags</li>
</ul>
Where each li item has a custom data attribute. On JQuery how would get all of the values of each li element which has an attribute of data-value? I want to get their value.
but this code of mine doesn't seem to be working
$('#view-tags').click(function(){
$('li[data-value]').each(function(){
alert($(this).data("value"));
})
});
The whole code on jsfiddle: http://jsfiddle.net/Zn3JA/
You are pretty close. You can use jQuery's .data() method to read attributes that start with data-. So in your case .data("value") since your attribute is data-value="some".
This should do it:
$('li[data-value]').each(function(){
alert($(this).data("value"));
});
Here is a working fiddle as well: http://jsfiddle.net/nuphP/
$(this).attr('data-value')
should also work.
You can use in your case:
jQuery(this).data("value");
in order to retrieve the value.
$(this) refers to the current li element hence you get the element alerted.
You can try what the others have suggested i.e $(this).data("value")
$('#view-tags').click(function(){
$('li[data-value]').each(function(){
var value = $(this).attr('data-value');
alert(value);
})
}); // this work normally
Takes the attribute value and stores the variable value
var value = $ (this) .attr ('date value');
After this warning the variable value
alert (value);

Categories