0

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>

2 Answers2

0

The ready method wont work on inline elements. You can only apply it to the Document (since that contains the entire DOM to be loaded). Just omit the h2 ready wrapper and stick its contents inside the doc ready function.

$(document).ready(function(){
   var fontColor = $('input').attr('value'),
   borderType = $('#input2').attr('value');
   $(h2).css('color', fontColor);     //font color
   $(h2).css('border-type', borderType); //border color
});

Note: You will need a separate click handler for the radio buttons in order to change the color after the initial load.

Example (you will need to modify this to match your element ID/Class):

$('#yourRadioButtonElement').click(function() {
   if($('#yourRadioButtonElement').is(':checked')) {  
       fontColor = $(this).attr('value');
       borderType = $(this).attr('value');
       $(h2).css('color', fontColor);     //font color
       $(h2).css('border-type', borderType); //border color
   }
});
Korgrue
  • 3,430
  • 1
  • 13
  • 20
0

As @Korgrue mentioned in his answer, once the document is ready, then that includes all page elements like the h2, so calling $('h2').ready(... doesn't make any sense.

border-type isn't a valid CSS style for an h2, you simply want border.

see this answer for how to properly select radio values.

Also you won't be able to view your style changes because you're submitting the form on the button click, so it just refreshes the page. One way to handle that is by adding onsubmit="return false" to the form.

Lastly, instead of jamming so much into the onclick attribute, you should just use a function because it looks more readable.

function change_css(){

  $(document).ready(function()
  {
    var fontColor = $('input[name=rec]:checked').attr('value');
    var borderType = $('input[name=rec2]:checked').attr('value');


    $('h2').css('color', fontColor);     //font color
    $('h2').css('border', borderType); //border color

  })
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form onsubmit="return false">
<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="change_css()">
Community
  • 1
  • 1
Jeff Puckett
  • 37,464
  • 17
  • 118
  • 167