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 [＆＃34; formbox＆＃34;];

您可以将html中表单的id属性设置为＆＃39; registerHere＆＃39;。您需要更改其中一个以匹配。在下面的示例中，我将表单ID设置为＆＃39; formbox＆＃39;。

接下来，您在getQuantityAdults和getQuantityChildren函数中查找selectbasic1和selectbasic2，但这些选择都命名为selectbasic。

你需要他们两个都是独一无二的，以这种方式工作，你需要通过他们的确切ID来看待他们。我分别将它们命名为1和2。

这足以让这对你有用。不过，有一点我想提到的是howmanyAdults = parseInt（quantity.value） howmanyAdults，howmanyChildren，howmany。您在两个函数中声明了多少但在两个函数中都没有使用它。 howmanyChildren和Adults你声明没有var关键字。这将在全局范围内声明变量，除非需要，否则这是不好的做法。我已将这些改为仅使用每个函数中声明的howmany变量。

最后一件事。你说你想让它实时工作，但是没有什么可以触发getTotal（）函数。我在剧本的顶部添加了一些内容。

这是一个有效的例子：

＆＃13;

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;

}

＆＃13;

<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>

＆＃13;

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

2 个答案: