使用JavaScript的表單中的實時計算不起作用

Question

我實際上想要計算實時顯示價格的人員和子女數量。這是形式的html代碼：

<form class="form-horizontal" id="registerHere" method='post' action="<?php echo get_template_directory_uri(); ?>/admin/register/mailer.php "> 

     <fieldset> 

     <div class="row"> 

      <!-- Select Basic --> 

      <div class="control-group span1"> 

      <label class="control-label"><?php _e('Adults', 'trek'); ?></label> 

      <div class="controls"> 

       <select id="selectbasic1" name="adults" class="input-xlarge" > 
       <option>1</option> 
       <option>2</option> 
       <option>3</option> 
       <option>4</option> 
       <option>5</option> 
       <option>6</option> 
       </select> 

      </div> 

      </div> 

      <div class="control-group span1"> 

      <label class="control-label"><?php _e('Children', 'trek'); ?></label> 

      <div class="controls"> 

       <select id="selectbasic2" name="childern" class="input-xlarge" > 
       <option>0</option> 
       <option>1</option> 
       <option>2</option> 
       <option>3</option> 
       <option>4</option> 
       <option>5</option> 
       <option>6</option> 
       </select> 

      </div> 

      </div> 

     </div> 
       <div class="control-group"> 

      <div class="controls" id="totalPrice"> 



      </div> 

     </div> 


     </fieldset> 

     <button type="submit" id="submitted" onsubmit="return validate();" class="btn"><?php _e('Reserve it', 'trek'); ?></button></br> 

    </form> 

，這是我的JavaScript和它不工作，請幫助我的意見，如果u能

<script type="text/javascript"> 



function getQuantityAdults() 
{ 
//Assume form with id="theform" 
var theForm = document.forms["registerHere"]; 
//Get a reference to the TextBox 
var quantity = theForm.elements["selectbasic1"]; 
var howmany =0; 
//If the textbox is not blank 
if(quantity.value!="") 
{ 
    howmanyAdults = parseInt(quantity.value) 
    howmanyAdults = howmanyAdults * 29; 
} 
return howmanyAdults; 
} 

function getQuantityChildren() 
{ 
//Assume form with id="theform" 
var theForm = document.forms["registerHere"]; 
//Get a reference to the TextBox 
var quantity = theForm.elements["selectbasic2"]; 
var howmany =0; 
//If the textbox is not blank 
if(quantity.value!="") 
{ 
    howmanyChildren = parseInt(quantity.value) 
    howmanyChildren = howmanyChildren * 29; 
} 
return howmanyChildren; 
} 

function getTotal() 
{ 

var totalPrice = getQuantityAdults() + getQuantityChildren(); 

//display the result 
document.getElementById('totalPrice').innerHTML = 
            "Total Price For Cake $"+totalPrice; 

} 
</script> 

Answer 1

這裏最大的問題是你想使用不存在的名稱訪問表單。

document.forms 

這需要形式的name屬性能夠訪問它，所以使用

<form name="formbox">...</form> 

與

document.forms["formbox"];