我已经用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>
我希望总计显示三个文本框中的结果＆＃39; example5＆＃39;，＆＃39; example3＆＃39;和＆＃39; example4＆＃39;。我尝试过各种各样的javascript函数，它现在正在煎我的大脑。感谢您的帮助！
答案 0 :(得分：1)
通过提供表单元素ID，您可以使用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>