[x]
Posted via EE Mobile

Search, ask, and monitor your questions on the go with EE Mobile. Visit Experts Exchange from your mobile device and never be out of touch again.
Question
[x]
Attachment Details
[x]
The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

  • The Grade of the Solution
  • The Zone Rank of the Expert Providing the Solution
  • The Number of Author and Expert Comments
  • The Number of Experts Contributing
  • The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!
8.0

Looking for Javascript form calculator for selected radio buttons, checkboxes and text fields.

Asked by flexativity in JavaScript, Scripting Languages, Hypertext Markup Language (HTML)

Tags: Javascript, Forms, Calculator, Radio Button, Checkbox, Field Values

Hi!

I know there's a nice, simple, clean solution to this, but cutting/pasting snippets from various sources isn't working out for me!

I need to use Javascript to calculate only certain fields in this form, a combination of radio buttons, checkboxes and text fields. I cannot modify the input "names", as those write to specific database fields.  The values that need to be calculated are already in value="" code.

Fields that need to be calculated (instantly upon change) of any field:

val_41222
val_41223
val_41211
val_41212
val_41213
val_41215
val_41216 - this needs an additional calculation to add $100 for every 100 quantity above 1000
val_41217
val_41218

The field val_val_41219 needs to show the running total.  If NaN or if Custom is selected (above), this field needs to say "Custom. We will contact you with estimate.".

Code needs to be as cross-browser compatible as possible, especially IE+, FF, Opera, Chrome and as light-weight as possible (form has several different scripts).

Please let me know if you need additional information - or if you have questions. Thanks and good luck! 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
264:
265:
266:
267:
268:
269:
270:
271:
272:
273:
274:
275:
276:
277:
278:
279:
280:
281:
282:
283:
284:
285:
286:
287:
288:
289:
290:
291:
292:
293:
294:
295:
296:
297:
298:
299:
300:
301:
302:
303:
304:
305:
306:
307:
308:
309:
310:
311:
312:
313:
314:
315:
316:
317:
318:
319:
320:
321:
322:
323:
324:
325:
326:
327:
328:
329:
330:
331:
332:
333:
334:
335:
336:
337:
338:
339:
340:
341:
342:
343:
344:
345:
346:
347:
348:
349:
350:
351:
352:
353:
354:
355:
356:
357:
358:
359:
360:
361:
362:
363:
364:
365:
366:
367:
368:
369:
370:
371:
372:
373:
374:
375:
376:
377:
378:
379:
380:
381:
382:
383:
384:
385:
386:
387:
388:
389:
390:
391:
392:
393:
394:
395:
396:
397:
398:
399:
400:
401:
402:
403:
404:
405:
406:
407:
408:
409:
410:
411:
412:
413:
414:
415:
416:
417:
418:
419:
420:
421:
422:
423:
424:
425:
426:
427:
428:
429:
430:
431:
432:
433:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Flexativity, Inc. - Holiday Ecard Order Form</title>
<link rel="stylesheet" href="calendar.css" />
<script language="JavaScript" src="calendar_us.js" type="text/javascript"></script>
<script type="text/javascript">
function displayMessage() {
if (document.getElementById("val_41223").checked == true){
document.getElementById("messageText").style.display = '';
document.getElementById("messageNumber").style.display = 'none';
}else{
document.getElementById("messageText").style.display = 'none';
document.getElementById("messageNumber").style.display = '';
}
}
</script>
<script type="text/javascript">
function standardTemplate() {
	document.getElementById("standardTemplate").style.display = '';
	document.getElementById("premiumTemplate").style.display = 'none';
}
function premiumTemplate() {
	document.getElementById("standardTemplate").style.display = 'none';
	document.getElementById("premiumTemplate").style.display = '';
}
function customTemplate() {
	document.getElementById("standardTemplate").style.display = 'none';
	document.getElementById("premiumTemplate").style.display = 'none';
}
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
  <form action="http://www.up0.net/functions/mailing_list.html" method="post" id="UPTml26865" name="UPTml26865" onsubmit="return (!(UPTvalidateform(document.UPTml26865)));">
    <input type="hidden" name="submitaction" value="3" />
    <input type="hidden" name="mlid" value="26865" />
    <input type="hidden" name="siteid" value="667281" />
    <input type="hidden" name="tagtype" value="q2" />
    <input type="hidden" name="demographics" value="40818,1,2,41027,14,4,5,6,7,9,40814,-1,41222,41209,41210,41223,41214,41211,41212,41213,41215,41216,41217,41218,41226,41227,41219,41220" />
    <input type="hidden" name="redirection" value="http://www.flexativity.com/ecards/thankyou.html" />
    <input type="hidden" name="uredirection" value="http://" />
    <input type="hidden" name="welcome" value="" />
    <input type="hidden" name="double_optin" value="" />
    <input type="hidden" name="append" value="" />
    <input type="hidden" name="update" value="on" />
    <input type="hidden" name="val_40818" value="Ecard Order Form" />
    <input type="hidden" name="qty" value="1" />
    <input type="hidden" name="activity" value="submit" />
    <tr>
      <td colspan="3"> Please complete the form below to submit your order. There is no commitment to purchase... we will contact you within 24 hours to confirm the options, pricing and timing of your email holiday greeting card (&quot;ecard&quot;).  If you need immediate assistance, please call 775-343-9241 or email <a href="mailto:ecards@flexativity.com?subject=Please contact me immediately about ordering an ecard">ecards@flexativity.com</a>. </td>
    </tr>
    <tr>
      <td><b>First Name</b></td>
      <td colspan="2"><input type="text" name="val_1" size="30" value="" /></td>
    </tr>
    <tr>
      <td><b>Last Name</b></td>
      <td colspan="2"><input type="text" name="val_2" size="30" value="" /></td>
    </tr>
    <tr>
      <td>Job Title</td>
      <td colspan="2"><input type="text" name="val_41027" size="30" value="" /></td>
    </tr>
    <tr>
      <td><b>Company Name</b></td>
      <td colspan="2"><input type="text" name="val_14" size="30" value="" /></td>
    </tr>
    <tr>
      <td>Address</td>
      <td colspan="2"><input type="text" name="val_4" size="30" value="" /></td>
    </tr>
    <tr>
      <td>City</td>
      <td colspan="2"><input type="text" name="val_5" size="30" value="" /></td>
    </tr>
    <tr>
      <td>State/Province</td>
      <td colspan="2"><select name="val_6" size="1">
          <option value="">Please Select</option>
          <option 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>
          <option value="AB" >AB</option>
          <option value="BC" >BC</option>
          <option value="LB" >LB</option>
          <option value="MB" >MB</option>
          <option value="NB" >NB</option>
          <option value="NF" >NF</option>
          <option value="NS" >NS</option>
          <option value="NT" >NT</option>
          <option value="ON" >ON</option>
          <option value="PE" >PE</option>
          <option value="QC" >QC</option>
          <option value="SK" >SK</option>
          <option value="YT" >YT</option>
        </select></td>
    </tr>
    <tr>
      <td>ZIP/Postal Code</td>
      <td colspan="2"><input type="text" name="val_7" size="30" value="" /></td>
    </tr>
    <tr>
      <td><b>Phone</b></td>
      <td colspan="2"><input type="text" name="val_9" size="30" value="" /></td>
    </tr>
    <tr>
      <td>Fax</td>
      <td colspan="2"><input type="text" name="val_40814" size="30" value="" /></td>
    </tr>
    <tr>
      <td><b>Email Address</b></td>
      <td colspan="2"><input type='text' name='email' value='' size='30' /></td>
    </tr>
    <tr>
      <td><b>Template Type</b></td>
      <td colspan="2"><input type="radio" id="standardCheckbox" name="val_41222" onchange="standardTemplate();" onclick="standardTemplate();" value="279.00"  />
        Standard&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="radio" id="premiumCheckbox" name="val_41222" onclick="premiumTemplate();" value="379.00" />
        Premium&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="radio" id="customCheckbox" name="val_41222" onclick="customTemplate();" value="" />
        Custom Design</td>
    </tr>
    <tr id="standardTemplate" style="display:none;">
      <td>Standard Template Number</td>
      <td colspan="2"><table border="0" cellspacing="0" cellpadding="10">
          <tr>
            <td><img width="120" height="175" /><br /></td>
            <td><img width="120" height="175" /><br /></td>
            <td><img width="120" height="175" /><br /></td>
            <td><img width="120" height="175" /><br /></td>
          </tr>
          <tr>
            <td><img width="120" height="175" /><br /></td>
            <td><img width="120" height="175" /><br /></td>
            <td><img width="120" height="175" /><br /></td>
            <td><img width="120" height="175" /><br /></td>
          </tr>
        </table></td>
    </tr>
    <tr id="premiumTemplate" style="display:none;">
      <td>Premium Template Number</td>
      <td colspan="2"><table border="0" cellspacing="0" cellpadding="10">
          <tr>
            <td><img width="120" height="175" /><br /></td>
            <td><img width="120" height="175" /><br /></td>
            <td><img width="120" height="175" /><br /></td>
            <td><img width="120" height="175" /><br /></td>
          </tr>
          <tr>
            <td><img width="120" height="175" /><br /></td>
            <td><img width="120" height="175" /><br /></td>
            <td><img width="120" height="175" /><br /></td>
            <td><img width="120" height="175" /><br /></td>
          </tr>
        </table></td>
    </tr>
    <tr>
      <td>Template Selected</td>
      <td colspan="2"><input type="text" name="val_3" id="val_41209" value="" /></td>
    </tr>
    <tr id="messageNumber">
      <td>Message Number</td>
      <td colspan="2"><input type="radio" name="val_41210" value="M1" />
        &nbsp;Message #1<br />
        <input type="radio" name="val_41210" value="M2" />
        &nbsp;Message #2<br />
        <input type="radio" name="val_41210" value="M3" />
        &nbsp;Message #3<br />
        <input type="radio" name="val_41210" value="M4" />
        &nbsp;Message #4<br />
        <input type="radio" name="val_41210" value="M5" />
        &nbsp;Message #5<br />
        <input type="radio" name="val_41210" value="M6" />
        &nbsp;Message #6<br />
        <input type="radio" name="val_41210" value="M7" />
        &nbsp;Message #7<br />
        <input type="radio" name="val_41210" value="M8" />
        &nbsp;Message #8<br />
        <input type="radio" name="val_41210" value="M9" />
        &nbsp;Message #9<br /></td>
    </tr>
    <tr>
      <td>Personalized Message</td>
      <td colspan="2"><input type="checkbox" name="val_41223" id="val_41223" onclick="displayMessage();" value="25.00" /></td>
    </tr>
    <tr id="messageText" style="display:none;">
      <td>Personalized Message Text</td>
      <td colspan="2"><textarea name="val_41214" id="val_41214" rows="3" cols="50" /></textarea>
        </textarea>
        </textarea>
        </textarea></td>
    </tr>
    <tr>
      <td>Logo</td>
      <td colspan="2"><input type="radio" name="val_41211" value="0.00" />
        None&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="radio" name="val_41211" value="0.00" />
        1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="radio" name="val_41211" value="25.00" />
        2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="radio" name="val_41211" value="50.00" />
        3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="radio" name="val_41211" value="75.00" />
        4&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="radio" name="val_41211" value="100.00" />
        5&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="radio" name="val_41211" value="125.00" />
        6+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    </tr>
    <tr>
      <td>Signature</td>
      <td colspan="2"><input type="radio" name="val_41212" value="0.00" />
        None&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="radio" name="val_41212" value="50.00" />
        1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="radio" name="val_41212" value="60.00" />
        2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="radio" name="val_41212" value="70.00" />
        3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="radio" name="val_41212" value="80.00" />
        4&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="radio" name="val_41212" value="90.00" />
        5&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="radio" name="val_41212" value="100.00" />
        6+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    </tr>
    <tr>
      <td>Personalized Salutation</td>
      <td colspan="2"><input type="checkbox" name="val_41213" value="25.00" /></td>
    </tr>
    <tr>
      <td>Personalized Subject Line</td>
      <td colspan="2"><input type="checkbox" name="val_41215" value="10.00" /></td>
    </tr>
    <tr>
      <td>List Size</td>
      <td colspan="2"><input type="text" name="val_41216" size="30" value="" /></td>
    </tr>
    <tr>
      <td>HTML Only</td>
      <td colspan="2"><input type="checkbox" name="val_41217" value="-100.00" /></td>
    </tr>
    <tr>
      <td>Outlook Template</td>
      <td colspan="2"><input type="checkbox" name="val_41218" value="100.00" /></td>
    </tr>
    <tr>
      <td>Desired Email Date</td>
      <td colspan="2"><input type="text" id="val_41226" name="val_41226" size="20" value="" />
        <script language="JavaScript" type="text/javascript">
	new tcal ({
		// form name
		'formname': 'UPTml26865',
		// input name
		'controlname': 'val_41226'
	});
 
	</script></td>
    </tr>
    <tr>
      <td>Desired Remail Date</td>
      <td><input type="text" id="val_41227" name="val_41227" value="" />
        <script language="JavaScript" type="text/javascript">
	new tcal ({
		// form name
		'formname': 'UPTml26865',
		// input name
		'controlname': 'val_41227'
	});
 
	</script></td>
    </tr>
    <tr>
      <td>Estimated Cost</td>
      <td colspan="2"><input type="text" name="val_41219" id="val_41219" size="30" value="" readonly="readonly" style="border:none;" />
      </td>
    </tr>
    <tr>
      <td>Special Instructions</td>
      <td colspan="2"><textarea name="val_41220" rows="3" cols="50"></textarea></td>
    </tr>
    <tr>
      <td colspan="3"><p>
          <input type="submit" value="Submit Form" />
          &nbsp;&nbsp;&nbsp;&nbsp;
          <input type="reset" value="Reset Form" />
          <br />
          No commitment to purchase. We will contact you within 24 hours to confirm options, pricing and timing.</p></td>
    </tr>
    <script type="text/javascript">//<![CDATA[
function emailCheck (emailStr) {
var emailPat=/^(.+)@(.+)$/;
var specialChars="\\(\\)<>@,;:\\\\\\\"\\.\\[\\]";
var validChars="\[^\\s" + specialChars + "\]";
var quotedUser="(\"[^\"]*\")";
var ipDomainPat=/^\[(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})\]$/;
var atom=validChars + '+';
var word="(" + atom + "|" + quotedUser + ")";
var userPat=new RegExp("^" + word + "(\\." + word + ")*$");
var domainPat=new RegExp("^" + atom + "(\\." + atom +")*$");
var matchArray=emailStr.match(emailPat);
if (matchArray==null) {
    alert("Email address seems incorrect (check @ and .'s)");
    return false;
}
var user=matchArray[1];
var domain=matchArray[2];
if (user.match(userPat)==null) {
    alert("The username doesn't seem to be valid.");
    return false;
}
var IPArray=domain.match(ipDomainPat);
if (IPArray!=null) {
      for (var i=1;i<=4;i++) {
        if (IPArray[i]>255) {
            alert("Destination IP address is invalid!");
        return false;
        }
    }
    return true;
}
var domainArray=domain.match(domainPat);
if (domainArray==null) {
    alert("The domain name doesn't seem to be valid.");
    return false;
}
var atomPat=new RegExp(atom,"g");
var domArr=domain.match(atomPat);
var len=domArr.length;
if ((domArr[domArr.length-1] != "info") &&
    (domArr[domArr.length-1] != "name") &&
    (domArr[domArr.length-1] != "arpa") &&
    (domArr[domArr.length-1] != "coop") &&
    (domArr[domArr.length-1] != "aero")) {
        if (domArr[domArr.length-1].length<2 ||
            domArr[domArr.length-1].length>3) {
                alert("The address must end in a three-letter domain, or two letter country.");
                return false;
        }
}
if (len<2) {
   var errStr="This address is missing a hostname!";
   alert(errStr);
   return false;
}
return true;
}
function UPTvalidateform(thisform)
{
	if (thisform.val_1.value==""){   
alert("Please enter your first name.");
return(true);}if (thisform.val_2.value==""){   
alert("Please enter your last name.");
return(true);}if (thisform.val_14.value==""){   
alert("Please enter your company name.");
return(true);}if (thisform.val_9.value==""){   
alert("Please enter your phone number.");
return(true);}$ok=0;for (var i=0; i < thisform.val_41222.length; i++) {    if (thisform.val_41222[i].checked=="1") {   $ok=1;      break;  }}if ($ok==0){  
alert("Please select a template \- either standard, premium or a custom design.");
  return(true);}
	if (emailCheck(thisform.email.value)) 
	{	
 
        if (document.getElementById('unsubscribe') 
            && !document.getElementById('unsubscribe').checked) {
		    alert('Thank you! We will contact you within 24 hours. If you need immediate assistance, please call 775-343-9241.');
        } else {
            alert('Thank you! We will contact you within 24 hours. If you need immediate assistance, please call 775-343-9241.');
        }
		return false;
	}
	else
	{
		return true;
	}
}
 
//]]>
</script>
  </form>
</table>
</body>
</html>
Attachments:
 
order.html.screenshot.jpg (43 KB) (File Type Details) 
Screenshot of Order Form Needing Javascript Calculation
Screenshot of Order Form Needing Javascript Calculation
 
[+][-]11/09/09 10:42 AM, ID: 25778670Accepted Solution

View this solution now by starting your 30-day free trial. Setting up your free trial is quick, easy, and secure. We will return you to this solution, unlocked, when you're done.

About this solution

Zones: JavaScript, Scripting Languages, Hypertext Markup Language (HTML)
Tags: Javascript, Forms, Calculator, Radio Button, Checkbox, Field Values
Sign Up Now!
Solution Provided By: flexativity
Participating Experts: 1
Solution Grade: A
 
[+][-]11/05/09 11:04 PM, ID: 25757179Expert Comment

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 30-day free trial to view this Expert Comment or ask the Experts your question.

 
 
Loading Advertisement...
20091111-EE-VQP-92 - Hierarchy / EE_QW_3_20080625