Need some help with code

Question

impactdesign 0 Newbie Poster

15 Years Ago

I am trying to create a personality test using javascript and I need help writing a javascript that calculates 4 columns of 12 rows. Each column will have it own total. So column 1 = total 1, column 2 = total 2 and so on. What I would like to do with the totals of each column is: 1st check to see if the sum of all columns equals 120. If not I would need some kind of error message. Secondly, I would like to have an option to email just the totals of each column to me.
I have included what I have so far. Any help on this would be greatly appreciated.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Disc Profile</title>
<script type="text/javascript"><!--
function calc() {
document.disc.dtotal.value =(document.disc.d1.value -0) + (document.disc.d2.value -0) + (document.disc.d3.value -0) + (document.disc.d4.value -0) + (document.disc.d5.value -0) + (document.disc.d6.value -0) + (document.disc.d7.value -0) + (document.disc.d8.value -0) + (document.disc.d9.value -0) + (document.disc.d10.value -0) + (document.disc.d11.value -0) + (document.disc.d12.value -0);
document.disc.itotal.value = (document.disc.i1.value -0) + (document.disc.i2.value -0) + (document.disc.i3.value -0) + (document.disc.i4.value -0) + (document.disc.i5.value -0) + (document.disc.i6.value -0) + (document.disc.i7.value -0) + (document.disc.i8.value -0) + (document.disc.i9.value -0) + (document.disc.i10.value -0) + (document.disc.i11.value -0) + (document.disc.i12.value -0);
document.disc.stotal.value = (document.disc.s1.value -0) + (document.disc.s2.value -0) + (document.disc.s3.value -0) + (document.disc.s4.value -0) + (document.disc.s5.value -0) + (document.disc.s6.value -0) + (document.disc.s7.value -0) + (document.disc.s8.value -0) + (document.disc.s9.value -0) + (document.disc.s10.value -0) + (document.disc.s11.value -0) + (document.disc.s12.value -0);
document.disc.ctotal.value = (document.disc.c1.value -0) + (document.disc.c2.value -0) + (document.disc.c3.value -0) + (document.disc.c4.value -0) + (document.disc.c5.value -0) + (document.disc.c6.value -0) + (document.disc.c7.value -0) + (document.disc.c8.value -0) + (document.disc.c9.value -0) + (document.disc.c10.value -0) + (document.disc.c11.value -0) + (document.disc.c12.value -0);
}
//--></script>
<style type="text/css">
<!--
.style9 {font-family: Verdana, Arial, sans-serif; font-size: 16px; }
.style11 {font-family: Verdana, Arial, sans-serif; font-size: 36px; }
.style13 {font-family: Verdana, Arial, sans-serif; font-size: 12px; }
-->
</style>
</head>

<body>
<span class="style13"><strong>Instructions:</strong><br>
Rank each <strong>horizontal</strong> row of words as either 4, 3, 2, or 1, with 4 being the word that best describes you and 1 being the least like you.  Do not search for what you think is the best response.
There are no right or wrong answers. Use all rankings in each line only once. The first row is an example.</span>
<form name="disc" method="post" action="">
      <table width="100%" border="0" cellspacing="0" cellpadding="3">
        <tr>
          <td bgcolor="#CCCCCC" class="style9">
          <input name="sample" type="text" value="2" size="1" maxlength="1" readonly>          
          Dominant </td>
          <td bgcolor="#CCCCCC" class="style9">
          <input name="sample2" type="text" value="1" size="1" maxlength="1" readonly>          
          Influencing </td>
          <td bgcolor="#CCCCCC" class="style9">
          <input name="sample3" type="text" value="4" size="1" maxlength="1" readonly> 
          Steadfast </td>
          <td bgcolor="#CCCCCC" class="style9">
          <input name="sample4" type="text" value="3" size="1" maxlength="1" readonly>            
          Conscientious </td>
        </tr>
        <tr>
          <td width="23%" class="style9">
          <input name="d1"  size="1" maxlength="1" /> 
          Forceful </td>
          <td width="29%" class="style9">
          <input name="i1" size="1" maxlength="1" /> 
          Lively </td>
          <td width="25%" class="style9">
          <input name="s1" size="1" maxlength="1" /> 
          Modest </td>
          <td width="23%" class="style9">
          <input name="c1" size="1" maxlength="1" /> 
          Tactful </td>
        </tr>
        <tr>
          <td bgcolor="#CCCCCC" class="style9">
          <input name="d2"  size="1" maxlength="1" /> 
          Aggressive </td>
          <td bgcolor="#CCCCCC" class="style9">
          <input name="i2" id="i2"  size="1" maxlength="1" /> 
          Emotional </td>
          <td bgcolor="#CCCCCC" class="style9">
          <input name="s2" id="s2"  size="1" maxlength="1" /> 
          Accommodating </td>
          <td bgcolor="#CCCCCC" class="style9">
          <input name="c2" size="1" maxlength="1" /> 
          Consistant </td>
        </tr>
        <tr>
          <td class="style9">
          <input name="d3"  size="1" maxlength="1" /> 
          Direct </td>
          <td class="style9">
          <input name="i3" size="1" maxlength="1" /> 
          Animated </td>
          <td class="style9">
          <input name="s3" size="1" maxlength="1" /> 
          Agreeable </td>
          <td class="style9">
          <input name="c3" size="1" maxlength="1" /> 
          Accurate </td>
        </tr>
        <tr>
          <td bgcolor="#CCCCCC" class="style9">
          <input name="d4"  size="1" maxlength="1" /> 
          Tough </td>
          <td bgcolor="#CCCCCC" class="style9">
          <input name="i4" size="1" maxlength="1" /> 
          People-oriented </td>
          <td bgcolor="#CCCCCC" class="style9">
          <input name="s4" size="1" maxlength="1" /> 
          Gentle </td>
          <td bgcolor="#CCCCCC" class="style9">
          <input name="c4" size="1" maxlength="1" /> 
          Perfectionist </td>
        </tr>
        <tr>
          <td class="style9">
          <input name="d5"  size="1" maxlength="1" /> 
          Daring </td>
          <td class="style9">
          <input name="i5"  size="1" maxlength="1" /> 
          Impulsive </td>
          <td class="style9">
          <input name="s5" size="1" maxlength="1" /> 
          Kind </td>
          <td class="style9">
          <input name="c5" size="1" maxlength="1" /> 
          Cautious </td>
        </tr>
        <tr>
          <td bgcolor="#CCCCCC" class="style9">
          <input name="d6"  size="1" maxlength="1" /> 
          Competitve </td>
          <td bgcolor="#CCCCCC" class="style9">
          <input name="i6"  size="1" maxlength="1" /> 
          Expressive </td>
          <td bgcolor="#CCCCCC" class="style9">
          <input name="s6" size="1" maxlength="1" /> 
          Supportive </td>
          <td bgcolor="#CCCCCC" class="style9">
          <input name="c6" size="1" maxlength="1" /> 
          Precise </td>
        </tr>
        <tr>
          <td class="style9">
          <input name="d7"  size="1" maxlength="1" /> 
          Risk-taker </td>
          <td class="style9">
          <input name="i7"  size="1" maxlength="1" /> 
          Talkative </td>
          <td class="style9">
          <input name="s7" size="1" maxlength="1" /> 
          Relaxed </td>
          <td class="style9">
          <input name="c7" size="1" maxlength="1" /> 
          Factual </td>
        </tr>
        <tr>
          <td bgcolor="#CCCCCC" class="style9">
          <input name="d8"  size="1" maxlength="1" /> 
          Argumentative </td>
          <td bgcolor="#CCCCCC" class="style9">
          <input name="i8"  size="1" maxlength="1" /> 
          Fun-loving </td>
          <td bgcolor="#CCCCCC" class="style9">
          <input name="s8" size="1" maxlength="1" /> 
          Patient </td>
          <td bgcolor="#CCCCCC" class="style9">
          <input name="c8" size="1" maxlength="1" /> 
          Logical </td>
        </tr>
        <tr>
          <td class="style9">
          <input name="d9"  size="1" maxlength="1" />
          Bold</td>
          <td class="style9">
          <input name="i9"  size="1" maxlength="1" />
          Spontaneous</td>
          <td class="style9">
          <input name="s9" size="1" maxlength="1" /> 
          Stable </td>
          <td class="style9">
          <input name="c9" size="1" maxlength="1" />
          Organized</td>
        </tr>
        <tr>
          <td bgcolor="#CCCCCC" class="style9">
          <input name="d10"  size="1" maxlength="1" />
          Take Charge </td>
          <td bgcolor="#CCCCCC" class="style9">
          <input name="i10"  size="1" maxlength="1" /> 
          Optimistic </td>
          <td bgcolor="#CCCCCC" class="style9">
          <input name="s10" size="1" maxlength="1" /> 
          Peaceful </td>
          <td bgcolor="#CCCCCC" class="style9">
          <input name="c10" size="1" maxlength="1" />
          Conscientious</td>
        </tr>
        <tr>
          <td class="style9">
          <input name="d11"  size="1" maxlength="1" /> 
          Candid </td>
          <td class="style9">
          <input name="i11"  size="1" maxlength="1" /> 
          Cheerful </td>
          <td class="style9">
          <input name="s11" size="1" maxlength="1" /> 
          Loyal </td>
          <td class="style9">
          <input name="c11" size="1" maxlength="1" />
          Serious</td>
        </tr>
        <tr>
          <td bgcolor="#CCCCCC" class="style9">
          <input name="d12"  size="1" maxlength="1" /> 
          Independent </td>
          <td bgcolor="#CCCCCC" class="style9">
          <input name="i12"  size="1" maxlength="1" /> 
          Enthusiastic </td>
          <td bgcolor="#CCCCCC" class="style9">
          <input name="s12" size="1" maxlength="1" /> 
          Good Listener </td>
          <td bgcolor="#CCCCCC" class="style9">
          <input name="c12" size="1" maxlength="1" />
          High Standards </td>
        </tr>
        <tr>
          <td colspan="4"><div align="center" class="style9">
            <input onClick="calc()" type=button value="Calculate Your Score!" name="Input">
            <input type=reset value="Start Over!" name="reset">
          </div></td>
        </tr>
        <tr>
          <td class="style11">D = 
          <input class="style11" name="dtotal" style="border:0px;" size="2" maxlength="2" readonly>
          </td>
          <td class="style11">I 
            = 
          <input class="style11" name="itotal" style="border:0px;" size="2" maxlength="2" readonly>
          </td>
          <td class="style11">S = 
          <input class="style11" name="stotal" style="border:0px;" size="2" maxlength="2" readonly>
          </td>
          <td class="style11">C = 
          <input class="style11" name="ctotal" style="border:0px;" size="2" maxlength="2" readonly>
          </td>
        </tr>
  </table>
</form>
<form name="form1" method="post" action="">
  <table width="100%" border="0" cellspacing="3" cellpadding="3">
    <tr>
      <td><div align="right" class="maintextbold"><b>Your Name:</b></div></td>
      <td><input name=name class="maintext" size="25">
          <b class="maintext"><font color="#FF0000">*Required</font></b></td>
    </tr>
    <tr>
      <td><div align="right" class="maintextbold"><b>Your Email: </b></div></td>
      <td><input name=email class="maintext" id="email" size="25">
          <b class="maintext"><font color="#FF0000">*Required</font></b></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><input type=submit value="Submit Scores" name=Submit>
        <span class="mainBox">
        <input type="hidden" name="recipient" value="email addres">
        <input type="hidden" name="subject" value="Disc Results">
        </span>
        <input type="hidden" name="redirect" value="http://www.mysite.org"></td>
    </tr>
  </table>
</form>
</body>
</html>

javascript

2 Contributors
3 Replies
123 Views
1 Day Discussion Span
Latest Post 15 Years Ago Latest Post by essential

essential 84 Posting Shark

15 Years Ago

In this example -- the user will be alerted if the overAll value of the caculated field's is lower than 120. Ive used some of the fields' in your document and shorten things out!

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="#internal-style" media="all"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Disc Profile</title>
<style id="internal-style" type="text/css" media="all">

html, body, div, th, p {
   border: none;
   font: normal 10pt/120% Verdana, Helvetica, Arial, sans-serif; }   

html { min-width: 800px; max-width: 1024px; width: 100%; }

body { background-color: #FFF; color: #555; text-align: center; width: auto; }

div { margin: 0; padding: 0; }

div form { width: 95%; }

div th input[readonly] { width: 18%; text-align: center; border: none; background-image: none;  }

div input[maxlength] { width: 18%; text-align: center; border: none; background-image: none;  }

div th label { display: block; vertical-align: middle; background-color: #ccc; padding: .2em; }

div td label { display: block; vertical-align: middle; background-color: #F80; padding: .2em;  color: #000; }

div strong { color: #000; }
div caption { text-align: left; padding-left: .5em; padding-bottom: .3em; }

div table { border-collapse: collapse; margin: 0 auto; background-color: #f6f6f6; }

div th, div td { padding: .3em; }

body #wrapper { margin: 0 auto; overflow: hidden; position: relative; }

div .tube { left: 4%; position: relative; text-align: left; }
</style>
<script type="text/javascript">
/* <![CDATA[ */
function calculate() {
var form = document.forms['disc'];

var val =  document.getElementsByTagName('input');

var dTotal = ((val['d1'].value*1) + val['d2'].value*1);

var iTotal = ((val['i1'].value*1) + val['i2'].value*1);

var sTotal = ((val['s1'].value*1) + val['s2'].value*1);

var cTotal = ((val['c1'].value*1) + val['c2'].value*1);

val['dtotal'].value = dTotal;
val['itotal'].value = iTotal;
val['stotal'].value = sTotal;
val['ctotal'].value = cTotal;

val['total'].value = parseInt(dTotal + iTotal + sTotal + cTotal);

if ( parseInt(val['total'].value) < 120  ) {
alert('...Some Message if the score is lower than 120...'); return false; }
else { alert('...Some message if the score is higher 120'); } 
}

/* ]]> */
</script>
</head>
<body>
<div id="wrapper">
<div class="tube">


<form action="javascript:void(0);" id="disc" method="post">
<div>
<table summary="Demo">
<tr>
<th><label><input id="sample" name="sample" type="text" value="2" readonly="readonly" />&#32;Dominant</label></th>

<th><label><input id="sample2" name="sample2" type="text" value="1" readonly="readonly" />&#32;Influencing</label></th>
<th><label><input id="sample3" name="sample3" type="text" value="4" readonly="readonly" />&#32;Steadfast</label></th>
<th><label><input id="sample4" name="sample4" type="text" value="3" readonly="readonly" />&#32;Conscientious</label></th>
</tr>
<tr>
<td><label><input id="d1" name="d1" type="text" maxlength="1" />&#32;Forceful</label></td>

<td><label><input id="i1" name="i1" type="text" maxlength="1" />&#32;Lively</label></td>
<td><label><input id="s1" name="s1" type="text" maxlength="1" />&#32;Modest</label></td>
<td><label><input id="c1" name="c1" type="text" maxlength="1" />&#32;Tactful</label></td>
        </tr>
<tr>
<td><label><input id="d2" name="d2" type="text" maxlength="1" />&#32;Aggressive</label></td>
<td><label><input id="i2" name="i2" type="text" maxlength="1" />&#32;Emotional</label></td>
<td><label><input id="s2" name="s2" type="text" maxlength="1" />&#32;Accommodating</label></td>
<td><label><input id="c2" name="c2" type="text" maxlength="1" />&#32;Consistant</label></td>
        </tr>
<tr>
<th><label>D&#32;=&#32;<input id="dtotal" name="dtotal" type="text" maxlength="2" readonly="readonly" /></label></th>
<th><label>I&#32;=&#32;<input id="itotal" name="itotal" type="text" maxlength="2" readonly="readonly" /></label></th>
<th><label>S&#32;=&#32;<input id="stotal" name="stotal" type="text" maxlength="2" readonly="readonly" /></label></th>
<th><label>C&#32;=&#32;<input id="ctotal" name="ctotal" type="text" maxlength="2" readonly="readonly" /></label></th>
        </tr>
<tr>
<td colspan="4"><input type="button" id="btn" name="btn" onclick="calculate();" value="Caculate Score" /></td>
</tr>
</table>
<input type="hidden" id="total" name="total" value="" />
</div>
</form>
</div> <!-- tube -->
</div> <!-- #wrapper -->
</body>
</html>

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

impactdesign 0 Newbie Poster · Answer 1 · 2009-01-19T08:05:59+00:00

Thank you for helping me solve one of my problems... I like how you recoded the function script. Seems cleaner to me. Also I think the alert code will work fine for me. Thanks. Do you you have any suggestions as to how I can have the results:

val['dtotal'].value = dTotal;
val['itotal'].value = iTotal;
val['stotal'].value = sTotal;
val['ctotal'].value = cTotal;

emailed to me using an form:
Name, Email address etc...

Thanks again!!!

essential 84 Posting Shark Featured Poster · Answer 2 · 2009-01-19T10:42:03+00:00

Hi there!
Regarding about your e-mail request, i suggest that you try the PHP section about this issue.

And for the question about, getting the overall results of the D-I-S-C fields--this can be achieved by providing this changes in your (x)HTML document:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="#internal-style" media="all"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Disc Profile</title>
<style id="internal-style" type="text/css" media="all">

html, body, div, th, p {
   border: none;
   font: normal 10pt/120% Verdana, Helvetica, Arial, sans-serif; }   

html { min-width: 800px; max-width: 1024px; width: 100%; }

body { background-color: #FFF; color: #555; text-align: center; width: auto; }

div { margin: 0; padding: 0; }

div form { width: 95%; }

div th input[readonly] { width: 18%; text-align: center; border: none; background-image: none;  }

div input[maxlength] { width: 18%; text-align: center; border: none; background-image: none;  }

div th label { display: block; vertical-align: middle; background-color: #ccc; padding: .2em; }

div td label { display: block; vertical-align: middle; background-color: #F80; padding: .2em;  color: #000; }

div strong { color: #000; }
div caption { text-align: left; padding-left: .5em; padding-bottom: .3em; }

div table { border-collapse: collapse; margin: 0 auto; background-color: #f6f6f6; }

div th, div td { padding: .3em; }

body #wrapper { margin: 0 auto; overflow: hidden; position: relative; }

div .tube { left: 4%; position: relative; text-align: left; }
</style>
<script type="text/javascript">
/* <![CDATA[ */
function calculate() {
var form = document.forms['disc'];

var val =  document.getElementsByTagName('input');

var dTotal = ((val['d1'].value*1) + val['d2'].value*1);

var iTotal = ((val['i1'].value*1) + val['i2'].value*1);

var sTotal = ((val['s1'].value*1) + val['s2'].value*1);

var cTotal = ((val['c1'].value*1) + val['c2'].value*1);

val['dtotal'].value = dTotal;
val['itotal'].value = iTotal;
val['stotal'].value = sTotal;
val['ctotal'].value = cTotal;
 
/* This variable takes the overall total of the (D-I-S-C) fields */ 
var overallTotal = parseInt(dTotal + iTotal + sTotal + cTotal);

val['total'].value = overallTotal;

/* This is the placeHolder of the gathered Score's */
document.getElementById('showScore').innerText = overallTotal;

/* You may increase any desired values' for this condition. But in this example im using 12 as my reference n# or highest score to test the results... */

if ( parseInt(val['total'].value) < 12  ) {
alert('...Some Message if the score is lower than 12...'); return false; }
else { alert('...Some message if the score is higher 12'); } 

}

/* ]]> */
</script>
</head>
<body>
<div id="wrapper">
<div class="tube">


<form action="javascript:void(0);" id="disc" method="post">
<div>
<table summary="Demo">
<tr>
<th><label><input id="sample" name="sample" type="text" value="2" readonly="readonly" />&#32;Dominant</label></th>

<th><label><input id="sample2" name="sample2" type="text" value="1" readonly="readonly" />&#32;Influencing</label></th>
<th><label><input id="sample3" name="sample3" type="text" value="4" readonly="readonly" />&#32;Steadfast</label></th>
<th><label><input id="sample4" name="sample4" type="text" value="3" readonly="readonly" />&#32;Conscientious</label></th>
</tr>
<tr>
<td><label><input id="d1" name="d1" type="text" maxlength="1" />&#32;Forceful</label></td>

<td><label><input id="i1" name="i1" type="text" maxlength="1" />&#32;Lively</label></td>
<td><label><input id="s1" name="s1" type="text" maxlength="1" />&#32;Modest</label></td>
<td><label><input id="c1" name="c1" type="text" maxlength="1" />&#32;Tactful</label></td>
        </tr>
<tr>
<td><label><input id="d2" name="d2" type="text" maxlength="1" />&#32;Aggressive</label></td>
<td><label><input id="i2" name="i2" type="text" maxlength="1" />&#32;Emotional</label></td>
<td><label><input id="s2" name="s2" type="text" maxlength="1" />&#32;Accommodating</label></td>
<td><label><input id="c2" name="c2" type="text" maxlength="1" />&#32;Consistant</label></td>
        </tr>
<tr>
<th><label>D&#32;=&#32;<input id="dtotal" name="dtotal" type="text" maxlength="2" readonly="readonly" /></label></th>
<th><label>I&#32;=&#32;<input id="itotal" name="itotal" type="text" maxlength="2" readonly="readonly" /></label></th>
<th><label>S&#32;=&#32;<input id="stotal" name="stotal" type="text" maxlength="2" readonly="readonly" /></label></th>
<th><label>C&#32;=&#32;<input id="ctotal" name="ctotal" type="text" maxlength="2" readonly="readonly" /></label></th>
        </tr>
<tr>
<td colspan="4"><input type="button" id="btn" name="btn" onclick="calculate();" value="Caculate Score" /></td>
</tr>
</table>
<!-- Changes take place starting from this block -->
<p><strong>Your Total is: <span id="showScore"></span></strong></p>
<input type="hidden" id="total" name="total" value="" />
</div>
</form>
</div> <!-- tube -->
</div> <!-- #wrapper -->
</body>
</html>

hope it does solved, your issue and good day to you...