使用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，無法正常工作，如果可以的話，請幫助我

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

Answer 2

對於初學者來說，當您嘗試獲取表單元素時，您正在尋找document.forms [“ formbox”];

您在html中將表單的id屬性設置為'registerHere'。 您需要更改一個或另一個以匹配。 在下面的示例中，我將表單ID設置為“ formbox”。

接下來，您要在getQuantityAdults和getQuantityChildren函數中查找selectbasic1和selectbasic2，但是選擇都被命名為selectbasic。

您需要它們都是唯一的才能以這種方式工作，並且需要按它們的確切ID對其進行查看。 我分別將它們命名為1和2。

這足以使它為您工作。 不過，我想提到的一件事是howmanyAdults = parseInt（quantity.value）howmanyAdults，howmanyChildren和howmany。 您可以聲明兩個函數中有多少個，但不要在兩個函數中都使用它。 您聲明的howmanyChildren和Adults之前沒有var關鍵字。 這將在全局范圍內聲明變量，除非有必要，否則這是一種不好的做法。 我將它們更改為僅使用每個函數中聲明的howmany變量。

最后一件事。 您說要實時運行，但是沒有什么可以觸發getTotal（）函數。 我已在腳本頂部為此添加了一些內容。

這是一個工作示例：

 document.addEventListener('change', function(){ getTotal(); }); function getQuantityAdults() { //Assume form with id="theform" var theForm = document.forms["formbox"]; //Get a reference to the TextBox var quantity = theForm.elements["selectbasic1"]; var howmany =0; //If the textbox is not blank if(quantity.value!="") { howmany = parseInt(quantity.value) howmany = howmany * 29; } return howmany; } function getQuantityChildren() { //Assume form with id="theform" var theForm = document.forms["formbox"]; //Get a reference to the TextBox var quantity = theForm.elements["selectbasic2"]; var howmany =0; //If the textbox is not blank if(quantity.value!="") { howmany = parseInt(quantity.value) howmany = howmany * 29; } return howmany; } function getTotal() { var totalPrice = getQuantityAdults() + getQuantityChildren(); //display the result document.getElementById('totalPrice').innerHTML = "Total Price For Cake $"+totalPrice; } 

 <form class="form-horizontal" id="formbox" name="formbox" 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>