Develop Reference

Get selected value from multiple select on change in dynamic form

I'm currently working on a dynamic form which enables the user to add as many variants as they would like. This form which can be added has a price, size and color. The size and color are select2 select boxes which enable the user to select multiple things. The form:
<div class="col-sm-4">
<label>Kleuren</label>
<select name="colors[{{$i}}][]" id='color-options' class="form-control multiple-select" multiple="multiple">
#foreach($colors as $id=>$color)
<option value="{{$id}}">{{$color}}</option>
#endforeach
</select>
</div>
When looking at the HTML code I have multiple of these forms which go by name: colors[0][], colors[1][], colors[2][] etc.
How do I print the value of a selected new color in a new div? The code which I have thus far:
$(document).ready(function() {
$('.multiple-select').select2({
language: 'nl'
});
$('.summernote').summernote();
var addVariantButton = document.getElementById('addVariant[0]');
addVariantButton.addEventListener('click', function(){
addVariant(0);
});
var colorSelected = document.getElementsByName('colors[0][]');
colorSelected.addEventListener("click", displayColorSelected);
});
function displayColorSelected() {
var selected_value = document.getElementById("color-options").value;
console.log(selected_value);
}
But this only works for the first colors input form, but how can I make this into a more dynamical function to get all colors input?

You can get all selected values in array as below:
function displayColorSelected() {
var selected_value = $("[id='color-options']").toArray().map(x => $(x).val());
console.log(selected_value);
}
Note: id selector will always return single element which will be first with that id. So you're getting value for first select only.
You can use attribute selector ([]) instead which will find every element with given id. So here $("[id='color-options']").toArray() will find every element with id equal to color-options and map(x => $(x).val()) will return only value part from the elements array.

Add all the selects a class ("color-select" for example), and run over all the selects -
$('.color-select').each(function() { console.log($(this).val()); })

You may need to delegate your event listener
document.addEventListener('event',function(e){
if(element){//do something}
})
Since you are using jquery its easier
$(document).on('event','element',function());

jQuery Minicolors - How to write value in HTML?

I found here on Stackoverflow similar topics but not the same.
I am using jquery Minicolors on my project: https://github.com/claviska/jquery-miniColors/
Everything work fine, but I need to do easy thing - I need to get actual color value and write it to the HTML document. So for example I need to do this:
<p><script>document.write(actualColor);</script></p>
Simply just write the actual color code anywhere in static HTML. I am very bad in JS and I didnt find some working solution.
My minicolors code look like this:
<script>
$(document).ready( function() {
$('.color-picker-1').each( function() {
$(this).minicolors({
defaultValue: $(this).attr('data-defaultValue') || '',
inline: $(this).attr('data-inline') === 'true',
});
});
});
</script>
And I use just this input for picking color:
<input type="text" id="inline" class="color-picker-1" data-inline="true" value="#4fc8db">
What can I do? I guess solution is very easy.

On change of the color, re-assign the value to the input element so that it contains new value. Then you can use that value. If you want, you can create another hidden input element to store the color values as well.
'change' event gets triggered when color value is changed. This is where all DOM manipulation should go into.
$("#inline").minicolors({
change: function(hex, opacity) {
$("#inline").val(hex);
}
});
On your code:
<script>
$(document).ready( function() {
$('.color-picker-1').each( function() {
$(this).minicolors({
defaultValue: $(this).attr('data-defaultValue') || '',
inline: $(this).attr('data-inline') === 'true',
change: function(hex, opacity) {
$(this).val(hex);
}
});
});
});
</script>

Targetting and Changing HTML content using jQuery

I'm trying to change the "10" in the HTML below using jQuery:
<div id="ingredients">
<h2>Ingredients</h2>
<h4>Sugar: <span class="sugar">10</span></h4>
Here have been the iterations that I've gone through that have been unsuccessful:
$(document).ready(function() {
$('#ingredients.sugar').html("5");
});
and
$(document).ready(function() {
$('span[class=sugar]').html("5");
});
In addition, how would I store the value of "10" in a variable? I'm trying to do this:
var $sugar = $('#ingredients.sugar').html();
Would that work?
Thanks!
Henry

Try:
$(document).ready(function() {
$('#ingredients .sugar').html("5");
});
Notice the space between; this says look for a .sugar child from the #ingredients parent. You should also be able to do:
var val = $('#ingredients .sugar').html();

You have missed space in your selector, this will work:
$('#ingredients .sugar').html("5");

Here's a version with a simplified selector (don't need #ingredients), factory caching and update without using quotes (5 works fine).
// Document ready
$(function () {
var $sugar = $( '.sugar' ), // Cache jQuery factory
originalValue = $sugar.html(); // Cache original value
// Update value
$sugar.html( 5 );
});

jQuery - if select option value equal with a data add class

I have a select box with 3 option, and a div with 3 that they has data attribute.
now i want each option that has selected=seclected and also value (number) equal with a data then add class to
for example:
if option selected / and value = with data:
<option value="2" selected="selected">
do (add class):
<a class="menuitem active" data="2"></a>
JSFiddle
$("#myselect option").each(function(){
var num = $('.menucontainer').children('a.menuitem').attr('data');
if($(this).is(':selected').val()==num){
$('.menucontainer').children('a.menuitem').addClass('active');
}
});
});

You had many small mistakes. Like
1.) Jquery was not included in fiddle.
2.) .is returns a boolean value, and you were doing $(this).is(':selected').val(). You should be doing $(this).is(':selected') && $(this).val().
3.) There was }); extra in the end.
And I think iterating other way arround will be better. Like bellow
$('.menucontainer .menuitem').each(function(){
if($(this).attr('data')==$('#myselect :selected').val())
$(this).addClass('active');
})
DEMO

Javascript Selector for custom Tag

I need to be able to get the .val() of a custom parameter within an tag. The tag looks like this:
option style="font-weight: normal" answerid="32" >text here< /option
For the sake of the code / tag being self explanatory, I wanted to use "answerid" instead of "name" but I can't figure out how to get the value of that. My current script looks like this:
<script>
$('select').change(function () {
var optionSelected = $(this).find("option:selected");
var valueSelected = optionSelected.val("answerid");
$.get("ticket.php?do=quickanswer&selected=" +valueSelected+ "",
function( data ) {
$( ".quickanswer" ).html( data );
});
console.log(valueSelected);
});
</script>

You can use .attr():
var valueSelected = optionSelected.attr("answerid");
Fiddle Demo

Using answerid as an attribute is invalid HTML. Instead of using invalid markup, use a custom [data-*] attribute:
<option data-answer-id="32">text here</option>
You can then take advantage of jQuery's .data() method to access the value:
answerId = optionSelected.data('answerId'); //32
.attr() works as well:
answerId = optionSelected.attr('data-answer-id'); //'32'
Please see my related answer for details as to why you'd use one over the other