I want to select a value and store it into a variable. Here is how it looks like:
My link
not I want to do smth like this:
$('a').on(click, function(){
var videoId = a[video-id].val();
});
output should be :
console.log(videoId);
somevalue
Update
video-id="this is changeable"
you need to put a and click in quotes. You can use .attr() or .data() to get the desired attribute value'
Using .attr()
$('a').on('click', function(){
var videoId = $(this).attr('video-id');
alert(videoId);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
My link
Using .data()
To use .data() you have to prefix you attribute with data e.d data-id instead of video-id
$('a').on('click', function(){
var videoId = $(this).data('id');
alert(videoId);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
My link
You can either use:
var videoId = a.attr("video-id");
Or, better stick with data-* attributes and give:
My link
var videoId = a.data("video-id");
And please change:
$(a)
// to
$("a")
Related
I am trying to remove the start of a link in jQuery. I have tried to inject the following function but it doesn't work. What am I doing wrong?
JS
$(function() {
$('link-active').each(function() {
$(this).attr('href').remove('http://www.linkplus.com/xQWE=');
});
});
HTML
<td class="block">
<a class="link-active"
href="http://www.linkplus.com/xQWE=http://www.example.com">Get</a>
</td>
When you're trying to search for classes, make use of dot (.), $('link-active') should be $('.link-active').
About .remove(): this one will remove one element of the DOM; not applicable in this case.
Solution: You will need to use .attr() to return AND update the href attribute of your tag, .replace() method should help.
$(function() {
$('.link-active').each(function() {
let href = $(this).attr('href'); //returns href value
let removableUrl = 'http://www.linkplus.com/xQWE=';
href = href.replace(removableUrl, ''); //replace the url you don't want with ''
$(this).attr('href', href); //update href value
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td class="block">
<a class="link-active"
href="http://www.linkplus.com/xQWE=http://www.example.com">Get</a>
</td>
Note: There's other methods to separate the url you don't want (if the url stay in the same format), check for:
.substring(): href = href.substring(removableUrl.length);
.split(): href = href.split('=')[1];
.replace() with regex: href = href.replace(/.*\=/,'');
Amend $('link-active') to $('.link-active').
First thing is While representing a class in jQuery try using dot notation..
$(function() {
$('.link-active').each(function() {
$(this).attr('href').remove('http://www.linkplus.com/xQWE=');
});
});
It's convenient to use attr method like this:
$(function() {
$('.link-active').attr('href', function(i, href) {
return href.replace('http://www.linkplus.com/xQWE=', '');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="link-active" href="http://www.linkplus.com/xQWE=http://www.example.com">Get</a>
Change your code on line 3 to
$(this).attr('href', $(this).attr('href').replace('http://www.linkplus.com/xQWE=', ''));
Full code should be
$(function() {
$('link-active').each(function() {
$(this).attr('href', $(this).attr('href').replace('http://www.linkplus.com/xQWE=', ''));
});
});
remove is not being used correctly here, as that method is meant to remove elements from the DOM and accepts a selector string as its argument.
Try something like this instead:
$(function() {
$('.link-active').each(function() {
var href = $(this).attr('href');
var strToReplace = 'http://www.linkplus.com/xQWE=';
$(this).attr('href', href.replace(strToReplace, ""));
});
});
Above we use replace to replace the start of the link with an empty string.
You have to get the string, replace it and then set it again.
Something like this:
$(function() {
$('link-active').each(function() {
replacement = 'http://www.linkplus.com/xQWE=';
url = $(this).attr('href');
$(this).attr('href', url.replace(replacement, ''));
});
});
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);
})
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 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");