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
19  2920  Dormilich 8,658
Recognized Expert Moderator Expert
you’re not satisfied with what you have?
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 8,658
Recognized Expert Moderator Expert
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
-
}
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?
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 – 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 8,658
Recognized Expert Moderator Expert
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.
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. Dormilich 8,658
Recognized Expert Moderator Expert
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.
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 – 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>
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 – 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> </p>
-
<p><input name="Calculate" type="button" onClick="calculateRadio();" value="Calculate" /></p>
-
-
-
-
-
</body>
-
</html>
-
-
Dormilich 8,658
Recognized Expert Moderator Expert 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.
I don't understand what that means.
Dormilich 8,658
Recognized Expert Moderator Expert Rabbit 12,516
Recognized Expert Moderator MVP
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.
Instead of dcument.write, you stated to use textContent. I don't know where that goes. I understand the basics of javascript and can usually bend it to do what I want/need it to do. I am a designer tasked with this since the developer stated "getting a dynamic text area to show a particular snippit of data to show a different result depending on the content of a calculate box is " over his head"". That doesn't leave me with much.
I know when you state,
1. fill out form questions
2. hit calculate to get your score (this can't be a test since two of the questions have variables assigned to them without anything being correct or incorrect)
3. have an area just below the calculated results box show one of three results. 0-5, 6-11, higher than 12.
I also know there are about 50 different ways to write it up using javascript. But trying to piece things together from this tutorial and that tutorial is frustrating because they don't actually go through what I need to do.
If you can take a credit card payment, and are willing to get the code to work for the calculated total text box to show the associated results with a <p>content<a href>link</a></p>. Let me know what your rates are. The person who is supposedly heading this campaign up is so lacking they don't even take my knowledge base into consideration.
It's almost like... well you must be a master mechanic, you change your own oil...
So, if you can take a credit card payment; let me know what you would charge us for this and I will run it by our director.
Thanks,
Dormilich 8,658
Recognized Expert Moderator Expert HTMLElement::textContent
assign text to a HTML element. - <p id="test">some text</p>
- var p = document.getElementById("test");
-
// assign new text
-
p.textContent = "some new text";
-
// add text
-
p.textContent += " and some further text";
HTMLElement::innerHTML
works similar to textContent, only that the passed string is parsed for HTML code. the comparison code
since the total value is calculated when the user presses the calculate-button, the comparison code (that has to work on the total value) must obviously (at least I thought that were obvious) also be put in the onclick handler function calculateRadio().
I appreciate the feedback. It does help out a lot. I got the calculation button to calculate the question. Once clicked the "Sample Text" does switch out (which is leaps and bounds from where I started).
Only problem is the text that is shown when the button is clicked is the
"<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."
It doesn't matter what I do or what I change the variable to it either shows nothing or what is just above. It seems like the "if" statement isn't running and it's just going past all of the variables the the "else" statement that doesn't have any.
Thanks again for all of your help with this. -
<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="component132">Invalid Input</span></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="">
-
<span class="formClr"><span class="formNoError" id="component134">Invalid Input</span></span></div>
-
<div class="formDescription"></div>
-
</li>
-
<button class="rsform-button" onclick="calculateRadio();" id="Calculate" name="form[Calculate]" type="button">Calculate</button>
-
<p id="test">Sample Text</p>
-
</form>
-
<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);
-
-
-
-
var p = document.getElementById("test");
-
var total=document.getElementById('Total');
-
if (total <= 5) {
-
// show first text
-
p.textContent="<b>If you score 0-5</b>, you have minimal disability from pain but could be subject to worsening symptoms.";
-
}
-
else if (total ==6 && total <= 12) {
-
// show second text
-
p.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 – ultimately reducing the need for medication so you can return to your healthy, pain free lifestyle.";
-
}
-
else {
-
// show third text
-
p.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.";
-
}
-
document.getElementById("Total").innerHTML=total;
-
-
}
-
</script>
-
</div>
-
</body>
-
Dormilich 8,658
Recognized Expert Moderator Expert
I don’t know how many time I have to repeat it, but the else if() part needs only one condition (cf. post #7). and currently the else if() will only trigger, if total = 6.
you might also have missed that textContent only inserts text, but not HTML code.
Thanks for the help. I finally got it. One of the variables was wrong so it wasn't pulling the calculated total to show the correct results. I also got the links to work as well, and it's not to buggy.
Sign in to post your reply or Sign up for a free account.
Similar topics | |
by: sumGirl |
last post by:
Can someone demonstrate a SIMPLE way to do this that does not require
additional functions or stored procedures to be created? Lets say I
want to execute the following simple query - "select * from...
|
by: michael |
last post by:
I have an html text string within a div, eg.:
<div id="example">Text text text</div>
I know its easy to change styles by using getElementById - for example:
...
|
by: godber |
last post by:
I need to populate text boxes for instance with employee information
using their unique employee works number selected from a combo box.
Can anyone help, I am told thru visual basic this can be...
|
by: Stu |
last post by:
Hi,
I am writing a content management system that has to have W3C compliant
output. The pages are template driven and there are special strings within
the template to be used as placeholders for...
|
by: TCook |
last post by:
Hello All,
I need to try to programmatically and dynamically populate some lists on a
web page. I wanted to know the best advised way to pass the information to
the web page. For example,...
| | |
by: Yi Chen |
last post by:
We have a drop down list on a PHP page, with several product names, and
when people click one item, we will refresh the same page with the
product name as parameter, and in turn we want to include...
|
by: mcnews |
last post by:
is there any way to use something like sendkeys to auto-populate text
boxes on an existing web page?
assuming i can assemble the correct data can i use a sendkey type of
function to tab through...
|
by: pskvenkat |
last post by:
Hi this is venkat,
I am Using Asp.net (C#) . Can you give me the details for how to store the dynamically created text box value into sql server database. pls give me a code if any?
|
by: adarshyam |
last post by:
can anybody tel me how to clear values from dynamically created text boxes?? using a clear button.. this is the code used to create dynamic text boxes.. if i press clear button then it must clear all...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
| | |
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| | |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...
| |
