Javascript для того, чтобы рассчитать форму отправки с радио-флажком и выпадающим списком

Question

Я пытаюсь сделать форму, вычисляю итог, поскольку элементы выбираются из смеси радио/выпадающего меню/chekcbox и отображают общее число внизу и обладают способностью для отправки формы.

Это то, что у меня есть: http://jsfiddle.net/XD8RW/1430/ Общее обыкновение появляться в средней части при нажатии на различные варианты

` Ценообразование

<div class="container"> 
    <div class="column-left"> 
     <p><b><u>Small ornaments (2 5/8")</u></b> 

      <br>Basic figure - $6.50 
      <br>(crane, pig, ball, flower etc.) 
      <br>Complex figure- $7.50 
      <br>(Dragon, skateboard, turkey etc.) 
      <br>Foil figures - $8.50 
      <br>(Anything made with foil paper) 
      <br>Money Figure - $8.50 
      <br>(Figures Made out of a $1 bill) 
      <br> 
      <br> <b><u>Large ornaments (4")</u></b> 

      <br>Basic figure - $8 
      <br>(crane, pig, ball, flower etc.) 
      <br>Complex figure- $9 
      <br>(Dragon, skateboard, turkey etc.) 
      <br>Foil figures - $10 
      <br>(Anything made with foil paper) 
      <br>Money Figure - $10 
      <br>(Figures Made out of a $1 bill) 
      <br> 
     </p> 
    </div> 
    <div class="column-center"> 
     <form action="" id="orderform" onsubmit="return false;"> 
      <fieldset> 
       <legend>Make your ornament!</legend> 
       <label><u>Size Of the Ornament</u> 

       </label> 
       <br> 
       <input type="radio" name="selectedornament" value="small" onclick="calculateTotal()" />Small Ornament (2 5/8") - $6.50 
       <input type="radio" name="selectedornament" value="small" onclick="calculateTotal()" />Large Ornament (4") - $8.50 
       <br> 
       <label>Figure</label> 
       <select id="figure" name='figure' onchange="calculateTotal()"> 
        <option value="None">Select Figure</option> 
        <option value="Crane">Crane ($0.50)</option> 
        <option value="Pig">Pig ($0.50)</option> 
        <option value="Baseball">Baseball ($0.50)</option> 
        <option value="Basketball">Basketball ($0.50)</option> 
        <option value="Flower">Flower ($0.50)</option> 
        <option value="Dragon">Dragon ($1.50)</option> 
        <option value="Skateboard">Skateboard ($1.50)</option> 
        <option value="Turkey">Turkey ($1.50)</option> 
        <option value="Cherry">Dancing Girl ($3)</option> 
        <option value="Apricot">Dollar Pig ($1.50)</option> 
        <option value="Buttercream">Dollar Shirt ($1.50)</option> 
        <option value="Chocolate Mousse">Dollar Koi ($12)</option> 
       </select> 
       <br/> 
       <p> 
        <label for='foil' class="inlinelabel">Figure made of foil paper - ($1)</label> 
        <input type="checkbox" id="foil" name='foil' onclick="calculateTotal()" /> 
        <br>(Except for designs made of one dollar bill)</p> 
       <p> 
        <label class="inlinelabel" for='includeinscription'>Include Custom Glass Etching ($6)</label> 
        <input type="checkbox" id="includeinscription" name="includeinscription" onclick="calculateTotal()" /> 
        <input type="text" id="theinscription" name="theinscription" value="Enter Inscription" /> 
       </p> 
       <div id="totalPrice"></div> 
       <input type='submit' id='submit' value='Submit' onclick="calculateTotal()" /> 
      </fieldset> 
     </form> 
    </div> 
    <div class="column-right"> 
     <p align="center"><b><u>*NOTE*</u></b> 

      </center> 
      <p> 
       <br>I generally don't charge extra for exterior paint unless you want something very detail-oriented or a design that would consume a large ammount of my paint/require me to buy additional paint colors (I only have red white and green paints for the holidays) 
       <br>Some figures are size/paper specific 
       <br>Money figures are limiited as to what can/can't be made, as are foiled figures as the foiled paper is sometimes difficult to work with 
       <br>When you contact me to place an order, I'll send you an e-mail back with pricing information specifically for your order</p> 
    </div> 

в JS находится в jsfiddle form извините, если я разместил это неверное им новое для переполнения стека

Answer 1

Как сказал che-azeh, есть некоторые переменные, которые не совпадают. Вы хотите, чтобы пользовательский массив выбранных символов (theForm.elements ["selectedornament"]). Здесь называется selectedCake (вы можете изменить это). И size_prices должен быть массивом, который вы определили как ornament_prices. Работы по http://jsfiddle.net/XD8RW/1432/

function getOrnamentSizePrice() { 
    var ornamentSizePrice = 0; 
    //Get a reference to the form id="orderform" 
    var theForm = document.forms["orderform"]; 
    //Get a reference to the size the user Chooses name=selectedOrnament": 
    var selectedCake = theForm.elements["selectedornament"]; 
    //there are 2 radio buttons selectedornament.length = 2 
    //loop through each radio buttons 
    for (var i = 0; i < selectedCake.length; i++) { 
     //if the radio button is checked 
     if (selectedCake[i].checked) { 
      //we set ornamentSizePrice to the value of the selected radio button 
      //by using the ornament_prices array 
      //and get the selected Items value 
      ornamentSizePrice = ornament_prices[selectedCake[i].value]; 
      //If its a match then break out of this loop 
      //No reason to continue 
      break; 
     } 
    } 
    //return the ornamentSizePrice 
    return ornamentSizePrice; 
} 

Хотя вы хотите удвоить проверить значение вашего ornament_prices массив

Answer 2

Проверьте свой код на веб-консоли как Firefox (ctrl+shift+k). Вы заметите, что у вас есть несколько неопределенных переменных, таких как selectedornament и size_prices, которые являются бесполезными для вас. Вы также можете использовать его для проверки других ошибок.