Javascript Calculations not working in IE8 and below Pleeeeease Help

Only thing is I don’t have much control over my PHP script in that I am using FormMail for form processing and it seems to work okay in passing the values if I am the using the “name” attribute of the field, but not the “id” attribute. So if the value is defined in the name field, then it would work.

Anyways, I tried your suggestion. Added the input field and the getElementId command.


<input type="text" name="total"  id="hiddenTotal">

Then when the User press Submit, a confirmation page is displayed saying thank you for their input and showing them their total. For that I used the

  <tr>
                <td>Your Contribution</td>
                 <td>$totalCost</td>
           </tr>

I tried using hiddenTotal also, but nothing shows up on the confirmation page.

  <tr>
                <td>Your Contribution</td>
                 <td>$hiddenTotal</td>
           </tr>

But I get nothing. However I can see the $45 showing up in the input box on the main form! It’s got to be something simple… but???

What do you mean, you don’t have much control over it?
You appear to be submitting your form to a script entitled ‘formMailEngine.php’.
If it lives on your server, you can edit it :slight_smile:

Put another way, what do you want to happen when you submit the form?
Are the results stored in a database?
Are the results mailed to you?

Yes I do have it, but I should’ve said I am not confident enough to touch that script.
But more importantly I have the all the field values carrying through. The difference is that those values are passed on using the name attribute of either the Select or input field. However for just the totalCost, it is tied to an id attribute on a <span> tag. I don’t think the formmailEngine takes values from the id attribute.
So if we can somehow pass the totalCost just the same way the other values such as

<select name="SR_UNDER6" class="formselectwhite"  id="SR2">
                          <option>0</option>
                          <option>1</option>
                          <option>2</option>
                          <option>3</option>
                          <option>4</option>
                          <option>5</option>
                        </select>

is passed, then it shoudl work.

When I press Submit, the results are not stored in a database (I save it as a csv file) but the results are mailed to me. Another email also goes out to the user with the values in it.
In the email, all except the value of the totalCost shows up correctly.

Hi,

totalCost is a JavaScript variable, calculated based on what the user selects.
It’s not tied to anything, per se.
You could easily turn the span into a non-editable input field.
Would that help you?

Sorry for the corrections:
You see that’s where the problem is, because your original script used id tag to display the value of totalCost, number of adults etc.

Thid code works


<input id=GRNDTOTAL class=grandTotalTxt type="text" readonly>

This also works:


<input type="text" name="total"  id="hiddenTotal">

However if I change it to the following, it does not work


<input name=GRNDTOTAL class=grandTotalTxt type="text" readonly>

The key here I think is that your script is looking for the id value
The form processor can pick up values from tag based on it’s name.

Don’t get hung up on the id tag, that was just an easy way to get a reference to the element in question.
What would be the easiest way then, to pass the totalCost variable to the PHP script?
Would something like this do it?

<form action="myscript.php" method="post">
  ... All of your form stuff ...
  <input type="hidden" name="total">
  <input type="submit" value="Submit">
</form>

Note the absence of an id tag on the hidden field.

Pullo, I tried that already, but don’t seem to be working. Let me try couple of more things.

As I was saying all the values from the <select> tag, such as the name, email, number of adults selected etc gets passed on to the email… all except this one calculated field totalCost.

This is how I am handling it:


var cost = document.getElementById("GRNDTOTAL");
....
 cost.innerHTML ='$' + totalCost + '.00';

This shows the value correctly on the main form.

Now to have that same value passed on to through POST, here is what I have done with the other values. The form is processed by formMail.php and on my email html page, all I have is:


 <tr>
        <td align="left" nowrap="nowrap">Adult</td>
        <td align="left"nowrap="nowrap">$adult</td>
       <td align="left" nowrap="nowrap" >GRAND TOTAL</td>
        <td align="left" nowrap="nowrap">$GRNDTOTAL</td>
      </tr>

But in the above case, the value of the $adult shows up correctly, but not the $GRNDTOTAL

I don’t see any difference between the two rather than just name vs. id tag difference. You are probably right in that I shouldn’t get hung up on it. But nothing else seems to pop out. I can try to mimic the whole, but the problem is with formmail.php it becomes difficult to send everything over to you.

Would you possibly have an abstract formprocessor that you can test this on.

It is probably getting late there. So I can talk to you later. I really appreciate your patience. Hope you can help me solve this as it seems so closely there but I just can’t see it. Spend almost all day!!! Thank you.

Hi,
I was just looking over the code I sent you in the first place, as I had forgotten which variables were what.
Then something occurred to me.
Add a new line to the JavaScript where we are declaring all of the variables, just below the call to window.onload:

window.onload = function(){
  var sel = document.getElementsByTagName("select");
  var adult = document.getElementById("adult");
  var child = document.getElementById("child");
  var people = document.getElementById("people");
  var cost = document.getElementById("cost");
  var totalCost;
  ...

The new line is var totalCost;

Add this to your code, then revert back to the solution with the hidden field.
Does that work? It’s a bit of a long shot, but there is some formMailer black magic happening somewhere, as the solution I posted a while back should work …

Oh… my… it works on the form, not passed on to email or to the Confirmation html page that appears when the user press Submit.

So here is what I added, as you suggested…


var totalCost;
<input type="text" name="total"  id="hiddenTotal">

Then in my confirmation.html page for example, I called up


Your total Cost is $totalCost;

…but didn’t get any value.

Ok, if you have done everything I suggested, it really seems that the problem lies with the PHPMailer script.
But, you know, sending mail in PHP isn’t really very complicated.
Would it not be a better idea to implement this functionality yourself?
I could show you how if you like.
Off to bed now. It is late here.

Okay, here is where I am not Pullo. I would love to have the PHP code to process the form myself, but this formMail.php has additional features like captcha, error handling, conditional fields etc etc which would be very difficult to recreate without extensive coding. And I have been using on few forms already.

But here is what my problem is. This is my Form page registration.html where we started, that you provided.


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Calculate total order</title>

<script type="text/javascript">
          window.onload = function(){
            var sel = document.getElementsByTagName("select");
            var adult = document.getElementById("adult");
            var child = document.getElementById("child");

            var single = document.getElementById("single");
            var child2 = document.getElementById("child2");

            var people = document.getElementById("people");
            var cost = document.getElementById("cost");
			
			var GRNDTOTAL2;

            function updateTotal(personType, personAmount){
              // Update number
                countAdults = parseInt(adult.options[adult.selectedIndex].text);
                countSingle = parseInt(single.options[single.selectedIndex].text);
				
                countChild  = parseInt(child.options[child.selectedIndex].text);
                countChild2	= parseInt(child2.options[child2.selectedIndex].text);

          if (countAdults) {
            costAdults = 25;
          }
          else {
            costAdults = 0;
          }
          if (countSingle) {
            costSingle = countSingle * 10;
          }
          else {
            costSingle = 0;
          }

          totalCostAdults = costAdults + costSingle;
    	  totalCountAdults = countAdults + countSingle;
		  totalCountChildren = countChild + countChild2;
			
          totalPeople =  totalCountAdults + totalCountChildren;
          peopleText = totalCountAdults + ' adults and ' + totalCountChildren + ' children (' + totalPeople + ' in total)';
          people.innerHTML = peopleText;

          // Update cost
          totalCost = totalCostAdults;
             cost.innerHTML = '$' + totalCost;
			 document.getElementById("hiddenTotal").value=totalCost;
			 document.getElementsById("GRNDTOTAL2").value =totalCost;
          }

          for(var i=0; i<sel.length; i++) {
          sel[i].onchange = function(){updateTotal()};
         }
   };
</script>

<script type="text/javascript" src="../formMail/v8.30/formval.js"></script>

    </head>

    <body>

          <form method="post" action="http://www.mysite.com/formMail/formMailEngine.php" name="RegistrationForm">
            <input type="hidden" name="recipients" value="myaddress" />
            <!-- Defined in INI File -->

            <input type="hidden" name="subject" value="PROGRAM REGISTRATION" />
            <input type="hidden" name="good_template" value="/fmTemplates/fmConfirmationtest.html" />
            <input type="hidden" name="bad_template"    value="/fmTemplates/fmErrorHandlerPage.html" />
            <input type="hidden" name="bad_url" value="/fmbadhandler/fmbadhandler.php" />
            <!-- required to handle special error codes in error tmplt -->
            <input type="hidden" name="this_form"    value="/registration.html" />
            <input type="hidden" name="autorespond" value="HTMLTemplate=/fmtemplates/autoRespondtoUser.html, Subject=Registration Confirmation from Web,TemplateMissing=" />
            <input type="hidden" name="mail_options" value=	"CharSet=UTF-8,HTMLTemplate=/fmTemplates/frmDataToWebMaster.html,NoEmpty, TemplateMissing=,Exclude=email;submit"/>
            <!-- =================== ^^ EDIT FOR EACH EVENT ^^ ====================== -->

            <br />
<input class="formselectwhite" size="40" name="FullName"/>
        <br clear="all" />
        <br clear="all" />
        <input class="formselectwhite" size="40" name="email" id="emailvalue"/>
        <br clear="all" />
        <br clear="all" />
        <input class="formselectwhite" name="Telephone" value="" type="text"/>
         <br clear="all" />
         <br clear="all" />
	     <label for="adult">ADULTS ($25)</label>
        <select id="adult">
          <option>0</option>
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select>
      </div>
      <div>
        <label for="child">CHILDREN ($0)</label>
        <select id="child">
          <option>0</option>
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select>
      </div>
      <br/>
      <div>
        <label for="single">SINGLES ($10)</label>
        <select id="single">
          <option>0</option>
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select>
      </div>
      <div>
        <label for="child2">CHILDREN ($0)</label>
        <select id="child2">
          <option>0</option>
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select>
      </div>
      <div style="width: 40%; float: left;">
       <input type="submit" value="Submit Information!">      </div>
    </form>
    <p> <strong><br />
    Total</strong><br />
      People: <span id="people"></span><br />
      Cost: <span id="cost"></span><br />
      Display: <span><input type="text" id="hiddenTotal" ></span>
    <p>
    </body>
    </html>

Now here is the confirmation page fmConfirmationtest.html that the User sees when they press the Submit button.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

  <div  style="width: 100%;">
                  <table>
                    <tr>
                      <th colspan="2">Your  Registration Summary</th>
                    </tr>
                    <tr class="yellow">
                      <td width="142">Details</td>
                      <td width="166">Your  Input</td>
                    </tr>
                    <tr>
                      <td>Full  Name</td>
                      <td>$FullName</td>
                    </tr>
                    <tr>
                      <td>Email Adress</td>
                      <td>$email</td>
                    </tr>
                    <tr>
                      <td>Phone Number</td>
                      <td>$Telephone</td>
                    </tr>
                    <tr>
                      <td>Your Contribution</td>
                      <td>$hiddenTotal</td>
                    </tr>
                    <SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT"></script>
                    <tr>
                      <td colspan="2" class="mediumred">.</td>
                    </tr>
                  </table>
                  </div>
</body>
</html>

Here are the screen shot of what I get when I am on the form:

As you can see the value in the “Display” field is showing a value and it is using hiddenTotal.

But that same $hiddenTotal is coming up null in the confirmation page, thus “Your Contribution” is empty. So that’s all that need to be fixed. Somehow be able to pass the value of the hiddenTotal to the next pages, emails etc.
I am assuming that if we get it show up correctly on the confirmation page then it will also work on all the email notification as well.

Hope this helps. Unfortunately you may have to get the free formMail from tectite.com for the processor. I can send everything that I use, but that would be rather large.

If you create your own PHP script and make this work, then again we may have a problem in that the FormMail may be handling it differently than your script and end up with the same issue.

Please note that the form processor is indeed passing the values of all other fields, except our calculated field. So if we can figure out the right way to pass that value through, then that solves the problem (hopefully).

Hi,

Um, this line here:

Display: <span><input type="text" id="hiddenTotal" ></span>

Has to be within the <form> tag, for it to be submitted to the PHP script.

What I was trying to convey earlier is that you have a <span> tag that you use to display the information to your visitors.
This is outside the <form> tag.

You also have an this: <input type="hidden" name="total" id="hiddenTotal">, but inside the form, which you use to pass the ‘totalCost’ variable to your PHP script

Then, you have your JavaScript update both the <span> tag and the value of the hidden <input> tag whenever the total changes.

Something like this:

<form>
  your form stuff here
  <input type="hidden" name="total" id="hiddenTotal">
  <input type="submit" value="submit">
</form>

Then, below the form:

<p>
  <strong>Total</strong><br />
  People: <span id="people"></span><br />
  Cost: <span id="cost"></span><br />
<p> 

In your JavaScript:

// Update cost 
totalCost = ... calculate cost here ...;

// This updates the span
cost.innerHTML = '$' + totalCost;

// This updates the hidden field for submisstion with the form
document.getElementById("hiddenTotal").value=totalCost;

Now, in your confirmation page, you should be able to access the variable: $total

Does that work for you?

Oh…my God… this is soooo frustrating… It is now working on the confirmation form. But the value of the total is not showing up on the emails. Aaarghhhhh… and all this I had that tag outside the <form> element… that’s bad!

Now let me try to make sure that I have everything setup correctly in my form to pass the variable to the emails through the form processor. I am assuming that if the value is showing up on the confirmation page, the same value should get passed on to the Form processor if I call up $total in my email message as well. DO you see any issue with that?

I am on my way to work now. I will make sure everything is done correctly later today and then I’ll send another reply.

Thank you soooo much for pointing out my stupid mistakes!!! Have a nice day…

These things happen.
I think that was the cause of your error though :slight_smile:

No, I would expect it would work in this way.
Every form element with a name attribute will get packed into the $_POST suberglobal and should be accessible from withing the PHP script by this name (i.e. $_POST['total']).

It seems that we are pretty close to getting this working now that this final hurdle is something to do with the formMailer script.
Let me know how you get on.

Yes, I think it is the formMailer script. But the important point to note is that it is nicely picking up all the other variables from my page like the Name, email, the counts of the adults etc., all of which are using the name attribute. But the difference here is that the $total is a calculated field and thus the value is not getting passed on to the FormMailer. Although it is showing up in the confirmation.html page, that is still within the context of the form live data, but when it comes to the information in the email, I think that is where it really needs to be processed through the FormMailer. And I wonder if $_POST is seeing the value, whether the value is coming out of the onload function?

Here is my code in the actual page, little different than what I had for the sample page with additional fields etc. Can you please take a quick look and see if I am doing something “stupid” again.


<script type="text/javascript">
          window.onload = function(){
            var sel = document.getElementsByTagName("select");
            var FRadult = document.getElementById("FR1");
            var SRadult = document.getElementById("SR1");
			
            var FRchild = document.getElementById("FR2");
            var FRunder6 = document.getElementById("FR3");
            var SRunder6 = document.getElementById("SR2");


            var people = document.getElementById("ORDERPLACED");
            var cost = document.getElementById("GRNDTOTAL");
            var totalCost;

            function updateTotal(personType, personAmount){
              // Update number
                countFRadult = parseInt(FRadult.options[FRadult.selectedIndex].text);
                countSRadult = parseInt(SRadult.options[SRadult.selectedIndex].text);
				
                countFRhild   = parseInt(FRchild.options[FRchild.selectedIndex].text);
                countFRunder6 = parseInt(FRunder6.options[FRunder6.selectedIndex].text);
                countSRunder6 = parseInt(SRunder6.options[SRunder6.selectedIndex].text);

          if (countFRadult) {
            costFRadults = 25;
          }
          else {
            costFRadults = 0;
          }
          if (countSRadult) {
            costSRadults = countSRadult * 10;
          }
          else {
            costSRadults = 0;
          }

          totalCostFRadults = costFRadults + costSRadults;

          totalCountAdults = countFRadult + countSRadult;		
          totalCountChildren = countFRhild + countFRunder6 + countSRunder6;
			
          totalPeople =  totalCountAdults + totalCountChildren;
		
          peopleText = totalCountAdults + ' adults and ' + totalCountChildren + ' children (' + totalPeople + ' in total)';
          people.innerHTML = peopleText;

          // Update cost
          totalCost = totalCostFRadults;
          cost.innerHTML ='$' + totalCost + '.00';
          //display.value = totalCost;
          document.getElementById("cost").innerHTML=totalCost;
          document.getElementsById("hiddenTotal").value=totalCost;
          }

          for(var i=0; i<sel.length; i++) {
          sel[i].onchange = function(){updateTotal()};
         }
   };
</script>


Would you have a simple PHP FormMailer script that we can use to test to see if the value is being passed on.
Conversely if you can install the tectite formmail, that would be great. It only take a few minutes to install.

Hi,

I’ve downloaded and installed the formMail script and my solution definitely works.
When I submit this form I get a mail with the total cost, sent to the email address I specified.
See if this works for you.
Maybe we can go from there.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Formmail test</title>
  </head>

  <body>
    <form method="post" action="formmail.php" name="SampleForm">
    	<!-- Formmail specific nonsense-->
      <input type="hidden" name="env_report" value="REMOTE_HOST,REMOTE_ADDR,HTTP_USER_AGENT,AUTH_TYPE,REMOTE_USER" />
      <input type="hidden" name="recipients" value="..." />
      <input type="hidden" name="subject" value="Sample FormMail Testing" />
      <input type="hidden" name="derive_fields" value="email=EmailAddr,realname=FullName" />
      <input type="hidden" name="mail_options" value="Exclude=email;realname" />

      <div>
        <label for="adult">ADULTS ($45)</label>
        <select id="adult">
          <option>0</option>
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select>
      </div>

      <div>
        <label for="child">CHILDREN ($0)</label>
        <select id="child">
          <option>0</option>
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select>
      </div>

      <input type="hidden" name="totalCost" id="totalCostHidden" value="" />
      <input type="submit" value="Submit" />
    </form>

    <p>
      <strong>Total</strong><br />
      People: <span id="people"></span><br />
      Cost: <span id="cost"></span>
    <p>

    <script>
      window.onload = function(){
        var sel = document.getElementsByTagName("select");
        var adult = document.getElementById("adult");
        var child = document.getElementById("child");
        var people = document.getElementById("people");
        var cost = document.getElementById("cost");

        function updateTotal(personType, personAmount){
          // Update number
          totalAdults = parseInt(adult.options[adult.selectedIndex].text);
          totalChildren = parseInt(child.options[child.selectedIndex].text);
          totalPeople =  totalAdults + totalChildren;
          peopleText = totalAdults + ' adults and ' + totalChildren + ' children (' + totalPeople + ' in total)';
          people.innerHTML = peopleText;

          // Update cost
          totalCost = totalAdults * 45;
          cost.innerHTML = '$' + totalCost;
	  document.getElementById("totalCostHidden").value = totalCost
        }

        for(var i=0; i<sel.length; i++) {
          sel[i].onchange = function(){updateTotal()};
        }
      };
    </script>
  </body>
</html>

What do you have in your Confirmation page and the Email page? How are you calling the value- using $totalCost or $totalCostHidden?

Can you paste or attach those two files also.

In the email, the value is just getting passed in.
I didn’t specify a confirmation page, I’m just using formMailer’s generic one.

Hi,

I’ve got to duck out for a bit. Two things:

  1. Make sure that the hidden input field in your example has a name attribute.
  2. If it still doesn’t work, please try out the code I posted one for one (but change the recipient address, obviously). Then, if my code works, try and add bits of your code, testing the whole thing out at various intervals, until you find out exactly where it breaks.

I’m sure we’ll get to the root of this soon.

Yes, that’s what I am doing now. I copied your code over and adding a bit by bit. Only thing is that I had to keep my header info to make sure the code works correctly since the configuration is bit different than yours.

Even in the formMails generic one, you would have to specify which fields you want passed on to the User in the email. So you are saying you are actually getting an email from the server with the name, count and totalCost.

As you can see, in my form I have a custom html page called “autoRespondsToUser.html” for sending the values by email. If you have something similar, can you paste the html for that part of the code, becuase I am not seeing how the value of the cost is getting passed on to the email confirmation page.

My internet access is very limited in scope due to the location that I am at now. So once I am back at my site with full access, I should be able to test it more.