View Full Version : Need help processing a form within the same page...
gendou
02-25-2004, 05:28 PM
I posted a questoin about this last week and have been working with the problem since. firstly, i'm new to javascript but i've been pounding it into my head for days now and it's starting to look familiar but i'm still a way from really getting ok at writing it. so here's my problem (this is for my job.. btw so i'm kind of pressed to get it done soon)
i have a form with 2 sections. section 1 is several drop down selections and section 2 is a set of yes/no radio buttons. i want to pass the textual values into a function that will step through each value (ex. Q1=Preschool, Q2=Literate, ... Q10=yes, Q11=no, etc). there are 18 questions. i have managed to build the form and get a little functionality into it because when i click the 'Process' button, i can see all of the variable names and their values in the address bar so i know it took the values and sent them (to nowhere at the moment). i have an array that contains 7 variables to gather these values once they're converted to numbers.. then the array is to be sorted and displayed in reverse descending order (bigger number to smaller number).
what i need to do now is have those values stepped through and evaluated…
example in pseudcode:
-----
devices new Array(DV1, DV2, DV3, DV4, DV5, DV6, DV7);
function evalQ(whatgoeshere?) {
if (Q1=Preschool) {
add 1 to DV1;
add 1 to DV2;
add 1 to DV6; }
else if (Q1=Elementary) {
add 1 to DV3;
add 1 to DV4;
add 1 to DV1; }
else if (Q1=TeenAdult) {
add 1 to DV2;
add 1 to DV4;
add 1 to DV5;
add 1 to DV6; }
}
/* the function should iterate through each of the 18 questions, evaluate which value was passed to the Q* variable, and add the point to the correct array variables. next... */
sort devices /*list in descending order*/
-------
i'll post the code i have so far (it's not much and wrong for sure.)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title>Device Evaluation Form</title>
<script language="Javascript">
devices new Array(DV4, MT4, WRT, DMO, TXL, HND, PLM);
inputs = document.form['Eval'].getElementsByTagName('input');
function addPoints(device) {
if (device == "Emergent")
{ for(var i=0; i<=inputs.length; i++) { DV4 = + DV4[i];}
}
}
document.write(DV4);
</script>
</head>
<body>
<form name="Eval">
---Section 1---------<br><br>
Age? <select name="Q1"><br>
<option value="Preschool">Preschool</option>
<option value="Elementary">Elementary</option>
<option value="TeenAdult">Teen/Adult</option>
</select>
<br>
Literacy? <select name="Q2">
<option value="Emergent">Emergent</option>
<option value="PreLiterate">PreLiterate</option>
<option value="Literate">Literate</option>
</select>
<br>
Cognition? <select name="Q3">
<option value="NoneMild">None/Mild</option>
<option value="Moderate">Moderate</option>
<option value="Severe">Severe</option>
</select>
<br>
Physical State? <select name="Q4">
<option value="PhysDegenerate">Degenerate</option>
<option value="PhysStatic">Static</option>
<option value="PhysImproving">Improving</option>
</select>
<br>
Dexterity? <select name="Q5">
<option value="Finemotor">Fine Motor</option>
<option value="Impaired">Impaired</option>
<option value="SevImpaired">Severely Impaired</option>
</select>
<br>
Mental State? <select name="Q6">
<option value="MentlDegen">Degenerative</option>
<option value="MentlStatic">Static</option>
<option value="MentlImproving">Improving</option>
</select>
<br>
Support? <select name="Q7">
<option value="Self">Self</option>
<option value="SpsePrnt">Spouse/Parent</option>
<option value="GoodTeam">Good Team</option>
</select>
<br>
Payor? <select name="Q8">
<option value="PrvtIns">Private Ins.</option>
<option value="Govt">Government</option>
<option value="School">School</option>
</select>
<br>
<br><br>
---Section 2---------<br><br>
3rd Party Software?
<input type="radio" value="yes" name="Q9">Yes
<input type="radio" value="no" name="Q9">No<br>
<br>
Email Address?
<input type="radio" value="yes"name="Q10">Yes
<input type="radio" value="no"name="Q10">No<br>
<br>
Internet Access?
<input type="radio" value="yes"name="Q11">Yes
<input type="radio" value="yes"name="Q11">No<br>
<br>
Computer Access?
<input type="radio" value="yes"name="Q12">Yes
<input type="radio" value="yes"name="Q12">No<br>
<br>
Phone Access?
<input type="radio" value="yes"name="Q13">Yes
<input type="radio" value="yes"name="Q13">No<br>
<br>
User Programming?
<input type="radio" value="yes"name="Q14">Yes
<input type="radio" value="yes"name="Q14">No<br>
<br>
ECU?
<input type="radio" value="yes"name="Q15">Yes
<input type="radio" value="yes"name="Q15">No<br>
<br>
Simplicity?
<input type="radio" value="yes"name="Q16">Yes
<input type="radio" value="yes"name="Q16">No<br>
<br>
Light to Carry?
<input type="radio" value="yes"name="Q17">Yes
<input type="radio" value="yes"name="Q17">No<br>
<br>
Vision Problems?
<input type="radio" value="yes"name="Q18">Yes
<input type="radio" value="yes"name="Q18">No<br>
<br>
<input type="submit" name="Process" value="Process" onclick="return addPoints(this); return false;">
</form>
</body>
</html>
i could use some help with this as i have no formal training in javascript. i took an intro to programming course so i'm familiar with the concepts of looping and functions (sorta) and so on.
thanks for the help!
Aaron
Willy Duitt
02-25-2004, 05:56 PM
Originally posted by gendou
i have an array that contains 7 variables to gather these values once they're converted to numbers..
I do not see an array that assigns values to your textual descriptions. :confused:
I would suggest assigning numeric values for each form element and use a function to write the result to the innerHTML of a previously empty divison.
eg:(note input values)
Age? <select name="Q1"><br>
<option value="110">Preschool</option>
<option value="120">Elementary</option>
<option value="130">Teen/Adult</option>
</select>
<br>
Literacy? <select name="Q2">
<option value="210">Emergent</option>
<option value="220">PreLiterate</option>
<option value="230">Literate</option>
Email Address?
<input type="radio" name="EM" value="10"name="Q10">Yes
<input type="radio" name="EM" value="11"name="Q10">No<br>
<br>
Internet Access?
<input type="radio" name="IA" value="20"name="Q11">Yes
<input type="radio" name="IA" value="21"name="Q11">No<br>
Also, please note that each group of radio buttons needs to be named so that it creates an array of radio buttons and you can only choose one or the other.
If you choose to go this route. Make these changes and post back and I will try to help you with the rest.
.....Willy
gendou
02-25-2004, 06:47 PM
as i said earlier, i'm fairly new to js and not a coder by nature.
i don't have an array that changes the textual descriptions to numbers because if you can do that, well, i don't know how.
another reason there isn't one is because the js code in the <head> isn't nearly complete. that's what i was trying to describe with the pseudocode.
also, in the radio button area, there are unique names to each set of radio buttons, hence the 'name="Q10" ', etc right beside the 'value="yes" ' attribute.
what i'm asking about is how to find the selected answer from each question, add 1 to each array element that it should, then at the end display the array values in a table listed in descending order. i've tried to be as detailed in what i'm trying to accomplish and how i was thinking about performing it. it's not the form building that i have a problem with, it's how to get js to evaluate the form information, calculate it and display the totals of each array element.
thanks,
aaron
gendou
02-25-2004, 07:05 PM
here's a bit of code i just wrote, i hope it makes some sense. it doesn't do anything (big surprise) when i press 'Process'. i don't know what i'm doing with this code. i know what i WANT to do.. i just don't know how. the line in the script starting with "inputs =", that line is there based on something Vladdy suggested. he said to use binary for the values, and that's like chinese to me.. so i saw some things done in other examples and i've been trying to understand how to make this work. if someone can tell me how to get the text value from the form, convert it to a number, then add 1 to each appropriate array element, i think i can make it list them. i don't know. i'm really frustrated and need help...
thanks,
aaron
script language="Javascript">
devices new Array(DV4, MT4, TXL, WRT, DMO, HND, PLM);
inputs = document.form['Eval'].getElementsByTagName('input');
function addPoints(device) {
if (Q1 == "Preschool") {
devices[5] = devices[5] + 1;
devices[3] = devices[3] + 1;
devices[2] = devices[2] + 1;
devices[1] = devices[1] + 1; }
else if (Q1 == "Elementary") {
devices[7] = devices[7] + 1;
devices[6] = devices[6] + 1;
devices[5] = devices[5] + 1;
devices[4] = devices[4] + 1;
devices[3] = devices[3] + 1;
devices[2] = devices[2] + 1;
devices[1] = devices[1] + 1; }
else if (Q1 == "TeenAdult") {
devices[7] = devices[7] + 1;
devices[6] = devices[6] + 1;
devices[5] = devices[5] + 1;
devices[4] = devices[4] + 1;
devices[3] = devices[3] + 1;
devices[2] = devices[2] + 1;
devices[1] = devices[1] + 1; }
}
</script>
Willy Duitt
02-25-2004, 07:12 PM
I apologize. I did not notice that you had named your buttons. :o
Perhaps I should take my leave because I still do not quite understand how you wish to evaluate the values. With my limitted understanding, I think you should be passing your add one to to a variable not an array.
eg:
function evalQ() {
var DV1 = 0;
var DV2 = 0;
var DV3 = 0;
var DV4 = 0;
var DV5 = 0;
var DV6 = 0;
var DV7 = 0;
if (document.forms[0].Q1.selectedIndex.value == 'Preschool'){
DV1++;
DV2++;
DV6++;
}
.....Willy
gendou
02-25-2004, 07:15 PM
ok. i see what you mean.
the reason i wanted an array was because i can use it the sort() method to list the numbers in descending order.
the purpose if this form is to gather information about a prospective user and produce a rating of all the devices, listing the best to the worst. it's to give a suggestion to sales reps as to what to recommend to each individual user.
thanks,
aaron
Willy Duitt
02-25-2004, 07:28 PM
Give ma a half-hour or so and I'll try to work up an example. I think we can pass the values as arguements thru the function to an array. If my secretary leaves me alone it shouldn't take too long..... :p
.....Willy
gendou
02-25-2004, 08:09 PM
thanks alot! most of the javascript tutorials i'm finding on the web are the basics, alert, document.write, etc.. trying to stumble through this without a good knowledge of js is very difficult.. i'm going to go to the bookstore tonight and try to find a better js book than the crappy one i have now (javascript 1.5 by example).
any links to some more advanced js tutorials would help me in the future too.. :P
sorry to asking to be taken by the hand practically, but it's mostly new to me.
thanks,
aaron
Willy Duitt
02-25-2004, 08:48 PM
I never read a book. Lernded by lurking in the Forum. :p
Anyway, this is not fully tested but try this:
Pass your values to the function in each select.
You'll need to do something else for the radio buttons,
but I don't see what those values are.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title>Device Evaluation Form</title>
<script type="text/javascript">
<!--//
var DV = new Array();
DV[0] = 0;
DV[1] = 0;
DV[2] = 0;
DV[3] = 0;
DV[4] = 0;
DV[5] = 0;
DV[6] = 0;
DV[7] = 0;
function addPoints(which){
var num = which.split(',');
for(var i=0; i<num.length; i++){
for(var j=0; j<DV.length-1; j++){
if(j == num[i]){
DV[j]++;
}
}
}
//alert('DV'+j+' value='+DV[j])
//alert(DV[5])
}
//-->
</script>
</head>
<body>
<form name="Eval">
---Section 1---------<br><br>
Age? <select name="Q1" onchange="addPoints(this[this.selectedIndex].value)"><br>
<option value="0">Choose Age</option>
<option value="1,2,6">Preschool</option>
<option value="1,3,4">Elementary</option>
<option value="3,5,6">Teen/Adult</option>
</select>
</form>
.....Willy
gendou
02-25-2004, 08:57 PM
thanks alot Willy, i get an idea of what you're doing with it. i'll tinker with it and see if i can make it work.
it's going to take me a while to figure it out, but thanks for taking the time to try and help a new guy :)
-aaron
Willy Duitt
02-25-2004, 09:10 PM
Your Welcome;
Glad I could help :thumbsup:
I just ran a few more test and that function seems to work well.
For now, I made the DV array a global variable because I was
unsure what you would do with your radio buttons when you get
that far.
FWIW: If you are familar with Bookmarklets. Here is one which you can
read the values of global variables as you run the script on the page.
(be sure the forum does not add any line breaks. Everything must be on one line)
javascript:var globalvar=prompt('Read which variable?','');if(globalvar)try{alert(globalvar+' = '+eval(globalvar)+' ('+typeof(eval(globalvar))+')');}catch(e){alert('Global variable \''+globalvar+'\' does not exist.');}
If you are unsure of how to use a bookmarklet. While on the
page you are testing. Paste the bookmarklet script into the
address bar and press enter/go. You will be prompted for the
variable name you wish to test. In this case (DV)
.....Willy
BTW: Once you have run the script in the address bar. You
can drag the address bar icon to your favorites folder and
save it for future one click testing. (ignore the warning dialog)
gendou
02-25-2004, 09:15 PM
i have the script you wrote set aside. i pasted it into a document and it didn't do anything. i added the Process button, but same thing. did you change anything in the form? i can see how some of the logic works, it's just a matter of figuring out how to gather all the info, then spit out the list.... *grumble*...
i'm reading a tutorial on webmonkey by a guy named Thau.. his seem more complicated. maybe i'll get something from them that i can combine with what you gave me.
thanks alot!
aaron
Willy Duitt
02-25-2004, 09:30 PM
I only used your first form select because those are the only ones you provided values for in the psuedo code of your first post.
My example uses an onchange event on the select just as an example. You really need to fire the addPoints function when the form is submitted to prevent someone from corrupting the values by changing their mind.
If you assign values to the rest of your form elements so I have something to work with. I will try to work up something else for you later this evening.
.....Willy
gendou
02-25-2004, 09:45 PM
here's my complete form. i changed the radio button values to 1 for yes and 0 for no. no real need for them to be strings. so in their case, it would be something like,
if (Q16 == 1) { add 1 to DV2, DV3, DV5, DV7 }
else
{ move on to Q17 }
if ( Q17 == 1) etc....
i'm not sure how to use split.. and i'm unsure what (which) does in the parameter of addPoints. (sorry, please be patient wih me :) )
also, the alert methods aren't doing anything when i run the script (probably something i don't know)
<form name="Eval">
---Section 1---------<br><br>
Age? <select name="Q1"><br>
<option value="Preschool">Preschool</option>
<option value="Elementary">Elementary</option>
<option value="TeenAdult">Teen/Adult</option>
</select>
<br>
Literacy? <select name="Q2">
<option value="Emergent">Emergent</option>
<option value="PreLiterate">PreLiterate</option>
<option value="Literate">Literate</option>
</select>
<br>
Cognition? <select name="Q3">
<option value="NoneMild">None/Mild</option>
<option value="Moderate">Moderate</option>
<option value="Severe">Severe</option>
</select>
<br>
Physical State? <select name="Q4">
<option value="PhysDegenerate">Degenerate</option>
<option value="PhysStatic">Static</option>
<option value="PhysImproving">Improving</option>
</select>
<br>
Dexterity? <select name="Q5">
<option value="Finemotor">Fine Motor</option>
<option value="Impaired">Impaired</option>
<option value="SevImpaired">Severely Impaired</option>
</select>
<br>
Mental State? <select name="Q6">
<option value="MentlDegen">Degenerative</option>
<option value="MentlStatic">Static</option>
<option value="MentlImproving">Improving</option>
</select>
<br>
Support? <select name="Q7">
<option value="Self">Self</option>
<option value="SpsePrnt">Spouse/Parent</option>
<option value="GoodTeam">Good Team</option>
</select>
<br>
Payor? <select name="Q8">
<option value="PrvtIns">Private Ins.</option>
<option value="Govt">Government</option>
<option value="School">School</option>
</select>
<br>
<br><br>
---Section 2---------<br><br>
3rd Party Software?
<input type="radio" value=1 name="Q9">Yes
<input type="radio" value=0 name="Q9">No<br>
<br>
Email Address?
<input type="radio" value=1 name="Q10">Yes
<input type="radio" value=0 name="Q10">No<br>
<br>
Internet Access?
<input type="radio" value=1 name="Q11">Yes
<input type="radio" value=0 name="Q11">No<br>
<br>
Computer Access?
<input type="radio" value=1 name="Q12">Yes
<input type="radio" value="0 name="Q12">No<br>
<br>
Phone Access?
<input type="radio" value=1 name="Q13">Yes
<input type="radio" value=0 name="Q13">No<br>
<br>
User Programming?
<input type="radio" value=1 name="Q14">Yes
<input type="radio" value=0 name="Q14">No<br>
<br>
ECU?
<input type="radio" value=1 name="Q15">Yes
<input type="radio" value=0 name="Q15">No<br>
<br>
Simplicity?
<input type="radio" value=1 name="Q16">Yes
<input type="radio" value=0 name="Q16">No<br>
<br>
Light to Carry?
<input type="radio" value=1 name="Q17">Yes
<input type="radio" value=0 name="Q17">No<br>
<br>
Vision Problems?
<input type="radio" value=1 name="Q18">Yes
<input type="radio" value=0 name="Q18">No<br>
<br>
<input type="submit" name="Process" value="Process" onclick="return addPoints(this);">
</form>
thanks again ...and again and again...
:)
-aaron
gendou
02-25-2004, 09:48 PM
i just looked at your code again.. and i didn't get it the first time i looked at it, but i think i get it now, maybe?
the values in the <option> tags.. you have 1,2,6[color] ... is that to represent the array elements or am i off there? trying to follow along...
Willy Duitt
02-25-2004, 10:11 PM
Yes, those numbers represent the DV1, DV2, DV3 .....
variables you wanted to add one to which was represented in the psuedo code of your first post.
if (Q1=Preschool) {
add 1 to DV1;
add 1 to DV2;
add 1 to DV6; }
else if (Q1=Elementary) {
add 1 to DV3;
add 1 to DV4;
add 1 to DV1; }
else if (Q1=TeenAdult) {
add 1 to DV2;
add 1 to DV4;
add 1 to DV5;
add 1 to DV6;
However, I did miss the fourth (DV6) in the TeenAdult else if statement but it doesn't matter. The script is written in such a way that you can pass as many DV #'s as you would like and there is no need for all of those conditional statements.
.....Willy
Willy Duitt
02-25-2004, 10:15 PM
If you will add all of the DV #'s that you want to add one too, to each form element, including radio buttons, I will try to look at it again. Follow the example you used in your psuedo code and which I used in my example.
<option value="0">Choose Age</option>
<option value="1,2,6">Preschool</option>
<option value="1,3,4">Elementary</option>
<option value="3,5,6">Teen/Adult</option>
.....Willy
gendou
02-25-2004, 10:31 PM
when i run the page in my browser(s) and press Process i don't get any response. i can see all of the variable being passed in the address bar but the page flashes and that's it. i'm not sure if i left something out or what. i have to leave here in about 5 minutes. i'll paste in the code from the entire page once i add in the values.
thanks for your help Willy,.. i hope i can make it work with what you're giving me.
-aaron
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title>Device Evaluation Form</title>
<script language="Javascript">
var DV = new Array();
DV[0] = 0;
DV[1] = 0;
DV[2] = 0;
DV[3] = 0;
DV[4] = 0;
DV[5] = 0;
DV[6] = 0;
DV[7] = 0;
function addPoints(which){
var num = which.split(',');
for(var i=0; i<num.length; i++){
for(var j=0; j<DV.length-1; j++){
if(j == num[i]){
DV[j]++;
}
}
}
//alert('DV'+j+' value='+DV[j])
//alert(DV[5])
}
</script>
</head>
<body>
<form name="Eval">
---Section 1---------<br><br>
Age? <select name="Q1" onchange="addPoints(this[this.selectedIndex].value)"><br>
<option value="0,1,2,4">Preschool</option>
<option value="0,1,2,3,4,5,6">Elementary</option>
<option value="0,1,2,3,4,5,6">Teen/Adult</option>
</select>
<br>
Literacy? <select name="Q2" onchange="addPoints(this[this.selectedIndex].value)">
<option value="4">Emergent</option>
<option value="0,1,2,4">PreLiterate</option>
<option value="0,1,2,3,5,6">Literate</option>
</select>
<br>
Cognition? <select name="Q3" onchange="addPoints(this[this.selectedIndex].value)">
<option value="0,1,2,3,5,6">None/Mild</option>
<option value="4">Moderate</option>
<option value="4">Severe</option>
</select>
<br>
Physical State? <select name="Q4" onchange="addPoints(this[this.selectedIndex].value)">
<option value="0,1,3,4,5,6">Degenerate</option>
<option value="0,1,2,3,4,5,6">Static</option>
<option value="0,1,2,3,4,5,6">Improving</option>
</select>
<br>
Dexterity? <select name="Q5" onchange="addPoints(this[this.selectedIndex].value)">
<option value="0,1,2,3,4,5,6">Fine Motor</option>
<option value="0,1,3,4,5">Impaired</option>
<option value="0,1,3,4,5">Severely Impaired</option>
</select>
<br>
Mental State? <select name="Q6" onchange="addPoints(this[this.selectedIndex].value)">
<option value="0,1,3,4,5">Degenerative</option>
<option value="0,1,2,3,4,5,6">Static</option>
<option value="0,1,2,3,4,5,6">Improving</option>
</select>
<br>
Support? <select name="Q7" onchange="addPoints(this[this.selectedIndex].value)">
<option value="0,1,3,5,6">Self</option>
<option value="0,1,2,3,4,5,6">Spouse/Parent</option>
<option value="0,1,2,4">Good Team</option>
</select>
<br>
Payor? <select name="Q8" onchange="addPoints(this[this.selectedIndex].value)">
<option value="0,1,2,3,5,6">Private Ins.</option>
<option value="0,1,2,3,4,5,6">Government</option>
<option value="0,1,2,4,6">School</option>
</select>
<br>
<br><br>
---Section 2---------<br><br>
3rd Party Software?
<input type="radio" value=1 name="Q9">Yes
<input type="radio" value=0 name="Q9">No<br>
<br>
Email Address?
<input type="radio" value=1 name="Q10">Yes
<input type="radio" value=0 name="Q10">No<br>
<br>
Internet Access?
<input type="radio" value=1 name="Q11">Yes
<input type="radio" value=0 name="Q11">No<br>
<br>
Computer Access?
<input type="radio" value=1 name="Q12">Yes
<input type="radio" value="0 name="Q12">No<br>
<br>
Phone Access?
<input type="radio" value=1 name="Q13">Yes
<input type="radio" value=0 name="Q13">No<br>
<br>
User Programming?
<input type="radio" value=1 name="Q14">Yes
<input type="radio" value=0 name="Q14">No<br>
<br>
ECU?
<input type="radio" value=1 name="Q15">Yes
<input type="radio" value=0 name="Q15">No<br>
<br>
Simplicity?
<input type="radio" value=1 name="Q16">Yes
<input type="radio" value=0 name="Q16">No<br>
<br>
Light to Carry?
<input type="radio" value=1 name="Q17">Yes
<input type="radio" value=0 name="Q17">No<br>
<br>
Vision Problems?
<input type="radio" value=1 name="Q18">Yes
<input type="radio" value=0 name="Q18">No<br>
<br>
<input type="submit" name="Process" value="Process" onclick="return addPoints(this); return false;">
</form>
</body>
</html>
Willy Duitt
02-26-2004, 10:35 AM
Although you did not provide me with the radio button values which I needed, I used psuedo values in the spirit of the option values. Attached you will find the markup. I commented the script and used descriptive variable names the best I can to assist you in reading and following the methods I used.
Good Luck;
.....Willy
vBulletin® v3.8.2, Copyright ©2000-2012, Jelsoft Enterprises Ltd.