расчет общей стоимости от формы

Question

я сделал форму в HTML, и я пытаюсь захватить значение от конкретных коробок, которые будут отображаться в общем разделе затрат видимого клиентов .. Пожалуйста, проверьте следующий код #

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

Я бы хотел, чтобы итоговое значение отображалось в трех примерах текста примера 5 ',' example3 'и' example4 '. Ive пробовал различные функции javascript, и теперь он жарит мой мозг. Спасибо за помощь в продвижении!

Answer 1

Давая идентификаторы элементов формы, вы можете легко выбрать их с помощью JS. Обратите внимание, что ваша разметка содержит <form> теги в других тегах <form>. Я удалил их, а также добавил кнопку для запуска функции.

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>