We Keep Coding

how to pass a value to a data-attribute?

How do I pass one data-attribute value to another?
I have the following input:
<input type="radio" class="d-none" name="varieties" value="option_0" data-price-package-value-id-0="2 625">
Where I need to transfer the value of data-price-package-value-id-0 to the following element:
<li id="front_0" data-value="1 625">
Image Preview
Here's the JavaScript I have so far:
// Radio buttons prise
$(document).ready(function(){
$('input[name="varieties"]:checked').change(function() {
var package_select = this.attr('data-price-package-value-id-0');
var dataval = document.getElementById("0").attr('data-value');
dataval = package_select;
});
});
I also have a range input that already pulls the value out of li this already works but in another function,
now I have a task to pass the value from radio to li

First you should probably not be using ID's that start with a number, as it makes it harder to select in CSS and jQuery, but here you go:
$(document).ready(function(){
$('input[name="varieties"]').change(function() {
var package_select = $(this).attr('data-price-package-value-id-0');
$(document.getElementById("0")).attr('data-value', package_select );
});
});

attr() is a jQuery method. If you want to do this with vanilla javascript, then you will want to use
this.getAttribute('data-price-package-value-id-0')
this.setAttribute('data-price-package-value-id-0', newValue)
If you want to use jQuery then use
$(this).data('price-package-value-id-0') //getter
$(this).data('price-package-value-id-0', newValue) //setter
Or you can use attr() but do not intermix the use of attr() and data()
$(this).attr('data-price-package-value-id-0') //getter
$(this).attr('data-price-package-value-id-0', newValue) //setter

const element = document.getElementById('front_0');
element.setAttribute('data-value', 'my spectacular new value');

Vue2 add class to focused input

froI have a form with many inputs and I want to add a class to focused input label tag and remove class when another input selected.
I make such code
onInputSelected: function(e) {
var label = e.target.previousElementSibling;
label.classList.add('highlight');
}
but how can I remove class from one input and add to another when I change focus?
Updated:
I found solution but looks like it's to complicated :)
data: {
allInputs: document.getElementsByTagName('input')
},
methods: {
onInputSelected: function(e) {
e.target.previousElementSibling.classList.add('highlight');
[].forEach.call(this.allInputs, function (currentValue, index) {
if(currentValue.name == this.name) {
return;
}
currentValue.previousElementSibling.classList.remove('highlight');
}, e.target);
}
}

First of all you're not being very clear what you want to do.
2nd of all you have found solution so just clean up your code.
3rd of all I'd try using el.closest.
const input = document.getElementById('yourInput');
const label = input.closest("label");
// or if you want to add ids to labels
const label2 = input.closest("#yourLabel");
Link to docs
With this solution you will be little bit more save. Couse in yours, lets just imagine that somebody change HTML structure... Then very high risk your code stops working.

Can this JQuery code be written using plain Javascript?

Is there a way to represent this code as plain vanilla Javascript so I can better understand how it works for now?
$("#id").click(function(){
var $x = $("#id");
$x.removeProp("-webkit-animation");
});
Essentially I'm using this to tell the code not to play a css animation given that a certain set of parameters are met.

removeProp removes properties of objects. If that’s definitely what you want, the equivalent is the delete operator:
var element = document.getElementById("id");
element.addEventListener("click", function () {
delete element["-webkit-animation"];
});
If what you really want to do is change a CSS property, though, it needs to be an operation on the element’s style:
element.style.WebkitAnimation = "none";
But what you should probably do is change a class instead:
element.classList.add("no-animation");
and use CSS:
.no-animation {
-webkit-animation: none;
}

The delete element is the somewhat equivalent on vanilla javascript of removeProp()
element = document.getElementById('id');
element.onclick() = function(){
delete element['-webkit-animation'];
}

Yes, you can use the .removeAttribute() function to remove an attribute, like style, title, etc.
Or you can use .removeProperty() to remove a style property (supported in IE9 and above)
Fiddle
(function() {
var myDiv = document.getElementById('myDiv');
myDiv.removeAttribute('style');
var aDiv = document.getElementById('aDiv');
aDiv.style.removeProperty('height');
})();
<div id="aDiv" style="background-color: green;">Hi</div>
<div id="myDiv" style="background-color: green;">Hi</div>

Hope it will help OP
JS
var element = document.getElementById("id");
element.onClick = function(){
this.style.removeProperty("-webkit-animation");
};

Jquery: Replace a part of each attribute [duplicate]

Do someone know what is the best way to replace some string inside a onclick attribute ?
I need to get the current value and replace some text inside parameters.
Exemple, I have this link:
My link
And I want this:
My link
In other words, I want something like this:
$('a').attr('onclick', $(this).attr('onclick').replace('1', '2'));
And I know I can do this, but I need something dynamic retreiving the values of current element:
$("a").attr('onClick', "myfunction('parameter2a','parameter2b')");
Finally it working when I made a simple demo: http://jsfiddle.net/GkWhh/4/
Thank you for your solutions !

$('a[onclick]').attr('onclick', function(i, v){
return v.replace(/1/g, '2');
});
http://jsfiddle.net/cj9j7/
If you need something more dynamic do not use onclick attributes, changing onclick attributes is hackish, you can use click method instead.
var param = 1;
$('a').click(function(){
// ...
if ('wildguess') {
param = 1;
} else {
param++;
}
})

sounds like a really bad idea but anyway - you can access the string value of the onlick attribute using something like that:
$('a').each(function() { this.attributes.onclick.nodeValue = this.attributes.onclick.nodeValue.replace('1', '2'); })

You can do this: http://jsfiddle.net/SJP7k/
var atr = $('a').attr('onclick');
var str = atr.split('1');
var natr = str.join('2');
$('a').attr('onclick',natr);

jquery reset after()

is there a way to reset/update an after() element? Not add another after() text. Thank you

Maybe this will helpful.
(Controller function for Emptiness of Form to be sent Server Input parameter ID of Form Parent DIV, output is 1-true, 0 false)
function emptynessCntrl(elementosForControl){
var controlResult=1;
$(elementosForControl).find('input').each(function() {
if($(this).val().trim()===""){
controlResult=0;
console.log($(this).attr('id')+' Element is empty');
$(this).nextAll().remove();
$(this).after('<div class="err-label">'+$(this).attr('placeholder')+' is empty</div>');
return controlResult;
}
else{
$(this).nextAll().remove();
}
});
return controlResult;
}

Your question is not clear. I'll asume you want to modify an element added with .after()
Instead of doing this:
$("#elem1").after('<div id="after />");
You could do this (use insertAfter)
$('<div id="after" />').insertAfter("#elem1").attr("width", 200).html("hi") ...;
Hope this helps.
Cheers.

When you add the element, give it a name
var newElement = $('<span>Some new stuff</span>');
$('.whatever').after(newElement);
Then, when you want to change it, simply remove the previous one first
newElement.remove();
newElement = $('<div>And now for something completely different</div>');
$('.whatever').after(newElement);
You can write a function that uses .data() to remember the new element as such: (I would change the names a bit though)
$.fn.addUniqueSomething = function (content) {
var existing = this.data('something-that-was-already-added');
if (existing) {
existing.remove();
}
var something = $(content);
this.after(something);
this.data('something-that-was-already-added', something);
};
Then you can use
$('.whatever').addUniqueSomething('<span>Some new stuff</span>');
// and later...
$('.whatever').addUniqueSomething('<div>And now for something completely different</div>');
And the second one will replace the first