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

Question

I actually want to calculate the number of Persons and Children to show in real time a price. This is the form html code:

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

And this is my JavaScript and it's not working please help me with an advice if u can

<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

The big problem here is you're trying to access the form using a name that doesn't exist.

document.forms

this requires the name attribute of the form to be able to access it, so use

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

with

document.forms["formbox"];

Answer 2

For starters, when you're trying to get your form element, you're looking for document.forms["formbox"];

You set the id attribute of the form in the html to 'registerHere'. You'll need to change one or the other to match. In the example below, I set the form id to 'formbox'.

Next, you're looking for selectbasic1 and selectbasic2 in the getQuantityAdults and getQuantityChildren functions, but the selects are both named selectbasic.

You'll need them both to be unique to work this way, and you'll need to look at them by their exact id. I've named them 1 and 2, respectively.

This is enough to get this working for you. One thing I'd like to mention, though, is with howmanyAdults = parseInt(quantity.value) howmanyAdults, howmanyChildren, and howmany. You declare how many in both functions but do not use it in either. howmanyChildren and Adults you declare without the var keyword before it. This will declare the variable in the global scope, which is bad practice unless it is needed. I've changed these to just use the howmany variable declared in each function.

One last thing. You say you want this to work in real time, but there's nothing to trigger the getTotal() function. I've added something for that at the top of the script.

Here's a working example:

 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>