Berechnung Gesamtkosten von Form

Question

Ich habe ein Formular in HTML gemacht und ich versuche, die Werte aus den einzelnen Feldern zu greifen innerhalb eines Gesamtkosten Abschnitt für den Kunden sichtbar angezeigt werden .. Bitte überprüfen Sie den folgenden Code #

<form name="myform"> 
    <h2>Bread Type</h2> 
    <p>Please select your type of bread</p> 
    <input type="text" name="example" list="exampleList"> 
    <datalist id="exampleList"> 
    <option value="Hearty Italian"> 
    <option value="9-Grain Wheat"> 
    <option value="9-Grain Honey Oat"> 
    <option value="Italian"> 
    <option value="Italian Herbs & Cheese"> 
    <option value="Flatbread"> 
    </datalist> 

    <p>Please select bread size (Please note bread size differs in price)</p> 
    <input type="text" name="example5" list="exampleList5"> 
    <datalist id="exampleList5"> 
    <option value="Six Inch">Six Inch (£3)</option> 
    <option value="Footlong">Footlong (£5)</option> 
    </datalist> 

    <h2>Cheese & Toasted</h2> 
    <form action=""> 
    <input type="checkbox" name="topping" value="cheese">Cheese 
    <input type="checkbox" name="topping" value="toasted">Toasted 
    </form> 

    <h2>Filling</h2> 
    <p>Next select what you would like your sub to contain!</p> 
    <input type="text" name="example2" list="exampleList2"> 
    <datalist id="exampleList2"> 
    <option value="Ham"> 
    <option value="Chicken & Bacon Ranch Melt"> 
    <option value="Cold Cut Combo"> 
    <option value="Italian B.M.T"> 
    <option value="Meatball Marinara"> 
    <option value="Roast Beef"> 
    <option value="Oven Roasted Chicken"> 
    <option value="Spicy Italian"> 
    <option value="Steak & Cheese"> 
    <option value="Chicken Teriyaki"> 
    <option value="Tuna"> 
    <option value="Turkey Breast"> 
    <option value="Turkey Breast & Ham"> 
    </datalist> 

    <h2>Toppings</h2> 
    <form action=""> 
    <input type="checkbox" name="topping" value="lettuce">Lettuce 
    <input type="checkbox" name="topping" value="red_onion">Red Onion 
    <input type="checkbox" name="topping" value="sweetcorn">Sweetcorn 
    <input type="checkbox" name="topping" value="gherkin">Gherkin 
    <input type="checkbox" name="topping" value="red_peppers">Red Peppers 
    <input type="checkbox" name="topping" value="green_peppers">Green Pepper 
    <input type="checkbox" name="topping" value="tomato">Tomato</br> 
    <input type="checkbox" name="topping" value="cucumber">Cucumber 
    <input type="checkbox" name="topping" value="mayonnaise">Light Mayonnaise 
    <input type="checkbox" name="topping" value="chipotle">Chipotle Southwest 
    <input type="checkbox" name="topping" value="bbq">BBQ Sauce 
    <input type="checkbox" name="topping" value="salt">Salt 
    <input type="checkbox" name="topping" value="pepper">Pepper 
    </form> 

    <h2>Drink</h2> 
    <input type="text" name="example3" list="exampleList3"> 
    <datalist id="exampleList3"> 
    <option value="Bottled Drink">Bottled Drink (£1)</option> 
    <option value="Bottled Water">Bottled Water (80p)</option> 
    <option value="Cup Drink">Cup Drink (£1)</option> 
    <option value="Large Cup Drink">Large Cup Drink (£2)</option> 
    </datalist> 

    <h2>Cookies/Crisps</h2> 
    <input type="text" name="example4" list="exampleList4"> 
    <datalist id="exampleList4"> 
    <option value="Doritos">Doritos (50p)</option> 
    <option value="Walkers">Walkers (50p)</option> 
    <option value="McCoys">McCoys (50p)</option> 
    <option value="Quavers">Quavers (50p)</option> 
    <option value="Double Chocolate Cookie">Cookies (£1)</option> 
    <option value="Milk Chocolate Cookie">Cookies (£1)</option> 
    <option value="Smarties Cookie">Cookies (£1)</option> 
    <option value="White Chocolate Cookie">Cookies (£1)</option> 
    </datalist> 
    </form> 

Ich möchte, dass die Summe die Ergebnisse aus den drei Textfeldern 'example5', 'example3' und 'example4' anzeigt. Ich habe verschiedene JavaScript-Funktionen ausprobiert und es brutzelt jetzt mein Gehirn. Danke für die Hilfe im Voraus!

Answer 1

Indem Sie Ihre Formularelemente IDs geben, können Sie sie einfach mit JS auswählen. Bitte beachten Sie, dass Ihr Markup <form> Tags innerhalb anderer <form> Tags enthält. Ich habe sie entfernt und auch eine Schaltfläche hinzugefügt, um die Funktion auszuführen.

function viewChoices() { 
 
     var example3 = document.getElementById("example3").value, 
 
      example4 = document.getElementById("example4").value, 
 
      example5 = document.getElementById("example5").value; 
 

 
     alert(example3 + ' | ' + example4 + ' | ' + example5); 
 
    }

<form name="myform"> 
 
    <h2>Bread Type</h2> 
 
    <p>Please select your type of bread</p> 
 
    <input type="text" name="example" id="example" list="exampleList"> 
 
    <datalist id="exampleList"> 
 
    <option value="Hearty Italian"> 
 
    <option value="9-Grain Wheat"> 
 
    <option value="9-Grain Honey Oat"> 
 
    <option value="Italian"> 
 
    <option value="Italian Herbs & Cheese"> 
 
    <option value="Flatbread"> 
 
    </datalist> 
 

 
    <p>Please select bread size (Please note bread size differs in price)</p> 
 
    <input type="text" name="example5" id="example5" list="exampleList5"> 
 
    <datalist id="exampleList5"> 
 
    <option value="Six Inch">Six Inch (£3)</option> 
 
    <option value="Footlong">Footlong (£5)</option> 
 
    </datalist> 
 

 
    <h2>Cheese & Toasted</h2> 
 
    <input type="checkbox" name="topping" value="cheese">Cheese 
 
    <input type="checkbox" name="topping" value="toasted">Toasted 
 

 
    <h2>Filling</h2> 
 
    <p>Next select what you would like your sub to contain!</p> 
 
    <input type="text" name="example2" id="example2" list="exampleList2"> 
 
    <datalist id="exampleList2"> 
 
    <option value="Ham"> 
 
    <option value="Chicken & Bacon Ranch Melt"> 
 
    <option value="Cold Cut Combo"> 
 
    <option value="Italian B.M.T"> 
 
    <option value="Meatball Marinara"> 
 
    <option value="Roast Beef"> 
 
    <option value="Oven Roasted Chicken"> 
 
    <option value="Spicy Italian"> 
 
    <option value="Steak & Cheese"> 
 
    <option value="Chicken Teriyaki"> 
 
    <option value="Tuna"> 
 
    <option value="Turkey Breast"> 
 
    <option value="Turkey Breast & Ham"> 
 
    </datalist> 
 

 
    <h2>Toppings</h2> 
 
    <input type="checkbox" name="topping" value="lettuce">Lettuce 
 
    <input type="checkbox" name="topping" value="red_onion">Red Onion 
 
    <input type="checkbox" name="topping" value="sweetcorn">Sweetcorn 
 
    <input type="checkbox" name="topping" value="gherkin">Gherkin 
 
    <input type="checkbox" name="topping" value="red_peppers">Red Peppers 
 
    <input type="checkbox" name="topping" value="green_peppers">Green Pepper 
 
    <input type="checkbox" name="topping" value="tomato">Tomato</br> 
 
    <input type="checkbox" name="topping" value="cucumber">Cucumber 
 
    <input type="checkbox" name="topping" value="mayonnaise">Light Mayonnaise 
 
    <input type="checkbox" name="topping" value="chipotle">Chipotle Southwest 
 
    <input type="checkbox" name="topping" value="bbq">BBQ Sauce 
 
    <input type="checkbox" name="topping" value="salt">Salt 
 
    <input type="checkbox" name="topping" value="pepper">Pepper 
 

 
    <h2>Drink</h2> 
 
    <input type="text" name="example3" id="example3" list="exampleList3"> 
 
    <datalist id="exampleList3"> 
 
    <option value="Bottled Drink">Bottled Drink (£1)</option> 
 
    <option value="Bottled Water">Bottled Water (80p)</option> 
 
    <option value="Cup Drink">Cup Drink (£1)</option> 
 
    <option value="Large Cup Drink">Large Cup Drink (£2)</option> 
 
    </datalist> 
 

 
    <h2>Cookies/Crisps</h2> 
 
    <input type="text" name="example4" id="example4" list="exampleList4"> 
 
    <datalist id="exampleList4"> 
 
    <option value="Doritos">Doritos (50p)</option> 
 
    <option value="Walkers">Walkers (50p)</option> 
 
    <option value="McCoys">McCoys (50p)</option> 
 
    <option value="Quavers">Quavers (50p)</option> 
 
    <option value="Double Chocolate Cookie">Cookies (£1)</option> 
 
    <option value="Milk Chocolate Cookie">Cookies (£1)</option> 
 
    <option value="Smarties Cookie">Cookies (£1)</option> 
 
    <option value="White Chocolate Cookie">Cookies (£1)</option> 
 
    </datalist> 
 

 
    <button onClick="viewChoices()">View Choices</button> 
 
    </form>