Form State Number

HTML

<h1>Product Configurator</h1>
<form>
    <p>
            <label for="element_3">1: Size</label> <span><input id="element_3_1" name="element_3" class="element radio" type="radio" value="1"> <label class="choice" for="element_3_1">1m</label> <input id="element_3_2" name="element_3" class="element radio" type="radio" value="2"> <label class="choice" for="element_3_2">5m</label> <input id="element_3_3" name="element_3" class="element radio" type="radio" value="3"> <label class="choice" for="element_3_3">10m</label></span>
    </p>
        <p>
            <label for="element_1">2: Color</label> <span><input id="element_1_1" name="element_1" class="element radio" type="radio" value="1"> <label class="choice" for="element_1_1">Green</label> <input id="element_1_2" name="element_1" class="element radio" type="radio" value="2"> <label class="choice" for="element_1_2">Blue</label> <input id="element_1_3" name="element_1" class="element radio" type="radio" value="3"> <label class="choice" for="element_1_3">Black</label></span>
        </p>
        <p>
            <label for="element_2">3: Extra</label> <span><input id="element_2_1" name="element_2_1" class="element checkbox" type="checkbox" value="1"> <label class="choice" for="element_2_1">Special 1</label> <input id="element_2_2" name="element_2_2" class="element checkbox" type="checkbox" value="1"> <label class="choice" for="element_2_2">Special 2</label></span>
        </p>
        <p><input id="saveForm" class="button_text" type="button" name="submit" value="Submit"></p>

</form>
<p>Configuration Number: <input type="text"></p>

JavaScript

$('#saveForm').click(function() {
  
var configuration='Clien_ID-' + $('input[type=radio]:checked,input[type=checkbox]:checked').map(function() {
  return $(this).val();
}).get().join('-');
                     
console.log($('input[type=radio]:checked,input[type=checkbox]:checked'));
    
    
alert(configuration);
});