I'm having a rough time coding a form that uses radio buttons to select a new font color and border for H2 tags on a webpage. I've pasted my code below — any tips?
Thanks!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form >
<label>Green<input type="radio" name="rec" value="green"></label>
<label>Blue<input type="radio" name="rec" value="blue"></label>
<label>Red<input type="radio" name="rec" value="red"></label>
<label>Black<input type="radio" name="rec" value="black"></label>
<label>Yellow<input type="radio" name="rec" value="yellow"></label>
<h2>Choose Your H2 Border</h2>
<label>Solid<input id="input2" type="radio" name="rec2" value="solid"></label>
<label>Dotted<input id="input2" type="radio" name="rec2" value="dotted"></label>
<label>Dashed<input id="input2" type="radio" name="rec2" value="dashed"></label><br/>
<input type="submit" value="submit" onClick="
$(document).ready(function()
{
var fontColor = $('input').attr('value')
var borderType = $('#input2').attr('value')
$('h2').ready(function() {
$(this).css('color', fontColor); //font color
$(this).css('border-type', borderType); //border color
});">
</div>