Web Analytics Made Easy -
StatCounter Need help processing a form within the same page... - CodingForum

Announcement

Collapse
No announcement yet.

Need help processing a form within the same page...

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Need help processing a form within the same page...

    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.)
    Code:
    <!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?&nbsp;&nbsp;<select name="Q1"><br>
    	<option value="Preschool">Preschool</option>
    	<option value="Elementary">Elementary</option>
    	<option value="TeenAdult">Teen/Adult</option>
    </select>
    <br>
    Literacy?&nbsp;&nbsp;<select name="Q2">
    	<option value="Emergent">Emergent</option>
    	<option value="PreLiterate">PreLiterate</option>
    	<option value="Literate">Literate</option>
    </select>
    <br>
    Cognition?&nbsp;&nbsp;<select name="Q3">
    	<option value="NoneMild">None/Mild</option>
    	<option value="Moderate">Moderate</option>
    	<option value="Severe">Severe</option>
    </select>
    <br>
    Physical State?&nbsp;&nbsp;<select name="Q4">
    	<option value="PhysDegenerate">Degenerate</option>
    	<option value="PhysStatic">Static</option>
    	<option value="PhysImproving">Improving</option>
    </select>
    <br>
    Dexterity?&nbsp;&nbsp;<select name="Q5">
    	<option value="Finemotor">Fine Motor</option>
    	<option value="Impaired">Impaired</option>
    	<option value="SevImpaired">Severely Impaired</option>
    </select>
    <br>
    Mental State?&nbsp;&nbsp;<select name="Q6">
    	<option value="MentlDegen">Degenerative</option>
    	<option value="MentlStatic">Static</option>
    	<option value="MentlImproving">Improving</option>
    </select>
    <br>
    Support?&nbsp;&nbsp;<select name="Q7">
    	<option value="Self">Self</option>
    	<option value="SpsePrnt">Spouse/Parent</option>
    	<option value="GoodTeam">Good Team</option>
    </select>
    <br>
    Payor?&nbsp;&nbsp;<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?&nbsp;&nbsp;
    <input type="radio" value="yes" name="Q9">Yes
    <input type="radio" value="no" name="Q9">No<br>
    <br>
    Email Address?&nbsp;&nbsp;
    <input type="radio" value="yes"name="Q10">Yes
    <input type="radio" value="no"name="Q10">No<br>
    <br>
    Internet Access?&nbsp;&nbsp;
    <input type="radio" value="yes"name="Q11">Yes
    <input type="radio" value="yes"name="Q11">No<br>
    <br>
    Computer Access?&nbsp;&nbsp;
    <input type="radio" value="yes"name="Q12">Yes
    <input type="radio" value="yes"name="Q12">No<br>
    <br>
    Phone Access?&nbsp;&nbsp;
    <input type="radio" value="yes"name="Q13">Yes
    <input type="radio" value="yes"name="Q13">No<br>
    <br>
    User Programming?&nbsp;&nbsp;
    <input type="radio" value="yes"name="Q14">Yes
    <input type="radio" value="yes"name="Q14">No<br>
    <br>
    ECU?&nbsp;&nbsp;
    <input type="radio" value="yes"name="Q15">Yes
    <input type="radio" value="yes"name="Q15">No<br>
    <br>
    Simplicity?&nbsp;&nbsp;
    <input type="radio" value="yes"name="Q16">Yes
    <input type="radio" value="yes"name="Q16">No<br>
    <br>
    Light to Carry?&nbsp;&nbsp;
    <input type="radio" value="yes"name="Q17">Yes
    <input type="radio" value="yes"name="Q17">No<br>
    <br>
    Vision Problems?&nbsp;&nbsp;
    <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

  • #2
    Re: Need help processing a form within the same page...

    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.

    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

    Comment


    • #3
      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

      Comment


      • #4
        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

        Code:
        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>

        Comment


        • #5
          I apologize. I did not notice that you had named your buttons.

          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

          Comment


          • #6
            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

            Comment


            • #7
              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.....

              .....Willy

              Comment


              • #8
                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

                Comment


                • #9
                  I never read a book. Lernded by lurking in the Forum.

                  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.
                  Code:
                  <!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="[color=red]1,2,6[/color]">Preschool</option>
                   <option value="[color=red]1,3,4[/color]">Elementary</option>
                   <option value="[color=red]3,5,6[/color]">Teen/Adult</option>
                  </select>
                  </form>
                  .....Willy

                  Comment


                  • #10
                    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

                    Comment


                    • #11
                      Your Welcome;
                      Glad I could help

                      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&#58;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)
                      Last edited by Willy Duitt; Feb 25, 2004, 04:13 PM.

                      Comment


                      • #12
                        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

                        Comment


                        • #13
                          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

                          Comment


                          • #14
                            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)

                            Code:
                            <form name="Eval">
                            ---Section 1---------<br><br>
                            Age?&nbsp;&nbsp;<select name="Q1"><br>
                            	<option value="Preschool">Preschool</option>
                            	<option value="Elementary">Elementary</option>
                            	<option value="TeenAdult">Teen/Adult</option>
                            </select>
                            <br>
                            Literacy?&nbsp;&nbsp;<select name="Q2">
                            	<option value="Emergent">Emergent</option>
                            	<option value="PreLiterate">PreLiterate</option>
                            	<option value="Literate">Literate</option>
                            </select>
                            <br>
                            Cognition?&nbsp;&nbsp;<select name="Q3">
                            	<option value="NoneMild">None/Mild</option>
                            	<option value="Moderate">Moderate</option>
                            	<option value="Severe">Severe</option>
                            </select>
                            <br>
                            Physical State?&nbsp;&nbsp;<select name="Q4">
                            	<option value="PhysDegenerate">Degenerate</option>
                            	<option value="PhysStatic">Static</option>
                            	<option value="PhysImproving">Improving</option>
                            </select>
                            <br>
                            Dexterity?&nbsp;&nbsp;<select name="Q5">
                            	<option value="Finemotor">Fine Motor</option>
                            	<option value="Impaired">Impaired</option>
                            	<option value="SevImpaired">Severely Impaired</option>
                            </select>
                            <br>
                            Mental State?&nbsp;&nbsp;<select name="Q6">
                            	<option value="MentlDegen">Degenerative</option>
                            	<option value="MentlStatic">Static</option>
                            	<option value="MentlImproving">Improving</option>
                            </select>
                            <br>
                            Support?&nbsp;&nbsp;<select name="Q7">
                            	<option value="Self">Self</option>
                            	<option value="SpsePrnt">Spouse/Parent</option>
                            	<option value="GoodTeam">Good Team</option>
                            </select>
                            <br>
                            Payor?&nbsp;&nbsp;<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?&nbsp;&nbsp;
                            <input type="radio" value=1 name="Q9">Yes
                            <input type="radio" value=0 name="Q9">No<br>
                            <br>
                            Email Address?&nbsp;&nbsp;
                            <input type="radio" value=1 name="Q10">Yes
                            <input type="radio" value=0 name="Q10">No<br>
                            <br>
                            Internet Access?&nbsp;&nbsp;
                            <input type="radio" value=1 name="Q11">Yes
                            <input type="radio" value=0 name="Q11">No<br>
                            <br>
                            Computer Access?&nbsp;&nbsp;
                            <input type="radio" value=1 name="Q12">Yes
                            <input type="radio" value="0 name="Q12">No<br>
                            <br>
                            Phone Access?&nbsp;&nbsp;
                            <input type="radio" value=1 name="Q13">Yes
                            <input type="radio" value=0 name="Q13">No<br>
                            <br>
                            User Programming?&nbsp;&nbsp;
                            <input type="radio" value=1 name="Q14">Yes
                            <input type="radio" value=0 name="Q14">No<br>
                            <br>
                            ECU?&nbsp;&nbsp;
                            <input type="radio" value=1 name="Q15">Yes
                            <input type="radio" value=0 name="Q15">No<br>
                            <br>
                            Simplicity?&nbsp;&nbsp;
                            <input type="radio" value=1 name="Q16">Yes
                            <input type="radio" value=0 name="Q16">No<br>
                            <br>
                            Light to Carry?&nbsp;&nbsp;
                            <input type="radio" value=1 name="Q17">Yes
                            <input type="radio" value=0 name="Q17">No<br>
                            <br>
                            Vision Problems?&nbsp;&nbsp;
                            <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

                            Comment


                            • #15
                              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...

                              Comment

                              Working...
                              X