...

View Full Version : form not totaling



red2ladyb
03-26-2012, 07:35 AM
Sorry in advance for being a pain, but I know nothing about JS. I need to get this form to total as people click on the checkbox. I'm using Website Tonight from Godaddy.com to host, so I can't upload/ftp a js file. It's built in to some option of theirs. I clicked where i want javascript to be on the webpage and then I'm supposed to type the script. I typed the script, but the total button doesn't total. It's probably something so easy for you, but not for me. Thanks in advance.

Beverly


<form id="frmOrder">
<p>
<input type="checkbox" id="chk0" />
Early Beauty Entry Fee
$<span id="txtPrice0">70</span>
</p>
<p>
<input type="checkbox" id="chk1" />
Early Most Photogenic Entry fee
$<span id="txtPrice1">10</span>
</p>
<p>
<input type="text" id="txtTotal" size="8" />
</p>
</form>

devnull69
03-26-2012, 08:47 AM
There are no fields on the form to get numbers from (except those span elements which are not form fields). And there is no "total button" to click on.

Please tell us exactly(!) what you want to achieve.

red2ladyb
03-26-2012, 01:55 PM
When someone checks the box to register for beauty and or photogenic I want a total to show up. I'll add name and address and email to the form, then submit button so that it mails to beverly@misscartersville.com

Thanks so much!

devnull69
03-26-2012, 03:47 PM
So you want to take the "beauty" value only if the checkbox chk0 is checked and the "photogenic" value only if the checkbox chk1 is checked? So you either get 0, beauty, photogenic or beauty+photogenic as a total?

What is the action that should trigger the calculation? Every click on each of the checkboxes?

Example HTML


<form id="frmOrder">
<p>
<input type="checkbox" id="chk0" onclick="calculate()" />
Early Beauty Entry Fee
$<span id="txtPrice0">70</span>
</p>
<p>
<input type="checkbox" id="chk1" onclick="calculate()" />
Early Most Photogenic Entry fee
$<span id="txtPrice1">10</span>
</p>
<p>
<input type="text" id="txtTotal" size="8" />
</p>
</form>


Example Javascript:


function calculate() {
var beauty = 0;
var photogenic = 0;
if(document.getElementById('chk0').checked)
beauty = parseFloat(document.getElementById('txtPrice0').innerHTML);
if(document.getElementById('chk1').checked)
photogenic = parseFloat(document.getElementById('txtPrice1').innerHTML);
document.getElementById('txtTotal').value = beauty + photogenic;
}

Philip M
03-26-2012, 05:41 PM
When someone checks the box to register for beauty and or photogenic I want a total to show up. I'll add name and address and email to the form, then submit button so that it mails to beverly@misscartersville.com

Thanks so much!

If you are thinking of sending your form using mailto: - forget it! That method is obsolete and totally unreliable.

Modern browsers no longer accept mailto: as a form action - they simply open the email program (if any) and ignore the form. If you are going to use a form then use a server-side CGI formmail script as the action - there are several good free ones out there.



All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

red2ladyb
03-27-2012, 05:22 AM
Yes, every click should change the total. it's a registration form for a beauty pageant. Entry choices are beauty, photogenic, optionals. click the box next to the entry and have the fee calculated in a total box so they know how much to send. the submit button is already on my form, and built-in to godaddy.

The form is basically is contact form with those 3 entry choice/check boxes and a total box.

Sorry if i'm confusing anyone. Thanks for all of your help!

My html form is at http://misscartersville.com/app.html
I just want to change textboxes to checkboxes and add a total field.

red2ladyb
03-27-2012, 05:31 AM
Using Website Tonight, my choices for entering javascript are to click on the form where i want the script. Enter the script. Then I can change the properties for the page. It says can have scripts in both the body and the head sections. Not sure what should go in these sections, if anything.

red2ladyb
03-28-2012, 04:40 AM
THANK YOU!! I just figured out where to post your code and it works!! Thanks, thanks, thanks!!

red2ladyb
03-29-2012, 01:26 AM
My form is almost perfect. Just need a Submit button that sends info to me via email. I tried inserting a Submit button using website tonight options but it's greyed out. Any ideas? Thanks

red2ladyb
03-29-2012, 03:25 AM
Here's the JavaScript:

<script type="text/javascript">
function calculate() {
var beauty = 0;
var photogenic = 0;
var latebeauty = 0;
var latephotogenic = 0;
var lateoptionals = 0;
if(document.getElementById('chk0').checked)
beauty = parseFloat(document.getElementById('txtPrice0').innerHTML);
if(document.getElementById('chk1').checked)
photogenic = parseFloat(document.getElementById('txtPrice1').innerHTML);
if(document.getElementById('chk2').checked)
latebeauty = parseFloat(document.getElementById('txtPrice2').innerHTML);
if(document.getElementById('chk3').checked)
latephotogenic = parseFloat(document.getElementById('txtPrice3').innerHTML);
if(document.getElementById('chk4').checked)
lateoptionals = parseFloat(document.getElementById('txtPrice4').innerHTML);
document.getElementById('txtTotal').value = beauty + photogenic + latebeauty + latephotogenic + lateoptionals;
}</script>

red2ladyb
03-29-2012, 03:28 AM
Here's the html for my form:


<img alt="" uid="52dd33ff-17d7-4a97-bcb7-9f20c6d98665" src="http://img1.wsimg.com/wst/old/ftb/images/utility/ss_kvk9LoefFL4BS-2F3rS95PzZG3w_gn3bS2z4ywE.gif" class="script" />
<form id="frmOrder">
<table width="668" height="1008" cellspacing="1" cellpadding="5" class="contactFormTable">
<tbody>
<tr>
<td align="center" style="font-size: 8pt; text-decoration: none; font-weight: normal;">
<table width="668" height="135" cellspacing="0" cellpadding="3" border="0" class="contactFormTable">
<tbody>
<tr>
<td style="font-size: 8pt; text-decoration: none; font-weight: normal; padding-bottom: 10px;">
<div>
<font face="Comic Sans MS, cursive"><span style="color: #000000;"><font style="font-size: 10px;">C</font><i><font style="font-size: 10px;"><font style="font-size: 10px;">ontestants must reach their age category by the date of the pageant to compete, unless approved by the director.&nbsp; Contestants for the Miss division must certify that she is not now and never has been married, has never had a marriage annulled, and has never given birth to a child. &nbsp;Contestants for the Ms. division is &nbsp;for women 21 and over who are married or single. &nbsp;Contestants must be a U.S. Citizen.&nbsp; Contestant, parent(s), and guardian(s) agrees to hold harmless the City of Cartersville, pageant director, staff, and facilities from damage through loss, theft or injury caused by participation in the pageant or related activities.&nbsp; Contestants/Parents(s)/guardian(s) agree that the JUDGES DECISIONS ARE FINAL.&nbsp; If a pageant is cancelled, the operator must promptly return contestants’ paid entrance fees.&nbsp; However, a contestant who does not appear for the competition is not legally entitled to a refund of the entrance fee.&nbsp; “The State of Georgia requires bonding or escrow of pageants conducted for the profit of the operators.”</font></font></i></span></font>
</div>
</td>
</tr>
</tbody>
</table>
<p>
<input type="checkbox" id="chk0" onclick="calculate()" />
Early Beauty Entry Fee includes FREE optionals (Paid by 4/27/12)
$<span id="txtPrice0">70</span>
</p>
<p>
<input type="checkbox" id="chk1" onclick="calculate()" />
Early Most Photogenic Entry fee (Paid by 4/27/12)
$<span id="txtPrice1">10</span>
</p>
<p>
<input type="checkbox" id="chk2" onclick="calculate()" />
Late Beauty Entry Fee (Paid after 4/28/12)
$<span id="txtPrice2">80</span>
</p>
<p>
<input type="checkbox" id="chk3" onclick="calculate()" />
Late Most Photogenic Entry Fee (Paid after 4/28/12)
$<span id="txtPrice3">15</span>
</p>
<p>
<input type="checkbox" id="chk4" onclick="calculate()" />
Late Optionals Entry Fee: Prettiest Hair, Eyes, Dress (Paid after 4/28/12)
$<span id="txtPrice4">10</span>
</p>
<p>
<input type="text" id="txtTotal" size="8" /> Total
</p>
<style>
#wstForm_Contact {background-color:transparent;}
.specialEmailField {display: none;visibility:hidden;height:0px;}
.emailDisplay {display: none;visibility:hidden;height:0px;}
</style>
<span id="formLabel_1cbf1"><span id="formLabel_05a4d"></span></span>
<table width="648" height="772" cellspacing="1" cellpadding="3" border="0" class="contactFormTable">
<tbody>
<tr>
<td style="font-size: 8pt; text-align: left;">
<span controlid="formElement_First" id="formLabel_First">First Name:</span>
</td>
<td style="font-size: 8pt; text-align: left;">
<input labelid="formLabel_First" name="First Name" id="formElement_First" size="40" />
</td>
</tr>
<tr>
<td style="font-size: 8pt; text-align: left;">
<span controlid="formElement_Last" id="formLabel_Last">Last Name:</span>
</td>
<td style="font-size: 8pt; text-align: left;">
<input labelid="formLabel_Last" name="Last Name" id="formElement_Last" size="40" />
</td>
</tr>
<tr>
<td style="font-size: 8pt; text-align: left;" colspan="1">
<span id="formLabel_0d812" controlid="formElement_0d812">Age Division:</span>
</td>
<td style="font-size: 8pt; text-align: left;" colspan="1">
<select id="formElement_0d812" name="Age Division" labelid="formLabel_0d812">
<option>
0 - 12 Months (BABY)
</option>
<option>
13 - 24 Months (TINY)
</option>
<option>
25 - 35 Months (WEE)
</option>
<option>
3 - 4 yrs (PETITE)
</option>
<option>
5 - 7 yrs (LITTLE)
</option>
<option>
8 - 10 yrs (YOUNG)
</option>
<option>
11 - 13 yrs (PRE-TEEN)
</option>
<option>
14 - 16 yrs (TEEN)
</option>
<option>
17 - 24 yrs (MISS)
</option>
<option>
21 + (MS)
</option>
</select>
</td>
</tr>
<tr>
<td style="font-size: 8pt; text-align: left;" colspan="1">
<span id="formLabel_8a8e0" controlid="formElement_8a8e0">Date of Birth:</span>
</td>
<td style="font-size: 8pt; text-align: left;" colspan="1">
<input type="text" id="formElement_8a8e0" name="Date of Birth" labelid="formLabel_8a8e0" title="Date of Birth:" />
</td>
</tr>
<tr>
<td style="font-size: 8pt; text-align: left;">
<span controlid="formElement_Street1" id="formLabel_Street1">Address Street:</span>
</td>
<td style="font-size: 8pt; text-align: left;">
<input labelid="formLabel_Street1" name="Address Street" size="40" id="formElement_Street1" />
</td>
</tr>
<tr>
<td style="font-size: 8pt; text-align: left;">
<span controlid="formElement_City" id="formLabel_City">City:</span>
</td>
<td style="font-size: 8pt; text-align: left;">
<input labelid="formLabel_City" name="City" id="formElement_City" size="30" />
</td>
</tr>
<tr>
<td style="font-size: 8pt; text-align: left;">
<span controlid="formElement_Zip" id="formLabel_Zip">Zip Code:</span>
</td>
<td style="font-size: 8pt; text-align: left;">
<input labelid="formLabel_Zip" maxlength="5" name="Zip Code" size="5" id="formElement_Zip" /> (5 digits)
</td>
</tr>

red2ladyb
03-29-2012, 03:29 AM
<tr>
<td style="font-size: 8pt; text-align: left;">
<span controlid="formElement_State" id="formLabel_State">State:</span>
</td>
<td style="font-size: 8pt; text-align: left;">
<select labelid="formLabel_State" name="State" id="formElement_State">
<option selected="selected" value="AL">
AL
</option>
<option value="AK">
AK
</option>
<option value="AZ">
AZ
</option>
<option value="AR">
AR
</option>
<option value="CA">
CA
</option>
<option value="CO">
CO
</option>
<option value="CT">
CT
</option>
<option value="DE">
DE
</option>
<option value="DC">
DC
</option>
<option value="FL">
FL
</option>
<option value="GA">
GA
</option>
<option value="HI">
HI
</option>
<option value="ID">
ID
</option>
<option value="IL">
IL
</option>
<option value="IN">
IN
</option>
<option value="IA">
IA
</option>
<option value="KS">
KS
</option>
<option value="KY">
KY
</option>
<option value="LA">
LA
</option>
<option value="ME">
ME
</option>
<option value="MD">
MD
</option>
<option value="MA">
MA
</option>
<option value="MI">
MI
</option>
<option value="MN">
MN
</option>
<option value="MS">
MS
</option>
<option value="MO">
MO
</option>
<option value="MT">
MT
</option>
<option value="NE">
NE
</option>
<option value="NV">
NV
</option>
<option value="NH">
NH
</option>
<option value="NJ">
NJ
</option>
<option value="NM">
NM
</option>
<option value="NY">
NY
</option>
<option value="NC">
NC
</option>
<option value="ND">
ND
</option>
<option value="OH">
OH
</option>
<option value="OK">
OK
</option>
<option value="OR">
OR
</option>
<option value="PA">
PA
</option>
<option value="RI">
RI
</option>
<option value="SC">
SC
</option>
<option value="SD">
SD
</option>
<option value="TN">
TN
</option>
<option value="TX">
TX
</option>
<option value="UT">
UT
</option>
<option value="VT">
VT
</option>
<option value="VA">
VA
</option>
<option value="WA">
WA
</option>
<option value="WV">
WV
</option>
<option value="WI">
WI
</option>
<option value="WY">
WY
</option>
</select>
</td>
</tr>
<tr>
<td style="font-size: 8pt; text-align: left;">
<span controlid="formElement_EveningPhone" id="formLabel_EveningPhone">Evening Phone:</span>
</td>
<td style="font-size: 8pt; text-align: left;">
<input labelid="formLabel_EveningPhone" name="Evening Phone" id="formElement_EveningPhone" />
</td>
</tr>
<tr>
<td style="font-size: 8pt; text-align: left;" colspan="1">
<span id="formLabel_3cc35" controlid="formElement_3cc35">Email:</span>
</td>
<td style="font-size: 8pt; text-align: left;" colspan="1">
<input type="text" id="formElement_3cc35" name="Email" labelid="formLabel_3cc35" title="Email" size="40" />
</td>
</tr>
<tr>
<td style="font-size: 8pt; text-align: left;" colspan="1">
<span id="formLabel_b27f6" controlid="formElement_b27f6">Parent(s)/Guardian(s):</span>
</td>
<td style="font-size: 8pt; text-align: left;" colspan="1">
<input type="text" id="formElement_b27f6" name="Parent(s)/Guardian(s)" labelid="formLabel_b27f6" title="Parent(s)/Guardian(s)" size="40" />
</td>
</tr>
<tr>
<td style="font-size: 8pt; text-align: left;" colspan="1">
<span id="formLabel_fea1b" controlid="formElement_fea1b">Sponsor(s):</span>
</td>
<td style="font-size: 8pt; text-align: left;" colspan="1">
<input type="text" id="formElement_fea1b" name="Sponsor(s)" labelid="formLabel_fea1b" title="Sponsor(s)" size="40" />
</td>
</tr>
<tr>
<td style="font-size: 8pt; text-align: left;" colspan="1">
<span id="formLabel_3c745" controlid="formElement_3c745">School:</span>
</td>
<td style="font-size: 8pt; text-align: left;" colspan="1">
<input type="text" id="formElement_3c745" name="School" labelid="formLabel_3c745" title="School" size="40" />
</td>
</tr>
<tr>
<td style="font-size: 8pt; text-align: left;" colspan="1">
<span id="formLabel_f009d" controlid="formElement_f009d">Grade:</span>
</td>
<td style="font-size: 8pt; text-align: left;" colspan="1">
<input type="text" id="formElement_f009d" name="Grade" labelid="formLabel_f009d" title="Grade" />
</td>
</tr>
<tr>
<td style="font-size: 8pt; text-align: left;" colspan="1">
<span id="formLabel_e289e" controlid="formElement_e289e">Ambition:</span>
</td>
<td style="font-size: 8pt; text-align: left;" colspan="1">
<input type="text" id="formElement_e289e" name="Ambition" labelid="formLabel_e289e" title="Ambition" size="40" />
</td>
</tr>
<tr>
<td style="font-size: 8pt; text-align: left;" colspan="1">
<span id="formLabel_2474e" controlid="formElement_2474e">Three words that describe you:</span>
</td>
<td style="font-size: 8pt; text-align: left;" colspan="1">
<input type="text" id="formElement_2474e" name="Three words that describe you" labelid="formLabel_2474e" title="Three words that describe you" size="40" />
</td>
</tr>
<tr>
<td style="font-size: 8pt; text-align: left;" colspan="1">
<span id="formLabel_d5a4b" controlid="formElement_d5a4b">Hobbies:</span>
</td>
<td style="font-size: 8pt; text-align: left;" colspan="1">
<input type="text" id="formElement_d5a4b" name="Hobbies" labelid="formLabel_d5a4b" title="Hobbies" size="40" />
</td>
</tr>
<tr>
<td style="font-size: 8pt; text-align: left;" colspan="1">
<span id="formLabel_0b14e" controlid="formElement_0b14e">Person you admire most:</span>
</td>
<td style="font-size: 8pt; text-align: left;" colspan="1">
<input type="text" id="formElement_0b14e" name="Person you admire most" labelid="formLabel_0b14e" title="Person you admire most:" size="40" />
</td>
</tr>
<tr>
<td style="font-size: 8pt; text-align: left;" colspan="1">
<span id="formLabel_f1d66" controlid="formElement_f1d66">Hair Color:</span>
</td>
<td style="font-size: 8pt; text-align: left;" colspan="1">
<input type="text" id="formElement_f1d66" name="Hair Color" labelid="formLabel_f1d66" title="Hair Color" />
</td>
</tr>
<tr>
<td style="font-size: 8pt; text-align: left;" colspan="1">
<span id="formLabel_b42a7" controlid="formElement_b42a7">Eye Color:</span>
</td>
<td style="font-size: 8pt; text-align: left;" colspan="1">
<input type="text" id="formElement_b42a7" name="Eye Color" labelid="formLabel_b42a7" title="Eye Color" /><br />
</td>
</tr>
<tr>
<td style="font-size: 8pt; text-align: left;" colspan="1">
<input type="text" id="formElement_1cbf1" name="PLEASE INITIAL IN THE BOX IF YOU READ THE PARAGRAPH ABOVE REGARD" labelid="formLabel_1cbf1" title="PLEASE INITIAL IN THE BOX IF YOU READ THE PARAGRAPH ABOVE REGARD" size="10" /><span id="formLabel_1cbf1"><br />
PLEASE INITIAL IN THE BOX IF YOU READ THE PARAGRAPH ABOVE REGARD<span id="formLabel_05a4d">ING THE RULES &nbsp;FOR THE MISS/MS. CARTERSVILLE</span></span>
</td>
</tr>
<tr>
<td valign="top"> </td>
</tr>
<tr>
<td valign="top"><br />
</td>
<td valign="top"><br />
</td>
</tr>
</tbody>
</table>
<div contenteditable="false" class="specialEmailField" id="specialField">
<input type="text" tabindex="-1" name="email" id="email" class="emailDisplay" />
</div>
<p>
<input type="submit" onclick="return wstxSubmitForm(this);" value="Submit" id="wstForm_Contact_Submit" /> <input type="reset" value="Reset" id="wstForm_Contact_Reset" />
</p>
</td>
</tr>
</tbody>
</table>
<input type="hidden" value="Entry Form." name="FormMailerSubject" id="FormMailerSubject" /><input type="hidden" value="%wstx.project.BaseUrl%" name="FormMailerRedirect" id="FormMailerRedirect" />
</form>

Old Pedant
03-29-2012, 03:33 AM
My form is almost perfect. Just need a Submit button that sends info to me via email. I tried inserting a Submit button using website tonight options but it's greyed out. Any ideas? Thanks

Well, partly that's what you get for using that somewhat limited tool.

But it is probably doing that because you didn't specify *WHERE* the form data should be sent.

If you are still using just

<form id="frmOrder">
then it is proabably saying "you can't send data to nowhere." (You actually can, but the tool is probably not smart flexible enough to do something out of the ordinary.)

So you probably need


<form id="frmOrder" action="someEmailSendingPage.xxx" method="post">

The email sending page could be ".cgi", ".php", ".asp", etc. If you don't know how to write one, check to see if your web host supplies one.

**********

But the other problem you will have is that none of your checkboxes have names. So they will *NOT* be sent to the form mailer. That may not be strictly needed, but it woudl be a good idea. (Only form fields with names are sent. Id's are ignored.)

Old Pedant
03-29-2012, 03:37 AM
I thought you said you couldn't add a submit button?

What is this, then:


<input type="submit" onclick="return wstxSubmitForm(this);" value="Submit" id="wstForm_Contact_Submit" />

But where is that wstxSubmitForm() function? You don't show it.

red2ladyb
03-29-2012, 04:16 AM
Never Mind!! It's working perfectly since I published. Ditsy newbie leaving you alone now!!

red2ladyb
03-29-2012, 04:19 AM
Great, I entered data in all of the fields, clicked the Submit button and thought it worked. But like you said NOTHING came through. UGH.

red2ladyb
03-29-2012, 04:26 AM
No idea!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum