Wie kann ich ein Bild basierend auf einer Formularauswahl ändern?

Question

Ich arbeite an einem Formular, wo der Benutzer eine Option in zwei verschiedenen Formen auswählen muss, um einen Plan auszuwählen, der am besten für ihn funktioniert. Beide Formulare haben jeweils 3 Optionen. Ich versuche, Javascript zu verwenden, so dass, wenn der Benutzer eine der 3 Optionen auf jedem Formular auswählt, die Summe sich um 5 ändert. Abhängig von der Auswahl auf beiden Formen ändert sich ein Bild, das die Gesamtsumme anzeigt. Ich weiß, dass man dies mit einer einfachen Berechnungsfunktion tun kann und nur den Text ändern kann, aber mein Kunde möchte, dass er das Bild selbst anstelle des Textes ändert.

Dies ist das JavaScript, das ich bisher getan haben:

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

ich mit den beiden HTML bin auch Formen unter:

der ausgewählten auf dem Formular

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

Wenn der Benutzer eine Änderung vornimmt Bild muss sich ändern:

UPDATE: Ich habe an diesem Code gearbeitet, und ich habe es auf allen gängigen Browsern, aber einem - Firefox. Wenn ich den JavaScript-Code ausführe, bekomme ich den Fehler "priceTotal ist nicht definiert." Ich platziere den aktualisierten Code und den Fehler, den ich unten bekomme. Danke für die Hilfe Guys und Gallonen!

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

Das Problem besteht darin, wie Sie die Werte von Ihren Optionsfeldern erhalten. Der Code, den Sie jetzt haben, gibt immer das gleiche Ergebnis zurück (d. H. Opt1 für beide Funkgruppen). Um die ausgewählten Werte zu erhalten, müssen Sie eine einfache JavaScript-Funktion wie folgt schreiben:

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

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

    return ""; 
} 

Hier einige Vorschläge sind:

1. jeweils Geben Sie ein ID bilden.
2. Schreiben Sie eine einfache Funktion, um die Radio Button Group Werte zu erhalten (wie im obigen Beispiel).
3. Rufen Sie diese Funktion in Ihrer aktuellen priceChange() - Funktion auf.

Hier ist, was Ihre aktualisierte JavaScript aussehen würde:

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

Hinweis diese beiden Linien:

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

Diese Linien, die die Funktion aufrufen, die den ausgewählten Wert aus den Optionsfeld Gruppen erhalten (vorausgesetzt, Sie geben Ihren Formularen die IDs "planHostForm" und "emailForm").

Es gibt auch einige andere Änderungen, z. B. die Deklaration von Variablen für die src Pfade und das Bild, das Sie ändern möchten; Ihr Code wird einfacher zu lesen und zu pflegen sein.

Hier ist die aktualisierte HTML (mit Form-IDs IDs aktualisiert Optionsfeld hinzugefügt und):

<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

Sind Sie sicher, dass Sie priceChange() zu laufen sind auslösende? Ich bin mir nicht sicher, wie man den Wert eines select Elements in rohen JS ändern kann, aber wenn man jQuery benutzt, würde man einen Listener auf das Ereignis "change" setzen und so einstellen, dass die Funktion ausgeführt wird :

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

Answer 3

Ihren letzten Fehler beheben Sie verweisen würden „priceTotal.src ist nicht definiert“ müssen den Code ändern zu die richtigen Variablen.

Zum Beispiel haben Sie:

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

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

Ich glaube, Sie das src-Attribut für das Bildobjekt ändern wollte. Wenn ja, dann müssen Sie Ihren Code wie folgt aktualisieren:

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

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

Beachten Sie, dass hostImage und emailImage müssen irgendwo vor den bedingten Blöcke deklariert werden. Ich bin mir nicht sicher, wie Ihr HTML jetzt aussieht, aber Sie würden diese Variablen ähnlich wie priceTotalImg deklarieren. Zum Beispiel:

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

Answer 4

Ok, ich habe endlich den Fehler gefunden, der es zum Scheitern brachte. Ich habe den Wert nicht an das Formular zurückgegeben. Um die Dinge einfach zu halten, habe ich die Variable vollständig entfernt und den Wert direkt an das Formular zurückgegeben. Es funktioniert wie ein Zauber. Vielen Dank für Ihre Hilfe. Ich schätze, ich habe mich selbst kompliziert.