I have created a javascript function to do a simple calculation on my form. I found an example that uses the HTML document object document.formname.fieldname.value and modified it for the fields and calculations I'm needing to use. But I am having difficulty, and I'm pretty sure it is related to my not knowing what the 'formname' should be. I tried adding name="SS2016" to my <form...... > section after Method="POST", but that has not helped. I'm wondering if perhaps I cannot use the document object with my WFB form ? Maybe I'm approaching this from the wrong angle, here is my script:
function calculate()
{
QtyYouth = 0; QtySponsor = 0;
TotRegistered = 0; TotDeposit = 0;
DepositPer = 15;
if (document.SS2016.EstYouth.value > "")
{ QtyYouth = document.SS2016.EstYouth.value };
document.SS2016.EstYouth.value = eval(QtyYouth);
if (document.SS2016.EstSponsors.value > "")
{ QtySponsor = document.SS2016.EstSponsors.value };
document.SS2016.EstSponsors.value = eval(QtySponsor);
TotRegistered = QtyYouth + QtySponsor;
document.SS2016.TotalAttendance.value = TotRegistered;
TotDeposit = TotRegistered * DepositPer;
document.SS2016.PaymentAmt.value = TotDeposit;
}
Thanks -
Annette Daniel
Using HTML javascript...
A.M. Daniel
Registered User
12 posts
Eric Rohloff
Senior Advisor
20,271 posts
Hi A.M., Can you share a link to the actual form?
Have you seen the many examples in the forum I have for using JQuery for calculations?
Have you seen the many examples in the forum I have for using JQuery for calculations?
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
A.M. Daniel
Registered User
12 posts
I sure have Eric 
, read through several of them before making my post. Lots of good information there. But I had already created the script in question, and am still hoping there is an easy way to use the HTML DOM with WFB. In the sample script I started with, the form itself was created in HTML from scratch, and by embedding the name="" in the <form ...> section, it just all worked together so simply and beautifully.
, read through several of them before making my post. Lots of good information there. But I had already created the script in question, and am still hoping there is an easy way to use the HTML DOM with WFB. In the sample script I started with, the form itself was created in HTML from scratch, and by embedding the name="" in the <form ...> section, it just all worked together so simply and beautifully.
A.M. Daniel
Registered User
12 posts
I will post a link to the form later this evening when I place it on my test site.
A.M. Daniel
Registered User
12 posts
I have the script working now, a couple tweaks I had missed. Also, I ended up placing it in the header of the form's html file. Not sure that location matters, as one coder suggested placing it below the </body> of the form. Here is the final script:
<script language=javascript>
<!--//
function calculate()
{
QtyYouth = 0; QtySponsor = 0;
TotRegistered = 0; TotDeposit = 0;
DepositPer = 15;
if (document.SS2016.EstYouth.value > "")
{ QtyYouth = document.SS2016.EstYouth.value };
document.SS2016.EstYouth.value = eval(QtyYouth);
if (document.SS2016.EstSponsors.value > "")
{ QtySponsor = document.SS2016.EstSponsors.value };
document.SS2016.EstSponsors.value = eval(QtySponsor);
TotRegistered = eval(QtyYouth) + eval(QtySponsor);
document.SS2016.TotalAttendance.value = eval(TotRegistered);
TotDeposit = eval(TotRegistered) * DepositPer;
document.SS2016.PaymentAmt.value = eval(TotDeposit);
}
//-->
</script>
I added name="SS2016" to the end of the <Form ... line so the form has the name the DOM is using to reference it.
I added the call to the function onchange="calculate()" in the body of the HTML file at the end of each <input... line used in the calculation so if the field contents change, the calculation occurs and redisplays the correct totals immediately. Since these particular fields are whole numbers only, I did not include a function to round any decimals to two places.
One additional change I made is in the <body> line. Since I had the same issue that many others have experienced with long forms (the Payment information not being visible on Submit until the user scrolls up) I changed the <body> line to <body onSubmit="window.parent.scroll(0,0);"> For the fully working version of this form, that code moves the user to the correct place at the top of the screen after they click Submit.
Here is a link to the test form (this one does not actually submit anything, nor is there payment info)
http://www.kncsbevents.org/SS%20Preregi … 20TEST.php
Annette Daniel
<script language=javascript>
<!--//
function calculate()
{
QtyYouth = 0; QtySponsor = 0;
TotRegistered = 0; TotDeposit = 0;
DepositPer = 15;
if (document.SS2016.EstYouth.value > "")
{ QtyYouth = document.SS2016.EstYouth.value };
document.SS2016.EstYouth.value = eval(QtyYouth);
if (document.SS2016.EstSponsors.value > "")
{ QtySponsor = document.SS2016.EstSponsors.value };
document.SS2016.EstSponsors.value = eval(QtySponsor);
TotRegistered = eval(QtyYouth) + eval(QtySponsor);
document.SS2016.TotalAttendance.value = eval(TotRegistered);
TotDeposit = eval(TotRegistered) * DepositPer;
document.SS2016.PaymentAmt.value = eval(TotDeposit);
}
//-->
</script>
I added name="SS2016" to the end of the <Form ... line so the form has the name the DOM is using to reference it.
I added the call to the function onchange="calculate()" in the body of the HTML file at the end of each <input... line used in the calculation so if the field contents change, the calculation occurs and redisplays the correct totals immediately. Since these particular fields are whole numbers only, I did not include a function to round any decimals to two places.
One additional change I made is in the <body> line. Since I had the same issue that many others have experienced with long forms (the Payment information not being visible on Submit until the user scrolls up) I changed the <body> line to <body onSubmit="window.parent.scroll(0,0);"> For the fully working version of this form, that code moves the user to the correct place at the top of the screen after they click Submit.
Here is a link to the test form (this one does not actually submit anything, nor is there payment info)
http://www.kncsbevents.org/SS%20Preregi … 20TEST.php
Annette Daniel
Eric Rohloff
Senior Advisor
20,271 posts
Your form allows me to enter the same raking for all weeks.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
A.M. Daniel
Registered User
12 posts
That's true, it does not yet have any code to prevent duplicate rankings. Something I'll be adding later. Thanks for taking a look.
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
