How do I get a calculation results box to dynamically populate a text box information

[SEMKTG]

I have a calculating form. Once the end user hits the calculate button to get their results, we want those results to dynamically populate a text area to show them information directly related to their score.

The URL: www.sepaincare. com/rate-your-pain-quiz.html

[Dormilich]

you’re not satisfied with what you have?

[SEMKTG]

Actually, it has been requested and I am more of a front end developer. I can tweek code if it's close to what I need. What I haven't been able to find is a text field that will populate dynamically given a value in a calculation field.

If you went to the site, and scrolled down to the lower part; where the "If your scored 0-5". That would be the text shown depending on the value that would be populated in the "Pain Quiz Total" box.

[Dormilich]

that is simply a question of a good condition.

if (6 > score) {
    // show first text
}
else if (12 > score) {
    // show second text
}
else {
    // show third text
}

[SEMKTG]

doesn't' there need to be a variable for the score or would that be

var score=""

to pull whatever the data is from the "score" field?

[SEMKTG]

I have this code but it's not seeing the field value.

<input type="text" class="rsform-input-box" id="total" name="form[Total]" size="20" value=""><br />
<script type="text/javascript">
<!--
var name_element = document.getElementByName('form[Total]');
var total = name_element.value;
if( total <= 5 ){
   document.write("<b>If you score 0-5</b>, you have minimal disability from pain but could be subject to worsening symptoms.");
}else if( (total > 5) && (total < 12) ){
   document.write("<b>If you score 6-11</b>, pain may be affecting your quality of life. Don’t wait for it to take over your life. Talk to one of our double board certified physicians so they can determine what treatment plan will work best for your individual needs, using the least invasive methods possible &ndash; ultimately reducing the need for medication so you can return to your healthy, pain free lifestyle.");
}else {
  document.write("<b>If you score higher than 12</b>, the pain you are experiencing is out of the “normal” range, and the pain symptoms are interfering with your life. Pain can diminish job performance, lower motivation to exercise and prevent you from completing daily tasks, which causes some pain sufferers to get down on themselves or to view their chronic pain as a sign of weakness or a personal defect. Don't go down that road.");
}
//-->
</script>

[Dormilich]

two things. in the elsse if() the total > 5 part is not necessary (if total is not > 5, it is caught in the first if())

second, the total will be calculated based on user interaction (clicking some button). at this time it is too late to use document.write( ). reversely, if you call your that code, total is not yet populated.

[SEMKTG]

I appreciate the input. I adjusted the variable "total" to "score". The main reason for using total, "total" is the input id. I do have a calculate button. If it is to late to use document.write, then what should be used. My depth in javascript is shallow at best. Below is the source for the form.

<form action="http://www.sepaincare.com/rate-your-pain-quiz.html" enctype="multipart/form-data" id="userForm" method="post"><fieldset class="formFieldset">
<legend>Rate Your Pain</legend>
<div style="display: none;" id="rsform_error_3"><p class="formRed">Please complete all required fields!</p></div>
<!-- Do not remove this ID, it is used to identify the page so that the pagination script can work correctly -->
<ol id="rsform_3_page_0" class="formContainer">
	<li class="rsform-block rsform-block-intro">
		<div class="formCaption2"></div>
		<div class="formBody">Knowing when it is necessary to get help can be difficult. We can help you consider treatment options. Take this simple quiz to determine if seeking treatment at SEPC may be the right decision for you:<span class="formClr"></span></div>
		<div class="formDescription"></div>
	</li>
	<li class="rsform-block rsform-block-initial-question">
		<div class="formCaption2"></div>
		<div class="formBody">Please Select Your Gender.<span class="formClr"></span></div>
		<div class="formDescription"></div>
	</li>
	<li class="rsform-block rsform-block-image">
		<div class="formCaption2"></div>
		<div class="formBody"><img width="176" height="200" src="/images/stories/PainQuiz.png"><span class="formClr"></span></div>
		<div class="formDescription"></div>
	</li>
	<li class="rsform-block rsform-block-question-1">
		<div class="formCaption2"></div>
		<div class="formBody"><input type="radio" style="margin: 0px 5px 0px 20px;" id="Question 10" value="Female" name="form[Question 1]"><label for="Question 10">Female</label><input type="radio" style="margin: 0px 5px 0px 20px;" id="Question 11" value="Male" name="form[Question 1]"><label for="Question 11">Male</label></div>
		<div class="formDescription"></div>
	</li>
	<li class="rsform-block rsform-block-radio1">
		<div class="formCaption2">1. On a scale from 1-10, how would you rate your pain?</div>
		<div class="formBody"><input type="radio" style="margin: 0px 5px 0px 20px;" id="radio10" value="0" name="form[radio1]"><label for="radio10">1-3</label><input type="radio" style="margin: 0px 5px 0px 20px;" id="radio11" value="2" name="form[radio1]"><label for="radio11">3-6</label><input type="radio" style="margin: 0px 5px 0px 20px;" id="radio12" value="4" name="form[radio1]"><label for="radio12">6-8</label><input type="radio" style="margin: 0px 5px 0px 20px;" id="radio13" value="6" name="form[radio1]"><label for="radio13">8-10</label></div>
		<div class="formDescription"></div>
	</li>
	<li class="rsform-block rsform-block-radio2">
		<div class="formCaption2">2. True or False: You always feel pain in the part of the body where it originates</div>
		<div class="formBody"><input type="radio" style="margin: 0px 5px 0px 20px;" id="radio20" value="2" name="form[radio2]"><label for="radio20">True</label><input type="radio" style="margin: 0px 5px 0px 20px;" id="radio21" value="4" name="form[radio2]"><label for="radio21">False</label></div>
		<div class="formDescription"></div>
	</li>
	<li class="rsform-block rsform-block-radio3">
		<div class="formCaption2">3. Do you have pain that lasts:</div>
		<div class="formBody"><input type="radio" style="margin: 0px 5px 0px 20px;" id="radio30" value="2" name="form[radio3]"><label for="radio30">2 to 3 Weeks </label><input type="radio" style="margin: 0px 5px 0px 20px;" id="radio31" value="4" name="form[radio3]"><label for="radio31">2 to 3 Months</label><input type="radio" style="margin: 0px 5px 0px 20px;" id="radio32" value="6" name="form[radio3]"><label for="radio32">3 to 6 Months or longer</label></div>
		<div class="formDescription"></div>
	</li>
	<li class="rsform-block rsform-block-radio4">
		<div class="formCaption2">4. Do you limit your activities because of pain? Such as exercising, work or lifting?</div>
		<div class="formBody"><input type="radio" style="margin: 0px 5px 0px 20px;" id="radio40" value="2" name="form[radio4]"><label for="radio40">Yes</label><input type="radio" style="margin: 0px 5px 0px 20px;" id="radio41" value="0" name="form[radio4]"><label for="radio41">No</label></div>
		<div class="formDescription"></div>
	</li>
	<li class="rsform-block rsform-block-radio5">
		<div class="formCaption2">5. Do you experience Pain, numbness or tingling in your arms or legs?</div>
		<div class="formBody"><input type="radio" style="margin: 0px 5px 0px 20px;" id="radio50" value="2" name="form[radio5]"><label for="radio50">Yes</label><input type="radio" style="margin: 0px 5px 0px 20px;" id="radio51" value="0" name="form[radio5]"><label for="radio51">No</label></div>
		<div class="formDescription"></div>
	</li>
	<li class="rsform-block rsform-block-radio6">
		<div class="formCaption2">6. Do you use medications to relieve pain?</div>
		<div class="formBody"><input type="radio" style="margin: 0px 5px 0px 20px;" id="radio60" value="2" name="form[radio6]"><label for="radio60">Yes</label><input type="radio" style="margin: 0px 5px 0px 20px;" id="radio61" value="0" name="form[radio6]"><label for="radio61">No</label></div>
		<div class="formDescription"></div>
	</li>
	<li class="rsform-block rsform-block-radio7">
		<div class="formCaption2">7. Can you tolerate pain without medications?</div>
		<div class="formBody"><input type="radio" style="margin: 0px 5px 0px 20px;" id="radio70" value="0" name="form[radio7]"><label for="radio70">Yes</label><input type="radio" style="margin: 0px 5px 0px 20px;" id="radio71" value="2" name="form[radio7]"><label for="radio71">No</label></div>
		<div class="formDescription"></div>
	</li>
	<li class="rsform-block rsform-block-radio8">
		<div class="formCaption2">8. Does pain cause you to feel depressed, anxious, angry, or fatigued?</div>
		<div class="formBody"><input type="radio" style="margin: 0px 5px 0px 20px;" id="radio80" value="2" name="form[radio8]"><label for="radio80">Yes</label><input type="radio" style="margin: 0px 5px 0px 20px;" id="radio81" value="0" name="form[radio8]"><label for="radio81">No</label></div>
		<div class="formDescription"></div>
	</li>
	<li class="rsform-block rsform-block-radio9">
		<div class="formCaption2">9. Have you discussed your pain with your doctor?</div>
		<div class="formBody"><input type="radio" style="margin: 0px 5px 0px 20px;" id="radio90" value="2" name="form[radio9]"><label for="radio90">Yes</label><input type="radio" style="margin: 0px 5px 0px 20px;" id="radio91" value="0" name="form[radio9]"><label for="radio91">No</label></div>
		<div class="formDescription"></div>
	</li>
	<li class="rsform-block rsform-block-calculate">
		<div class="formCaption2"></div>
		<div class="formBody"><button class="rsform-button" onclick="calculateRadio();" id="Calculate" name="form[Calculate]" type="button">Calculate</button><span class="formClr"></span></div>
		<div class="formDescription"></div>
	</li>
	<li class="rsform-block rsform-block-total">
		<div class="formCaption2">Pain Quiz Total</div>
		<div class="formBody"><input type="text" class="rsform-input-box" id="Total" name="form[Total]" size="20" value=""></div>
		<div class="formDescription"></div>
	</li>
	<li class="rsform-block rsform-block-thank-you">
		<div class="formCaption2"></div>
		<div class="formBody"><p>
We understand that pain can take over your life no matter what the source. If you would like more information about managing pain or information on SEPC and the services we offer, please provide the information below. We respect your privacy and your information will be not be sold or used outside of SEPC.</p> <span class="formClr"></span></div>
		<div class="formDescription"></div>
	</li>
	<li class="rsform-block rsform-block-first-name">
		<div class="formCaption2">First Name</div>
		<div class="formBody"><input type="text" class="rsform-input-box" id="First Name" name="form[First Name]" size="20" value=""><span class="formClr"><span class="formNoError" id="component38">This is a required field.</span></span></div>
		<div class="formDescription"></div>
	</li>
	<li class="rsform-block rsform-block-last-name">
		<div class="formCaption2">Last Name</div>
		<div class="formBody"><input type="text" class="rsform-input-box" id="Last Name" name="form[Last Name]" size="20" value=""><span class="formClr"><span class="formNoError" id="component45">This is a required field.</span></span></div>
		<div class="formDescription"></div>
	</li>
	<li class="rsform-block rsform-block-email">
		<div class="formCaption2">Email</div>
		<div class="formBody"><input type="text" class="rsform-input-box" id="Email" name="form[Email]" size="20" value=""><span class="formClr"><span class="formNoError" id="component39">This is a required field.</span></span></div>
		<div class="formDescription"></div>
	</li>
	<li class="rsform-block rsform-block-additionalinformation">
		<div class="formCaption2"></div>
		<div class="formBody"><input type="checkbox" style="margin: 0px 5px 0px 0px;" id="AdditionalInformation0" value="I am interested in receiving additional information about Southeast Pain Care and would like an email with my result. " name="form[AdditionalInformation][]" checked="checked"><label for="AdditionalInformation0">I am interested in receiving additional information about Southeast Pain Care and would like an email with my result. </label><span class="formClr"><span class="formNoError" id="component118">Invalid Input</span></span></div>
		<div class="formDescription"></div>
	</li>
	<li class="rsform-block rsform-block-submit">
		<div class="formCaption2"></div>
		<div class="formBody"><input type="submit" class="rsform-submit-button" id="Submit" name="form[Submit]" value="Submit"><span class="formClr"></span></div>
		<div class="formDescription"></div>
	</li>
</ol>
</fieldset>
<input type="hidden" value="3" name="form[formId]"></form>

[Dormilich]

it doesn’t matter if you call the variable total or score, just do it consistently.

one note on the HTML, you can put all the inline styling into a <style> section or CSS file, makes your HTML way better readable.

instead of document.write( ) you can use properties like textContent or innerHTML. it is even possible to have all three texts prepared, but hidden and you just display the appropriate one.

[SEMKTG]

Okay, so this is what I have for the javascript. If I use this (which still doesn't function), how do I get it to show up in the form where I want it to. I know I can control it with CSS, but the text area (either hidden or just empty, probably going to use an empty one) needs a variable as well. Does this script need to go on that element or on the form itself?

<script type="text/javascript">
<!--

var total = document.getElementByName('form[Total]');
var score =0;
var score =total.value;
if( score <= 5 ){
   document.textContent("<b>If you score 0-5</b>, you have minimal disability from pain but could be subject to worsening symptoms.");
}else if( score < 12) {
   document.textContent("<b>If you score 6-11</b>, pain may be affecting your quality of life. Don’t wait for it to take over your life. Talk to one of our double board certified physicians so they can determine what treatment plan will work best for your individual needs, using the least invasive methods possible &ndash; ultimately reducing the need for medication so you can return to your healthy, pain free lifestyle.");
}else {
  document.textContent("<b>If you score higher than 12</b>, the pain you are experiencing is out of the “normal” range, and the pain symptoms are interfering with your life. Pain can diminish job performance, lower motivation to exercise and prevent you from completing daily tasks, which causes some pain sufferers to get down on themselves or to view their chronic pain as a sign of weakness or a personal defect. Don't go down that road.");
}
//-->
  </script>

[SEMKTG]

This is the form code I am using to test the script and I am not even getting a calculation from the question. Yes=2 No=0

<!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>
  <script>
function calculateRadio(){

var op9=document.getElementsByName('form[radio9]');

var result=document.getElementById('Total');

result.value=0;

result.value=parseInt(result.value);

for(i=0;i<op9.length;i++)

if(op9[i].checked) result.value=parseInt(result.value)+parseInt(op9[i].value);}

</script>

<script type="text/javascript">
<!--

var total = document.getElementByName('form[Total]');
var score =0;
var score =total.value;
if( score <= 5 ){
   document.textContent("<b>If you score 0-5</b>, you have minimal disability from pain but could be subject to worsening symptoms.");
}else if( score < 12) {
   document.textContent("<b>If you score 6-11</b>, pain may be affecting your quality of life. Don’t wait for it to take over your life. Talk to one of our double board certified physicians so they can determine what treatment plan will work best for your individual needs, using the least invasive methods possible &ndash; ultimately reducing the need for medication so you can return to your healthy, pain free lifestyle.");
}else {
  document.textContent("<b>If you score higher than 12</b>, the pain you are experiencing is out of the “normal” range, and the pain symptoms are interfering with your life. Pain can diminish job performance, lower motivation to exercise and prevent you from completing daily tasks, which causes some pain sufferers to get down on themselves or to view their chronic pain as a sign of weakness or a personal defect. Don't go down that road.");
}
//-->
  </script>
</head>

<body>
<div class="formBody">
<form id="userForm">
<li class="rsform-block rsform-block-radio9">
		<div class="formCaption2">9. Have you discussed your pain with your doctor?</div>
		<div class="formBody"><input type="radio" style="margin: 0px 5px 0px 20px;" id="radio90" value="2" name="form[radio9]"><label for="radio90">Yes</label><input type="radio" style="margin: 0px 5px 0px 20px;" id="radio91" value="0" name="form[radio9]"><label for="radio91">No</label><span class="formClr"><span class="formNoError" id="component33">Invalid Input</span></span></div>
		<div class="formDescription"></div>
	</li>

  <input type="text" class="rsform-input-box" id="total" name="form[Total]" size="20" value="">
  <span class="formClr"><span class="formNoError" id="component43">Invalid Input</span></span>
  </form>
 </div>

  
<p>&nbsp; </p>
<p><input name="Calculate" type="button" onClick="calculateRadio();" value="Calculate" /></p>

  


</body>
</html>

[Dormilich]

textContent is a property of text-bearing HTML elements, not of the document (although it doesn’t cause an error, it doesn’t cause output either).

yet still, the output code runs before the user made his choice, so it would output the text on page load (and would not change afterwards).

and you should definitely see some messages in the Error Console.

[SEMKTG]

I don't understand what that means.

[Dormilich]

what of the 3?

[Rabbit]

It sounds like you're struggling with even the most basic JavaScript. It would probably do you some good to read a tutorial before trying to code. There's a good tutorial with online interpreter here: http://www.w3schools.com/js/default.asp.