計算從形式

-4

總成本我已在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功能，現在正在煎炸我的大腦。我在這裏先向您的幫助表示感謝！

來源

2016-04-27 Gavin

JS你嘗試過什麼？你能否在這個問題中加入？你在使用任何JS庫嗎？你想如何顯示結果？沒有更多的上下文，我們可以在這裏列出很多可能的解決方案。 –

通過給你的表單元素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>

來源

2016-04-27 15:21:08 johnniebenson

回答

相關問題