如何根据表单选择更改图像？

Question

我正在处理一个表单，其中用户必须在两个单独的表单中选择一个选项才能选择最适合他的计划。 两种形式各有3个选项。 我正在尝试使用Javascript，以便当用户在每个表单上选择3个选项之一时，总变化为5。根据这两个表单的选择，显示总计的图像将发生变化。 我知道可以用一个简单的calc函数做到这一点，只需更改文本即可，但是我的客户希望它更改自身的图像而不是文本。

到目前为止，这是我做过的JavaScript：

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;
        }
    }

我还包括以下两个HTML表单：

<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>
        <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>

当用户在表单上进行更改时，所选图像需要更改：

更新：我一直在研究这个代码，我让它在所有流行的浏览器上工作，但只有一个 - Firefox。 当我运行JavaScript代码时，出现错误“未定义priceTotal”。 我正在下载更新的代码和我得到的错误。 感谢帮助人和gal！

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;
        }

    }

Answer 1

问题在于如何从单选按钮获取值。 您现在拥有的代码将始终返回相同的结果（即两个无线电组的opt1）。 要获取所选值，您需要编写一个简单的JavaScript函数，如下所示：

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

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

  return "";
}

以下是一些建议：

1. 为每个表单提供一个ID。
2. 编写一个简单的函数来获取单选按钮组值（如上例所示）。
3. 从您当前的priceChange（）函数中调用该函数。

以下是您更新的JavaScript的外观：

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;
    }
}

请注意这两行：

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

这些行调用该函数，该函数将从单选按钮组中获取选定的值（假设您为表单提供了“ planHostForm”和“ emailForm” ID）。

还有一些其他更改，例如声明src路径的变量和要更改的图像; 您的代码将更易于阅读和维护。

这是更新的HTML（添加了表单ID并更新了单选按钮ID）：

<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>

Answer 2

要修复最新错误“priceTotal.src未定义”，您必须更改代码以引用正确的变量。

例如，你有：

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

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

我想你想改变图像对象的src属性。 如果是这样，那么您将需要更新您的代码，如下所示：

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

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

请注意，需要在条件块之前的某处声明hostImage和emailImage 。 我不确定您的HTML现在是什么样，但是您可以使用类似于priceTotalImg方式声明这些变量。 例如：

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

Answer 3

你确定你正在触发priceChange()来运行吗？ 我不确定如何在原始JS中观察选择元素的值是否发生变化，但是如果您使用的是jQuery，则应在输入的“ change”事件上放置一个侦听器，并将其设置为运行您的函数，如下所示：

$（ '输入[名称= “宿主”]，输入[名称= “电子邮件”]'）变化（函数（）{priceChange（）;}）;

Answer 4

好的，我终于找到了使它失败的错误。 我没有将值传递回表单，因此为了简单起见，我完全删除了变量，然后将值直接传递回了表单。 它的工作就像一个魅力。 谢谢你的帮助。 我想我过度复杂了。