How can I change an image based on a form selection?

I am working on a form where the user has to choose an option in two separate forms to pick a plan that works best for him. Both forms have 3 options each. I am trying to use Javascript so that when the user chooses one of the 3 options on each form the total changes by 5. Depending of the choices on both of the forms, an image displaying the grand total will change. I know that one can do this with a simple calc function and just change the text but my customer want's it changing the image it self instead of the text.

This is the JavaScript that I have done so far:

function priceChange()
    {
        var hostOpt = document.getElementById("host").value;
        var emailOpt = document.getElementById("email").value;
        var priceImg = new Array()
        priceImg[0] = new Image();
        priceImg[0].src = "images/total1.png";
        priceImg[1] = new Image();
        priceImg[1].src = "images/total2.png";
        priceImg[2] = new Image();
        priceImg[2].src = "images/total3.png";
        priceImg[3] = new Image();
        priceImg[3].src = "images/total4.png";
        priceImg[4] = new Image();
        priceImg[4].src = "images/total5.png";

        if (hostOpt == "opt1" && emailOpt == "opt1")
        {
            document.getElementById("priceTotal").src = priceImg[0].src;
        }
        else if (hostOpt == "opt2" && emailOpt == "opt1")
        {
            document.getElementById("priceTotal").src = priceImg[1].src;
        }
        else if (hostOpt == "opt3" && emailOpt == "opt1")
        {
            document.getElementById("priceTotal").src = priceImg[2].src;
        }
        else if (hostOpt == "opt1" && emailOpt == "opt2")
        {
            document.getElementById("priceTotal").src = priceImg[1].src;
        }
        else if (hostOpt == "opt2" && emailOpt == "opt2")
        {
            document.getElementById("priceTotal").src = priceImg[2].src;
        }
        else if (hostOpt == "opt3" && emailOpt == "opt2")
        {
            document.getElementById("priceTotal").src = priceImg[3].src;
        }
        else if (hostOpt == "opt1" && emailOpt == "opt3")
        {
            document.getElementById("priceTotal").src = priceImg[2].src;
        }
        else if (hostOpt == "opt2" && emailOpt == "opt3")
        {
            document.getElementById("priceTotal").src = priceImg[3].src;
        }
        else if (hostOpt == "opt3" && emailOpt == "opt3")
        {
            document.getElementById("priceTotal").src = priceImg[4].src;
        }
    }

I am also including the two HTML forms below:

<div id="planHost" class="planOptions">
            <h5>Hosting options:</h5>
            <br/>
            <form>
                <p><input type="radio" name="host" value="opt1" id="host"/>Base</p>
                <p><input type="radio" name="host" value="opt2" id="host"/>Premium (+$5)</p>
                <p><input type="radio" name="host" value="opt3" id="host"/>Ultra (+$10)</p>
                <br/><br/>
                <input type="button" id="changeHost" name="changeHost" value="Submit" onclick="priceChange()">
            </form>
        </div>
 开发者_JS百科       <div id="planEmail" class="planOptions">
            <h5>Email options:</h5>
            <br/>
            <form>
                <p><input type="radio" name="email" value="opt1" id="email"/>Base</p>
                <p><input type="radio" name="email" value="opt2" id="email"/>Premium (+$5)</p>
                <p><input type="radio" name="email" value="opt3" id="email"/>Ultra (+$10)</p>
                <br/><br/>
                <input type="button" id="changeHost" name="changeHost" value="Submit" onclick="priceChange()">
            </form>
        </div>

When the user makes a change on the form the selected image needs to change:

UPDATE: I have been working on this code and I got it working on all of the popular browsers but one -- Firefox. When I run the javascript code I get the error "priceTotal is not defined." I am placing the updated code and the error I get below. Thanks for the help guy's and gal's!

function priceChange() /*Changes the plan price and the plan details*/
    {



        for (var i=0; i<document.emailChange.email.length; i++)
        {
            if (document.emailChange.email[i].checked)
            {
                emailOpt = document.emailChange.email[i].value;
            }
        }

        for (var i=0; i<document.hostingChange.host.length; i++)
        {
            if (document.hostingChange.host[i].checked)
            {
                hostOpt = document.hostingChange.host[i].value;
            }
        }


        <!--alert("Your new total cost per month");-->
        var priceImgSrc1 = "images/total1.png";
        var priceImgSrc2 = "images/total2.png";
        var priceImgSrc3 = "images/total3.png";
        var priceImgSrc4 = "images/total4.png";
        var priceImgSrc5 = "images/total5.png";
        var emailImgSrc1 = "images/email1.png";
        var emailImgSrc2 = "images/email2.png";
        var emailImgSrc3 = "images/email3.png";
        var hostImgSrc1 = "images/host1.png";
        var hostImgSrc2 = "images/host2.png";
        var hostImgSrc3 = "images/host3.png";


        var priceTotalImg = document.getElementById("priceTotal").src;

        if (hostOpt == "Hopt1" && emailOpt == "Eopt1") {
          var priceTotal.src = priceImgSrc1;
          var hostImage.src = hostImgSrc1;
          var emailImage.src = emailImgSrc1;
        }
        else if (hostOpt == "Hopt2" && emailOpt == "Eopt1") {
          var priceTotal.src = priceImgSrc2;
          var hostImage.src = hostImgSrc2;
          var emailImage.src = emailImgSrc1;
        }
        else if (hostOpt == "Hopt3" && emailOpt == "Eopt1") {
          var priceTotal.src = priceImgSrc3;
          var hostImage.src = hostImgSrc3;
          var emailImage.src = emailImgSrc1;
        }
        else if (hostOpt == "Hopt1" && emailOpt == "Eopt2") {
          var priceTotal.src = priceImgSrc2;
          var hostImage.src = hostImgSrc1;
          var emailImage.src = emailImgSrc2;
        }
        else if (hostOpt == "Hopt2" && emailOpt == "Eopt2") {
          var priceTotal.src = priceImgSrc3;
          var hostImage.src = hostImgSrc2;
          var emailImage.src = emailImgSrc2;
        }
        else if (hostOpt == "Hopt3" && emailOpt == "Eopt2") {
          var priceTotal.src = priceImgSrc4;
          var hostImage.src = hostImgSrc3;
          var emailImage.src = emailImgSrc2;
        }
        else if (hostOpt == "Hopt1" && emailOpt == "Eopt3") {
          var priceTotal.src = priceImgSrc3;
          var hostImage.src = hostImgSrc1;
          var emailImage.src = emailImgSrc3;
        }
        else if (hostOpt == "Hopt2" && emailOpt == "Eopt3") {
          var priceTotal.src = priceImgSrc4;
          var hostImage.src = hostImgSrc2;
          var emailImage.src = emailImgSrc3;  
        }
        else if (hostOpt == "Hopt3" && emailOpt == "Eopt3") {
          var priceTotal.src = priceImgSrc5;
          var hostImage.src = hostImgSrc3;
          var emailImage.src = emailImgSrc3;
        }

    }

The problem is in how you are getting the values from your radio buttons. The code you have now will always return the same result (i.e., opt1 for both radio groups). To get the selected values, you'll need to write a simple JavaScript function like this:

function getSelectedOption(radiogroup) {
  if (!radiogroup) return "";

  for(var i = 0; i < radiogroup.length; i++) {
    if(radiogroup[i].checked) return radiogroup[i].value;
  }

  return "";
}

Here are some suggestions:

1. Give each form an ID.
2. Write a simple function to get the radio button group values (like the above example).
3. Call that function from within your current priceChange() function.

Here's what your updated JavaScript would look like:

function getSelectedOption(radiogroup) {
  if (!radiogroup) return "";


  for(var i = 0; i < radiogroup.length; i++) {
    if(radiogroup[i].checked) {
      return radiogroup[i].value;
    }
  }

  return "";
}

function priceChange() {
    var hostOpt = getSelectedOption(document.getElementById('planHostForm').elements['host']);
    var emailOpt = getSelectedOption(document.getElementById('emailForm').elements['email']);

    var priceImgSrc1 = "images/total1.png";
    var priceImgSrc2 = "images/total2.png";
    var priceImgSrc3 = "images/total3.png";
    var priceImgSrc4 = "images/total4.png";
    var priceImgSrc5 = "images/total5.png";

    var priceTotalImg = document.getElementById("priceTotal");

    if (hostOpt == "opt1" && emailOpt == "opt1") {
      priceTotalImg.src = priceImgSrc1;
    }
    else if (hostOpt == "opt2" && emailOpt == "opt1") {
      priceTotalImg.src = priceImgSrc2;
    }
    else if (hostOpt == "opt3" && emailOpt == "opt1") {
      priceTotalImg.src = priceImgSrc3;
    }
    else if (hostOpt == "opt1" && emailOpt == "opt2") {
      priceTotalImg.src = priceImgSrc2;
    }
    else if (hostOpt == "opt2" && emailOpt == "opt2") {
      priceTotalImg.src = priceImgSrc3;
    }
    else if (hostOpt == "opt3" && emailOpt == "opt2") {
      priceTotalImg.src = priceImgSrc4;
    }
    else if (hostOpt == "opt1" && emailOpt == "opt3") {
      priceTotalImg.src = priceImgSrc3;
    }
    else if (hostOpt == "opt2" && emailOpt == "opt3") {
      priceTotalImg.src = priceImgSrc4;
    }
    else if (hostOpt == "opt3" && emailOpt == "opt3") {
      priceTotalImg.src = priceImgSrc5;
    }
}

Note these two lines:

var hostOpt = getSelectedOption(document.getElementById('planHostForm').elements['host']);
var emailOpt = getSelectedOption(document.getElementById('emailForm').elements['email']);

These lines call the function that will get the selected value from the radio button groups (assuming that you give your forms the 'planHostForm' and 'emailForm' IDs).

There are also a couple of other changes, such as declaring variables for the src paths and image that you wish to change; your code will be easier to read and maintain.

Here's the updated HTML (with form IDs added and radio button IDs updated):

<div id="planHost" class="planOptions">
            <h5>Hosting options:</h5>
            <br/>
            <form id="planHostForm">
                <p><input type="radio" name="host" value="opt1" id="host1"/>Base</p>
                <p><input type="radio" name="host" value="opt2" id="host2"/>Premium (+$5)</p>
                <p><input type="radio" name="host" value="opt3" id="host3"/>Ultra (+$10)</p>
                <br/><br/>
                <input type="button" id="changeHost" name="changeHost" value="Submit" onclick="priceChange()">
            </form>
        </div>

  <div id="planEmail" class="planOptions">
            <h5>Email options:</h5>
            <br/>
            <form id="emailForm">
                <p><input type="radio" name="email" value="opt1" id="email1"/>Base</p>
                <p><input type="radio" name="email" value="opt2" id="email2"/>Premium (+$5)</p>
                <p><input type="radio" name="email" value="opt3" id="email3"/>Ultra (+$10)</p>
                <br/><br/>
                <input type="button" id="changeHost" name="changeHost" value="Submit" onclick="priceChange()">
            </form>
        </div>

To fix your latest error "priceTotal.src is not defined" you'll have to change your code to reference the correct variables.

For example, you have:

   var priceTotalImg = document.getElementById("priceTotal").src;

    if (hostOpt == "Hopt1" && emailOpt == "Eopt1") {
      var priceTotal.src = priceImgSrc1;
      var hostImage.src = hostImgSrc1;
      var emailImage.src = emailImgSrc1;
    }

I think you wanted to change the src attribute for the image object. If so, then you will need to update your code like the following:

   var priceTotalImg = document.getElementById("priceTotal").src;

    if (hostOpt == "Hopt1" && emailOpt == "Eopt1") {
      priceTotalImg.src = priceImgSrc1;
      hostImage.src = hostImgSrc1;
      emailImage.src = emailImgSrc1;
    }

Note that hostImage and emailImage will need to be declared somewhere before the conditional blocks. I'm not sure what your HTML looks like now, but you would declare those variables in a similar way to priceTotalImg. For example:

var hostImage = document.getElementById("hostImage").src;
var emailImage = document.getElementById("emailImage").src;

Are you sure you're triggering priceChange() to run? I'm not sure how to watch for a select element's value to change in raw JS, but if you were using jQuery, you'd put a listener on the inputs' "change" event and set it to run your function, like this:

$('input[name="host"],input[name="email"]').change(function(){priceChange();});

Ok, I finally found the bug that was making it fail. I was not passing the value back to the form, so to keep things simple I removed the variable completely and passed the value directly back to the form. It's working like a charm. Thank you guy's for all your help. I guess I over complicated myself.