Develop Reference

Create an array of selected radio button values

I have few radio buttons:
<input type="radio" value="####.###/resources/videos/7.mp4">
<input type="radio" value="####.###/resources/videos/8.mp4">
<input type="radio" value="####.###/resources/videos/9.mp4">
How can I make an array containing the selected values like following:
var videos = ["./resources/videos/7.mp4",
"./resources/videos/1.mp4",
"./resources/videos/2.mp4",
"./resources/videos/3.mp4"];

Onclick push the value of radio in array
var arr=[];
$('input').click(function(){
arr.push("."+$(this).val().split('####.###')[1])
console.log(arr);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" value="####.###/resources/videos/7.mp4">Video1
<input type="radio" value="####.###/resources/videos/8.mp4">Video2
<input type="radio" value="####.###/resources/videos/9.mp4">Video3

I would add a change event listener, that checks if the input got checked or unchecked and would add it or remove it from the list.
var originalVideoList = ["./resources/videos/7.mp4",
"./resources/videos/1.mp4",
"./resources/videos/2.mp4",
"./resources/videos/3.mp4"
];
var videos = document.querySelector("#videos");
var result = document.querySelector("#result");
var template = "<li><label for='{0}'>Video {1}</label><input id='{0}' type='checkbox' onchange='onChange()'/></li>";
var selectedArray = [];
// Set up html
videos.innerHTML = originalVideoList.map(function(video) {
return template.replace(/\{0\}/g, video).replace(/\{1\}/g, video.split("/").pop());
}).join("");
// triggered on input change
function onChange() {
selectedArray = toArray(document.querySelectorAll("li>input:checked")).map(function(item) {
return item.id.replace("####.###", ".");
});
result.innerHTML = selectedArray.map(function(video) {
return "<li>" + video + "</li>";
}).join("");
}
// Same as [...input]
function toArray(input) {
var result = [];
for (var index = 0; index < input.length; index++) result[index] = input[index];
return result;
}
<ul id="videos"></ul>
<ul id="result"></ul>

Hide/show multiple elements with multiple checkboxes

Updated after the hint in comments.
Current jsfiddle
Is there a way so that I only have to write the script once and use it for multiple ID's?
I currently have 3 checkboxes so I just copied the code 3 times but if I get for example a 100 checkboxes I can't imagine copying this a 100 times would be verry effecient
Current code
Javascript
var elem1 = document.getElementById('div_product_1'),
checkBox1 = document.getElementById('product_1');
checkBox1.checked = false;
checkBox1.onchange = function () {
elem1.style.display = this.checked ? 'block' : 'none';
};
checkBox1.onchange();
var elem2 = document.getElementById('div_product_2'),
checkBox2 = document.getElementById('product_2');
checkBox2.checked = false;
checkBox2.onchange = function () {
elem2.style.display = this.checked ? 'block' : 'none';
};
checkBox2.onchange();
var elem3 = document.getElementById('div_product_3'),
checkBox3 = document.getElementById('product_3');
checkBox3.checked = false;
checkBox3.onchange = function () {
elem3.style.display = this.checked ? 'block' : 'none';
};
checkBox3.onchange();
HTML
<input type="checkbox" name="product_1" id="product_1" />
<label>Product 1</label><br>
<div id="div_product_1">
<input type="number" name="quantity_1" id="quantity_1" />
</div>
<input type="checkbox" name="product_2" id="product_2" />
<label>Product 2</label><br>
<div id="div_product_2">
<input type="number" name="quantity_2" id="quantity_2" />
</div>
<input type="checkbox" name="product_3" id="product_3" />
<label>Product 3</label><br>
<div id="div_product_3">
<input type="number" name="quantity_3" id="quantity_3" />
</div>

As alluded to in the comments, you are reusing your elem variable. Change your code so the second and third elem are unique, i.e. this jsfiddle

You can maybe try something like this. Fiddle
This is mostly so that you don't have to copy paste the whole time.
So in a nutshell, i am adding the html controls dynamically and then hooking up the onchange event on the checkboxes
HTML
<div id="placeholder"></div>
JS
var max_fields = 100; //maximum input boxes allowed
var $placeholder = $("#placeholder");
// Add html controls
for (var i = 0; i < max_fields; i++) {
$placeholder.append("<input type='checkbox' name='product_" + i + "' id='product_" + i + "'/>")
.append("<label>Product " + i + "</label")
.append("<div id='div_product_" + i + "'></div>");
var $divProduct = $("#div_product_" + i);
$divProduct.append("<input type='number' name='quantity_" + i + "' id='quantity_" + i + "' class='hide' />");
}
// wire the onclick events
$('[id*="product_"]').change(function () {
console.log($(this));
var splitId = $(this).attr("id").split("_")[1]
console.log({
id: splitId,
control: $("#quantity_" + splitId)
})
$("#quantity_" + splitId).toggle()
});

IMHO, loops should do. Also, use class instead of id on your HTML elements.
Snippet:
var numProducts=10;
var classNameProduct='product';
var classNameContainerProduct='div_product';
var classNameQuantity='quantity';
var mainContainer=document.body;
function generateMarkup(){
for(var i=0; i<numProducts; i+=1){
mainContainer.insertAdjacentHTML('beforeend','<input type="checkbox" name="'+classNameProduct+'" class="'+classNameProduct+'"/><label>Product '+i+'</label><br>');
mainContainer.insertAdjacentHTML('beforeend','<div class="'+classNameContainerProduct+'"><input type="number" name="'+classNameQuantity+'" class="'+classNameQuantity+'"/></div>');
}
}
function initCheckboxes(){
var checkboxes=document.querySelectorAll('.'+classNameProduct),containerProducts=document.querySelectorAll('.'+classNameContainerProduct);
for(var i=0; i<numProducts; i+=1){
checkboxes[i].checked=false;
containerProducts[i].style.display='none';
(function(index){
checkboxes[index].onchange=function(){ containerProducts[index].style.display=this.checked?'block':'none'; }
}(i));
}
}
generateMarkup();
initCheckboxes();
Hope this helps.

Get value from input fields through an array

I am working on a form where there user can add multiple inputs like:
<script type="text/javascript">
<!--
var counter = 0;
var limit = 4;
window.onload = moreFields;
function moreFields() {
if (counter == limit) {
alert('You have reached the limit of adding ' + counter + ' inputs');
}
else
var newFields = document.getElementById('sa-groep').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i = 0; i < newField.length; i++) {
var hetId = newField[i].id
if (hetId)
newField[i].id = hetId + counter;
}
var insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields,insertHere);
counter++;
}
This works fine, all input get their unique id, but then i figured out that to catch all the input values it is better through getElementsByClassName
so then i made this to catch the values:
function getClassValue() {
var secAut = [];
var readyItems = document.getElementsByClassName('SA');
for(var i = 0; i < readyItems.length; i++){
secAut.push(readyItems[i].value);
document.write(3011+i+ " contains: " + secAut[i] + "<br />");
}
}
the html code is:
<body>
<div id="sa-groep" style="display: none">
<input class="SA" id="sa_" value=" " />
<select class="RC" id="rc_">
<option>Rating</option>
<option value="excellent">Excellent</option>
<option value="good">Good</option>
<option value="ok">OK</option>
</select><br /><br />
<input type="button" value="Remove review"
onclick="this.parentNode.parentNode.removeChild(this.parentNode)" /><br /><br />
</div>
<span id="writeroot"></span>
<input type="button" onclick="moreFields()" value="Give me more fields!" />
<input type="button" onclick="getClassValue()" value="Send form" />
</body>
But the only thing it show is : 3011 contains: So what am i doing wrong?

At first look I suggest you to change document.write (which replace all the text of your document) and instead use console.log("something..") or the property innerHTML in a specific div.
document.write, as I said before, replace all the the page with the string passed.

The problem beside the curly bracket (thanks #James) was the cloning of an hidden fields wich gave an empty result at the first spot in the arrays. To delete the first element of an array i had to delete that with shift() It works, probably it can be better but this is my solution:
function getClassValue() {
var secAut = []; // array met de namen van de secundaire auteurs
var readyItems = document.getElementsByClassName('auteur');
for(var i = 0; i < readyItems.length; i++){
secAut.push(readyItems[i].value);
}
var secAutMinus = secAut.shift(); // 1 element verwijdert uit array ivm dat de eerste input leeg is (display: none)
var relCode = []; // 2e array met de relatiecodes
var relCodeready = document.getElementsByClassName('relcode');
for(var i = 0; i < relCodeready.length; i++){
relCode.push(relCodeready[i].value);
}
var relCodeMinus = relCode.shift(); // 1st element verwijderen
for(var k= 0; k < secAut.length; k++){
console.log(3012+k+ ' contains: ' + secAut[k] + ' is ' + relCode[k] + '<br/>'); // uitlezing arrays minus het eerste lege element
}
}

In this function the loop needs to start from 1 because the 0th element is the hidden (cloned) one.
function getClassValue() {
var secAut = [];
var readyItems = document.getElementsByClassName('SA');
for (var i = 1; i < readyItems.length; i++) {
secAut.push(readyItems[i].value);
document.write(3011+i+ " contains: " + secAut[i - 1] + "<br />");
}
}
There are a couple of other problems, missing curly brace after the else in moreFields.
Here's a working fiddle

Shortening JavaScript Function

I must admit, I don't know much about JavaScript that is why my question might sound little bit silly.
But what I'm trying to do is grab values from selected by name radio groups.
It looks like this
function calc() {
var op1 = document.getElementsByName('form[radio1]');
var op2 = document.getElementsByName('form[radio2]');
var op3 = document.getElementsByName('form[radio3]');
var result = document.getElementById('result');
result.value = 0;
result.value = parseInt(result.value);
for (i = 0; i < op1.length; i++) {
if (op1[i].checked) result.value = parseInt(result.value) + parseInt(op1[i].value);
}
for (i = 0; i < op2.length; i++) {
if (op2.options[i].selected) result.value = parseInt(result.value) + parseInt(op2[i].value);
}
for (i = 0; i < op3.length; i++) {
if (op3.options[i].selected) result.value = parseInt(result.value) + parseInt(op3[i].value);
}
return false;
}
And this is my form. Im using rs form for joomla.
<form action="index.php" enctype="multipart/form-data" id="userForm" method="post">
<input name="form[radio1]" value="25" id="radio20" type="radio">
<label for="radio20">Description1</label>
<input name="form[radio1]" value="35" id="radio21" type="radio">
<label for="radio21">Description2</label>
<input name="form[radio2]" value="20" id="radio20" type="radio">
<label for="radio20">Description1</label>
<input name="form[radio2]" value="30" id="radio21" type="radio">
<label for="radio21">Description2</label>
<input type="hidden" value="0" id="result" name="form[result]">
<input type="submit" class="rsform-submit-button" onclick="calc()" id="submit" name="form[submit]" value="submit">
And everything would be OK, as the function is working. the only trouble is that I have about 80 radiograms.
Is there a way to shorten it?

Use arrays of objects (like all the radio buttons, for instance) and iterate over them. Start like this:
var opts = [],
numOpts = 80;
for (var i=0; i<numOpts, i++)
{
opts.push(document.getElementsByName('form[radio' + i + ']'));
}
Edit: let's have a go at the full function. The only thing I'm not 100% sure about is whether you mean to use opX[i].checked or opX.options[i].selected (since your code does different things for op1 and op2/3). Shouldn't be too hard to extrapolate if I've guessed wrong, though.
function calc()
{
var opts = [],
numOpts = 80,
value = 0,
result = document.getElementById('result'),
i, j, opt;
for (i=0; i<numOpts; i++)
{
opts.push(document.getElementsByName('form[radio' + i + ']'));
}
numOpts = opts.length;
for (i=0; i<numOpts; i++)
{
opt = opts[i];
for (j=0; j<opt.length; j++)
{
// or did you mean:
// if (opt.options[j].selected) ?
if (opt[j].checked)
{
value = value + parseInt(opt[j].value, 10);
}
}
}
result.value = value;
return false;
}

jQuery is a great library that's like using JavaScript on steroids. It is well worth learning and there are plenty of examples out in the wild.
You can write complex "selectors" quite like this:
$('input[name=form[radio1]]').attr('checked').each(function() {
result.value = $(this).attr('value')
})
(I'm not sure if it will accept a name like "form[radio1]" as valid, but give it a try.

Trying to take which radio button is selected and when is put it through code is returns undefined

Hello I'm new to JavaScript and trying to get a radio button to be registered on variable and then have that variable return another var but it just keeps being returned undefined. If I'm just doing something overtly wrong please tell me.
The radio buttons
Fighter:<input type="radio" id="fig" value="1"/>
Cleric:<input type="radio" id="cleric" value="2"/>
Sorcerer:<input type="radio" id="wiz" value="3"/>
my js
var lvl
var bab
if (document.getElementById('fig').checked) {
var cass = document.getElementById('fig').value;
if (cass == 1){
bab = 1;
}
else if (cass == 2){
bab = 2;
}
else{
bab = 3;
}
}
function show(){
var txtOutput = document.getElementById("txtOutput");
txtOutput.value = bab;
}
And my final place its supposed to be submitting.
<input id="txtOutput">
</input>

Add change event listener for all radio inputs and on change of the input, set the value of the textbox.
Document.querySelectorAll Returns a list of the elements within the document that match the specified group of selectors.
Try this:
var elems = document.querySelectorAll('[name="name"]');
Array.prototype.forEach.call(elems, function(elem) {
elem.addEventListener('change', function() {
document.getElementById("txtOutput").value = this.value;
});
});
Fighter:
<input type="radio" id="fig" value="1" name='name' />Cleric:
<input type="radio" id="cleric" value="2" name='name' />Sorcerer:
<input type="radio" id="wiz" value="3" name='name' />
<br>
<input id="txtOutput">

I think this will give you clarity.
var lvl = "";
var bab = "";
function getValues() {
if (document.getElementById('fig').checked) {
bab = "1 : " + document.getElementById('fig').value + "\n";
}
if (document.getElementById('cleric').checked) {
bab += "2 : " + document.getElementById('cleric').value + "\n";
}
if((document.getElementById('wiz').checked)){
bab += "3 : " + document.getElementById('wiz').value;
}
show();
}
function show(){
var txtOutput = document.getElementById("txtOutput");
txtOutput.innerHTML = bab;
}
/* or you can call it when you click on it */
function consoleIt(obj) {
console.log(obj.id + " : " + obj.value);
}
Fighter : <input type="radio" onclick="consoleIt(this);" id="fig" value="1"/>
Cleric : <input type="radio" onclick="consoleIt(this);" id="cleric" value="2"/>
Sorcerer : <input type="radio" onclick="consoleIt(this);" id="wiz" value="3"/>
<button onclick="getValues();">Get Radio Data</button>
<textarea id="txtOutput"> </textarea>