CODEWITHSUNDEEP
javascripthtmlradio-button
WaterFelon
WaterFelon

Reputation: 1

Change image with radio buttons in javascript

I have been looking for some time to find a way to have an image in a webpage change depending on what radio button in a form is selected, and every way that I've tried has been unsuccessful. I'm assuming that there must be a relatively easy way to do this, as it's not an incredibly complicated change to make, but I'm pretty new to javascript so I may just be doing something wrong. (This is my first time using StackOverflow, so I apologize if I'm asking a stupid question)

Here is my Javascript function

function  changeCardLogo() {
    switch(document.test.creditCard.value){
    case "Visa":
        document.getElementById("cardLogo").innerHTML= "<img height=75 src='Graphics/visaLogo.svg'>";
        break;
    case "MasterCard":
        document.getElememtById("cardLogo").innerHTML= "<img height=75 src='Graphics/masterCardLogo.png'>";
        break;
    case "PayPal":
        document.getElementById("cardLogo").innerHTML= "<img height=75 src='Graphics/paypalLogo.jpg'>";
        break;
    }
}

My radio buttons

        <p><b>Payment Method</b><br>
    <input type="radio" name="creditCard" value="Visa" checked onClick="changeCardLogo()"> Visa <br>
    <input type="radio" name="creditCard" value="MasterCard" onClick="changeCardLogo()"> MasterCard <br>
    <input type="radio" name="creditCard" value="PayPal" onClick="changeCardLogo()"> PayPal <br></p>

*Note: the radio buttons are within a form named "form1", but for some reason the code didn't display properly when I included the tags

And my images are changed within this div

<div id="cardLogo" height=75></div>

any help that anyone can provide would be much appreciated!

Upvotes: 0

Views: 2124

Answers (4)

dTobon
dTobon

Reputation: 208

There are many ways to get what you want, another one is: 

<html>
<script>
function changeImg(value){
    var img = document.getElementById("img");
    switch(value){
        case "mastercard": img.src="MasterCard.jpg";break;
        case "visa": img.src="Visa.jpg";break;
        case "paypal": img.src="PayPal.jpg";break;
        default: return false;
    }
}
</script>
<body>
    <img src="MasterCard.jpg" id="img"/>
    MasterCard: <input type="radio" name="card" value="mastercard" checked onclick="changeImg(this.value)"/>
    visa: <input type="radio" name="card" value="visa" onclick="changeImg(this.value)"/>
    paypal: <input type="radio" name="card" value="paypal" onclick="changeImg(this.value)" onclick="changeImg(this.value)"/>
</body>
</html>

Upvotes: 2

FMarcel
FMarcel

Reputation: 18

The element (and its value) "document.test.creditCard.value" can't be found.

You have to access it by the way Thibault Bach wrote, or you can pass the value of the radio button as a parameter in the function call, like this:

<p><b>Payment Method</b><br>
<input type="radio" name="creditCard" value="Visa" checked onClick="changeCardLogo(this.value)"> Visa <br>
<input type="radio" name="creditCard" value="MasterCard" onClick="changeCardLogo(this.value)"> MasterCard <br>
<input type="radio" name="creditCard" value="PayPal" onClick="changeCardLogo(this.value)"> PayPal <br></p>
<div id="cardLogo" height="75"></div>
<script>
    function  changeCardLogo(v) {

        var target = document.getElementById("cardLogo");

        switch(v){
            case "Visa":
                target.innerHTML= "<img height=75 src='Graphics/visaLogo.svg'>";
                break;
            case "MasterCard":
                target.innerHTML= "<img height=75 src='Graphics/mastercardLogo.png'>";
                break;
            case "PayPal":
                target.innerHTML= "<img height=75 src='Graphics/paypalLogo.jpg'>";
                break;
        }
    }
</script>

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206131

Le's say you have this form and you set some data-* attributes to your radio buttons representing the image name:

<form name="myForm">
  <p><b>Payment Method</b><br>
    <input data-img="visaLogo.svg" type="radio" name="creditCard" value="Visa" checked> Visa <br>
    <input data-img="masterCardLogo.png" type="radio" name="creditCard" value="MasterCard"> MasterCard <br>
    <input data-img="paypalLogo.jpg" type="radio" name="creditCard" value="PayPal"> PayPal <br></p>
  <div id="cardLogo" height=75></div>
</form>

than you might use something like: http://jsfiddle.net/axnrtosa/2/

var cards = document.myForm.creditCard;
var logo  = document.getElementById("cardLogo");
var event = new Event('change');

for(var i=0; i<cards.length; i++)
    cards[i].addEventListener('change', changeCardLogo, false);

cards[0].dispatchEvent(event); // Trigger change

function changeCardLogo() {
  var img = document.createElement('img');
  img.src= "Graphics/"+ this.dataset.img;
  logo.innerHTML = "";        // Remove old image
  logo.appendChild( img );    // Append new image
}

Upvotes: 2

Thibault Bach
Thibault Bach

Reputation: 556

You have some errors. First , to get form data value, you need use:

document.forms["form1"].creditCard.value

instead of ( Why call "test" propertie when that your form name is form1 ? )

document.test.creditCard.value

Secondly, to get node by ID, correct function name is getElementById ( look your MasterCard case ).

Upvotes: 2

Related Questions