Real-time calculations in a form using JavaScript doesn't work

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>

It seems you're trying to reference your form in javascript, but the form's name and id do not match up with the code you've got. — Jon Bloom
– Jon Bloom, Commented May 22, 2015 at 19:19
You're submit button references a function "validate()" though I don't see it in the source you provided. — Steve Hynding
– Steve Hynding, Commented May 22, 2015 at 19:22

cflat · Accepted Answer · 2015-05-22 19:22:48Z

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

answered May 22, 2015 at 19:22

cflat

112 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Andrei Cristian Over a year ago

I have changed that but no result\

cflat Over a year ago

@AndreiCristian - your other problem is the lack of the validate() function you reference in the submit button

neilsimp1 · Accepted Answer · 2015-05-22 19:48:04Z

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>

Collectives™ on Stack Overflow

Real-time calculations in a form using JavaScript doesn't work

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related