Javascript 从表格计算总成本

Javascript 从表格计算总成本,javascript,jquery,html,Javascript,Jquery,Html,我已经用HTML制作了一个表单,我试图从特定的框中获取值,以显示在客户可见的总成本部分中。。请检查以下代码 <form name="myform"> <h2>Bread Type</h2> <p>Please select your type of bread</p> <input type="text" name="example" list="exampleList"> <datal

我已经用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>

我希望总数显示三个文本框“example5”、“example3”和“example4”的结果。我尝试了各种javascript函数,现在我的脑子都快炸开了。提前谢谢你的帮助

通过提供表单元素ID,您可以使用JS轻松地选择它们。请注意,您的标记包含其他标记中的标记。我已经删除了它们,还添加了一个按钮来运行该功能

函数视图选择{ var example3=document.getElementByIdexample3.value, example4=document.GetElementByIdeExample4.value, example5=document.getElementByIdexample5.value; alertexample3+“|”+example4+“|”+example5; } 面包类型 请选择您喜欢的面包类型

请选择面包大小请注意面包大小在价格上不同

六英寸3英镑 英尺长5英镑 奶酪和烤面包 干酪 祝酒 填满 下一步选择您希望子组件包含的内容

浇头 莴苣 红洋葱 甜玉米 小黄瓜 红辣椒 青椒 番茄 黄瓜 淡蛋黄酱 西南奇波特酒店 烧烤酱 盐 胡椒粉 喝 瓶装饮料1英镑 瓶装水80便士 杯饮料1英镑 大杯饮料2英镑 饼干/薯片 多丽托斯50便士 步行者50便士 麦考斯50便士 夸弗斯50便士 饼干1英镑 饼干1英镑 饼干1英镑 饼干1英镑 视图选择
你试过什么?你能把这个包括在问题里吗?你在使用JS库吗?您希望结果如何显示?如果没有更多的上下文,我们有太多可能的解决方案要在这里列出。