JSFiddle - React, Tailwind, and code Playground

by Kris Coulson

HTML

<div class="answer"></div>
<form>
    <h4> Please Fill Out Form </h4>
    <select>
        <option value="Weekly Comp">Weekly Comp</option>
        <option value="Social Rehab">Social Rehab</option>
        <option value="Electric">Electric</option>
        <option value="TI">TI</option>
        <option value="SC">SC</option>
        <option value="Reg/Cover Assessment">Reg/Cover Assessment</option>
    </select>
        
    <select>
        <option value="Progress">Progress</option>
        <option value="Process">Process</option>
        <option value="Payments/Reimbursments">Payments/Reimbursements</option>
        <option value="Decision">Decision</option>
        <option value="Other">Other</option>
    </select>
        
    <select>
        <option value="OnlyWantToTalk">Only want to talk to case owner</option>
        <option value="Transfer">Transefer To Voicemail</option>
        <option value="NoEOS">No EOS entry Requires</option>
        <option value="N/A">N/A</option>
    </select>
    <button id='select-button'>Get Values For Selects</button>
    
    <div class="radios">
        <h4> Question 1 </h4>
        <label><input type="radio" name="stuff" value="Only want to talk"/>Only want to talk to case </label>
        <label><input type="radio" name="stuff" value="Transfer"/>Transefer To Voicemail</label>
        <label><input type="radio" name="stuff" value="Blahhh"/>Blahh</label>
        <label><input type="radio" name="stuff" value="N/A"/>N/A</label>
    </div>
    
    <div class="radios">
        <h4> Question 2 </h4>
        <label><input type="radio" name="stuff2" value="This and That"/>This and That </label>
        <label><input type="radio" name="stuff2" value="What the What"/>What the What</label>
        <label><input type="radio" name="stuff2" value="Take 2"/>Take 2</label>
    </div>
    
    <button id="choice-button"> Get Multichoice Values </button>
</form>

CSS

.answer{
    margin-top: 20px;
    font-size: 16px;
    font-weight: 300;
    text-align: center;
}
.copy{
   width: 100%;
   border-radius: 4px;
   height: 40px;
   font-size: 20px;
   border: 1px solid lightgray;
   outline: 0;
   padding-left: 10px;
   font-weight: 300;
}
::selection {
  background-color: black;
  color: white;
}
h4 {
    margin: 10px 0px 0px 0px;
}

select {
    width:100%;
    height: 50px;
    margin-bottom:10px;
}
.radios {
    border: 1px solid lightgray;
    border-radius: 4px;
    padding: 10px;
    margin:10px 0px;
}
label {
    display: block;
    padding-top: 10px;
}

JavaScript

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 = selectArr.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...