Question

I need to have the user make a selection using radio button and the text from that selection needs to appear in a text box later in the page:
HTML:

            <div id="centercontainer">
            <h1>competition</h1>
            <form id="devices">
                <fieldset>
                <div id="bf">
                    <img src="images/_black_fuchsia.jpg" width="169" height="266" alt=" Black Fuchsia">
                    <p><label> <input class="selected-bf" type=radio name=Lumia> Fuchsia on Black</label></p>
                </div>
                <div id="bw">
                    <img src="images/_black_white.jpg" width="169" height="266" alt=" Black White">
                    <p><label> <input class="selected-bw" type=radio name=Lumia> White on Black</label></p>
                </div>

                <div id="by">
                    <img src="images/_black_yellow.jpg" width="169" height="266" alt=" Black Yellow">
                    <p><label> <input class="selected-by" type=radio name=Lumia> Yellow on Black</label></p>
                </div>
                <div id="wb">
                    <img src="images/_white_black.jpg" width="169" height="266" alt=" White Black">
                    <p><label> <input class="selected-wb" type=radio name=Lumia> Black on White</label></p>
                </div>
                <div id="wc">
                    <img src="images/_white_cyan.jpg" width="169" height="266" alt=" White Cyan">
                    <p><label> <input class="selected-wc" type=radio name=Lumia> Cyan on White</label></p>
                </div>
                <div id="wf">
                    <img src="images/_white_fuchsia.jpg" width="169" height="266" alt=" White Fuchsia">
                    <p><label> <input class="selected-wf" type=radio name=Lumia> Fuchsia on White</label></p>
                </div>
                </fieldset>
            </form>
        </div>
        <div id="footer">
            <button class="choose">Choose</button>
        </div>

Javascript:

    // Style chooser    
$('#devices div').toggle(function() { // first time
    $(this).find('input:radio').attr('checked', true);
}, function() { // second time
    $(this).find('input:radio').attr('checked', false);
});

$('.choose').click(function() {
   if($('input:radio').is(':checked')) { alert("it's checked"); }
});

Once the user has made their selection, can the text from that selection be fed into a text field at the bottom ?

Answer 1

Try this for your bind to the button

$('.choose').click(function() 
{    
     $('#output').text($('input:radio:checked').closest('label').text());
}); 

Assuming you add a div with id output i.e.

<div id="output"></div>

Also assumes that you’ve only got one set of radio buttons on the page. Otherwise you will need qualify the input select e.g. with a class or parent element