Hey Tom I coded this a earlier today and then had to hop off of my computer but it seems to me that you are doing a lot of extra code for yourself as well as calling onclick function in your view a million times. To make this work.
With forms in general it is not a good habit to have multiple forms on one page. As well with this type of option it might be easier to use select form elements instead of multiple choice.
In my example I mocked up a situation that uses both select elements and multiple choice input elements
As I mention before adding onclick functions to your HTML isn't a very good habit and should be avoided if possibly to keep your code as DRY(Don't Repeat Yourself) as possible. You may want to take a look at javascript EventListeners
I have commented my jsfiddle code to hopefully clear up any issues
here is a link to the code and the what you can do to help clean up you html. Whats cool about this is that is will allow you to add more multiple choice types or select inputs and will continue to work no matter and you only have to adjust your html to make it work
https://jsfiddle.net/kriscoulson/cvwspxo9/2/
var selects = document.getElementsByTagName('select'),
radios = document.querySelectorAll("input[type='radio']"),
selectButton = document.getElementById('select-button'),
choiceButton = document.getElementById('choice-button'),
answerBox = document.querySelector('.answer');
//This is the code to add and event listener to the get select values button
selectButton.addEventListener('click',function(event){
event.preventDefault(); // We prevent the default action when a button is clicked inside a form
var selectArr = [] // We create an empty array to push all of our values into
for(var i = 0; i < selects.length; i++){
// We then loop through of the selects and push the value of each select to our array
selectArr.push(selects[i].value)
}
//You can change this join method to concatnate the strings instead of having them seperated by commas
var string = arr.join(", ");
//The code below adds a new input with our values as string inside.
answerBox.innerHTML = "<input class='copy' value='"+string+"'/>";
answerBox.children[0].select(); //We can then select the the code to make it easy to copy to the clipboard
});
//This is the code to add and event listener to the get multichoice values button
choiceButton.addEventListener('click', function(ev){
ev.preventDefault(); // We prevent the default action when a button is clicked inside a form
choiceArr = [] // We create an empty array to push all of our values into
for(var i=0; i < radios.length; i++){ // We then loop through of the radios
if(radios[i].checked){ // If the radio at the index is checked
// we push that indexs value to our choice array
choiceArr.push(radios[i].value);
}
}
//You can change this join method to concatnate the strings instead of having them seperated by commas
var string = choiceArr.join(", ");
//The code below adds a new input with our values as string inside.
answerBox.innerHTML = "<input class='copy' value='"+string+"'/>";
answerBox.children[0].select();//We can then select the the code to make it easy to copy to the clipboard
});
