Question

I have a bit of HTML code that I would like to change based on which of 3 radio buttons a user clicks.

Here are the radio buttons:

<input type="radio" name="awardSwitch" value="silver" />
<input type="radio" name="awardSwitch" value="gold" />
<input type="radio" name="awardSwitch" value="platinum" />

The HTML I want to update is below:

<div id="BestCourseforyourGolfGame">
  <div class="floatleft">
    <textarea name="code" cols="50" rows="6">
    <a href="http://foo.com/best/best-of/#BestCourseforyourGolfGame" target="_blank">
    <img src="http://foo.com/assets/awards/2010/best-of-2010-silver.jpg" alt="Best Course for your Golf Game" border="0" width="151" height="200" /></a>
    </textarea>
  </div>
  <div class="floatright">
    <img src="http://foo.com/assets/awards/2010/best-of-2010-silver.jpg" alt="Best Course for your Golf Game" border="0" width="151" height="200" />
  </div>
</div>

Basically what I want to change, text wise in the HTML, is the last bit of the image name. In this instance, it’s “-silver” but I’d like that to update to “-gold” or “-platinum” depending on the radio button selected.

Thanks in advance!

Answer 1

You specify jQuery, so here’s code that addresses both the textarea and the display div:

jQuery(document).ready(function(){
    jQuery('input[name=awardSwitch]:radio').click(function(){
        var newsrc = 'http://foo.com/assets/awards/2010/best-of-2010-'+jQuery(this).val()+'.jpg'
        var newhtml = '<a href="http://foo.com/best/best-of/#BestCourseforyourGolfGame" target="_blank">';
        newhtml += '<img src="'+newsrc+'.jpg"';
        newhtml += ' alt="Best Course for your Golf Game" border="0" width="151" height="200" /></a>';
        jQuery('#BestCourseforyourGolfGame textarea[name="code"]').val(newhtml);
        jQuery('#BestCourseforyourGolfGame .floatright img').attr('src', newsrc);
    });
});