CODEWITHSUNDEEP
javascripthtml
user2385273
user2385273

Reputation: 45

Using radio buttons to change an image

So i have some radio buttons:

        <input type="radio" name="option" value="GDP" id="GDP_option" checked>GDP
        <input type="radio" name="option" value="Population" id="Population_option" >Population
        <input type="radio" name="option" value="None" id="None_option" > None

I also have a submit button:

 <input type="submit" name="submit" id="submit" onsubmit="changeFormula()">

and an image:

 <img src="formula_gdp.gif" name="formula" id="formula">

When the submit button is pressed i want to change the image src to something else depending on the radio button that is checked. This is what i've tried:

 function changeFormula(){
    var radio = document.getElementsByName('option');
    var formula = document.getElementsByName('formula')
    if (radio[1].checked){
        formula.src = "formula_gdp.gif";
    }
    if (radio[2].checked){
        formula.src = "formula_pop.gif";
    }
    if (radio[3].checked){
        formula.src = "formula_none.gif";
    }
}

Upvotes: 0

Views: 13074

Answers (8)

ssaltman
ssaltman

Reputation: 3713

I think folks love jquery, but I needed something lightweight.

Here it is:

<script>
    function changeImage(imgName)
  {
     image = document.getElementById('theimage');
     image.src = imgName;
  }
</script>

And here's the radio buttons html (slightly modified for privacy)

<input type="radio" name="reader" value="reader1"  onClick="changeImage('image0.jpg');">
<br>
<input type="radio" name="reader" value="reader1"  onClick="changeImage('image1.jpg');">
<br>
<input type="radio" name="reader" value="reader1"  onClick="changeImage('image2.jpg');">

Here's the image:

<img src="image0.jpg" name="theimage" id="theimage">

This worked for me. Click the radio button, the image changes.

Upvotes: 0

Md. Maruf Hossain
Md. Maruf Hossain

Reputation: 922

You can Do this by using Jquery as like following ..

<script type='text/javascript'>
    $(document).ready(function(){
        $("input:radio[name=option]").click(function() {
            var value = $(this).val();
            var image_name;
            if(value == 'GDP'){
                image_name = "formula_gdp.gif";
            }else{
                if(value == 'Population'){
                    image_name = "formula_pop.gif";
                }else{
                    image_name = "formula_none.gif";
                }
            }
             $('#formula').attr('src', image_name);
        });
    });
</script>

Only you will have needed those three radio button filed and Image tag .. Not needed Submit button...

<input type="radio" name="option" value="GDP" id="GDP_option" checked>GDP
<input type="radio" name="option" value="Population" id="Population_option" >Population
<input type="radio" name="option" value="None" id="None_option" > None

<img src="formula_gdp.gif" name="formula" id="formula">

Hopefully it will be helpful for you.. If you have needed another things... then you can inform me ....

Upvotes: 2

eidsonator
eidsonator

Reputation: 1325

Change the 'submit' to a button to stop the page from reloading

 <input type="button" value ="Click Me" name="submit" id="submit" onclick="changeFormula()" />

And use this for your function

function changeFormula(){
    var formula = document.getElementById('formula')
    if(document.getElementById('GDP_option').checked)
        formula.src = "formula_gdp.gif";
    if(document.getElementById('Population_option').checked)
        formula.src = "formula_gdp.gif";
    if(document.getElementById('None_option').checked)
        formula.src = "formula_none.gif";
}

working fiddle: http://jsfiddle.net/UB2ka/ There is no image, but you can see the src change in firebug

Upvotes: 0

Iesus Sonesson
Iesus Sonesson

Reputation: 854

<input type="radio" name="option" value="GDP" id="GDP_option" checked>GDP
<input type="radio" name="option" value="Population" id="Population_option">Population
<input type="radio" name="option" value="None" id="None_option">None
<input type="submit" name="submit" id="submit" onclick="changeFormula()">
<img src="formula_gdp.gif" name="formula" id="formula">

    <script type="text/javascript">
        function changeFormula() {
     var radio = document.getElementsByName('option');
     var formula = document.getElementById('formula')
     if (radio[0].checked) {
         formula.src = "formula_gdp.gif";
         alert(formula.src);
     }
     if (radio[1].checked) {
         formula.src = "formula_pop.gif";
         alert(formula.src);
     }
     if (radio[2].checked) {
         formula.src = "formula_none.gif";
         alert(formula.src);
     }
 }
    </script>

Upvotes: 0

William Buttlicker
William Buttlicker

Reputation: 6000

Add an event <input type="submit" name="submit" id="submit" onsubmit="changeFormula(e)">

function changeFormula(e){
    e.stopPropagation();  
    var radio = document.getElementsByName('option');
    var formula = document.getElementsByName('formula')
    if (radio[1].checked){
        formula.src = "formula_gdp.gif";
    }
    if (radio[2].checked){
        formula.src = "formula_pop.gif";
    }
    if (radio[3].checked){
        formula.src = "formula_none.gif";
    }
}

and if u dont mind using Jquery:

$(document).ready(function() {
    $('#submit').click(function(e) {
        e.preventDefault();
        if($('#GDP_option').is(':checked')) {
 $('#formula').attr('src','formula_gdp.gif') 
}
         if($('#Population_option').is(':checked')) { $('#formula').attr('src','formula_pop.gif') 
}
         if($('#None_option').is(':checked')) { 
$('#formula').attr('src','formula_none.gif') 
}
    })
})

Upvotes: 0

Dharmesh Patel
Dharmesh Patel

Reputation: 1891

Two changes require:

1) Change var formula = document.getElementsByName('formula') to var formula = document.getElementById('formula');

2) Index of radio starts with 0 not with 1, so radio[1],radio[2],radio[3] should be radio[0],radio[1],radio[2]

Hope that helps.

Upvotes: 0

Rahul11
Rahul11

Reputation: 264

use if(document.getElementById('element_id').checked) for better result.

Upvotes: 0

Matheno
Matheno

Reputation: 4142

Try this

$(document).ready(function() { 
        $("input:radio[name=vf]").change(function() { //name = button group name
            if (this.value == "0") {
                $("#vf").attr( //image file name
                    'src', '/images/onestep/lime/vf.jpg' //image path
                );
            }
            else if (this.value == "8") {
                $("#vf").attr( //image file name
                    'src', '/images/onestep/vf.jpg' //image path
                );
            }
            else {
                $("#vf").attr( //image file name
                    'src', '/images/onestep/vf.jpg'    //image path             
                );
            }
        });

Upvotes: 0

Related Questions