javascript - 使用 JavaScript 的表单中的实时计算不起作用

Question

我实际上想计算人和 child 的数量以实时显示价格。这是表单 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，它不起作用，如果可以的话请帮我提供建议

<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"];