Berechnungen basierend auf Optionsfeldauswahl

Question

Ich verwende einen MEAN-Stack für mein Webprojekt. Das Frontend ist ein einfaches Registrierungsformular, das nach mehreren Benutzereingaben fragt. Zum Beispiel heißt es: "Wie viele Produkte kaufst du?" Die nächste Frage ist ein Optionsfeld. Es sagt, ist dieses Produkt groß oder klein? Meine Frage ist die folgende: Die Berechnung, um die Kosten der Bestellung zu erhalten, ist # Produkte * 42 + (12, wenn groß ausgewählt ist) oder # Produkte * 42 + (0, wenn klein ausgewählt ist). Wie schreibe ich das in Javascript (ich benutze Knoten in meinem Backend). Mit anderen Worten: Wie kann ich meinem Berechnungscode mitteilen, dass, wenn ein Benutzer eine Optionsschaltfläche auswählt, eine nachfolgende Nummer hinzugefügt werden muss und wie kann ich die Anzahl der Produkte weitergeben, die in meine Formeln eingegeben wurden? Ich habe begonnen, indem ich Wert = 1 für klein und Wert = 2 für große Radioknopfoption zuweise. Nur ein allgemeines Beispiel wäre hilfreich, da ich die Details codieren und die Formeln aktualisieren kann, sobald ich dieses Problem überwunden habe. Danke

Answer 1

Wenn Sie die Berechnung auf der Client-Seite und die Elemente in einem HTML-Formular tun:

<h1>Radio Buttons</h1> 
<form name="catch-radio" method="post"> 
    <div class="input"> 
    <span class="label">How many products are you buying?</span> 
    <input id="product-count" type="text" name="product_count" value="0"/> 
    <br/> 
    <span class="label">Is this product large or small?</span> 
    <br/> 
    <span class="label">Large</span> 
    <input type="radio" name="product-size" value="12" checked="checked"/> 
    <br/> 
    <span class="label">Small</span> 
    <input type="radio" name="product-size" value="0"/> 
    </div> 
</form> 
<div> 
    <h2>Cost of order:</h2> 
    <p id="calculation"></p> 
</div> 

mit einem Eingang für die Anzahl der Produkte (mit der ID ‚Produkt-count‘) und Radiobuttons entsprechend der Produktgröße ('Produktgröße' genannt), können Sie die Kosten berechnen und an ein Element auf der Seite (mit der ID 'Berechnung') ausgeben, indem Sie den Formularfeldern Ereignishandler hinzufügen Registrieren Sie eine Änderung im Formular und dann von diesen Handlern, die eine Funktion aufrufen, um die Berechnung durchzuführen und die Seite entsprechend zu aktualisieren:

// Cost is the count of products purchased multipled by 42 then added 
// to 12 in the case that the product is large, and zero in the case 
// that the product is small 
function calculate_cost() { 
    let count = parseInt(document.getElementById('product-count').value); 
    if (count > 0) { 
     let size = 0; 
     for (var i = 0 ; i < document.getElementsByName('product-size').length; i++) { 
      if (document.getElementsByName('product-size')[i].checked) { 
        size = parseInt(document.getElementsByName('product-size')[i].value); 
        break; 
      } 
     } 

     let cost = count * 42 + size 
     document.getElementById('calculation').innerHTML = cost; 
    } 
} 

// handlers for form input change 
// call calculate_cost() on change 
// note that the text input is an on-change event but for radio buttons 
// an onclick handler is needed for each button 
for (var i = 0 ; i < document.getElementsByName('product-size').length; i++) { 
    document.getElementsByName('product-size')[i].onclick = function() { 
     calculate_cost(); 
    } 
} 
document.getElementById('product-count').onchange = function() { 
    calculate_cost(); 
} 

Ich habe hier eine kurze Demo von diesem auf CodePen up: http://codepen.io/P1xt/pen/yOKqXP/

Das besonders interessante Bit ist, dass für die Radio-Buttons, benötigen Sie einen Click-Handler für jede Taste (separat hinzuzufügen, und es muss ein Klick sein nicht ein Change-Handler, und um herauszufinden, welches Radio gerade ausgewählt ist, müssen Sie jedes einzelne explizit prüfen, um zu sehen, ob es aktiviert ist.

Hinweis: Wenn Sie Ihre Berechnungen auf der Serverseite durchführen möchten, müssen Sie das Formular absenden und dann die Produktanzahl und die Produktgröße aus den übermittelten Formularelementen sammeln, um die Berechnungen durchzuführen Berechnung.

Answer 2

Warum nicht 0 und 12 als Werte für die Optionsfelder verwenden, dann kann das Backend nur den ausgewählten Wert hinzufügen?