need to process a form without a server...

[gendou]

hi, this is my first time posting here. i've got an assignment here at work and i'm the newly designated web guy. i'm a graphic designer first and a web guy second. i have been reading javascript tutorials and taken an intro to programming course a couple years ago so i'm familiar with the fundamentals of programming and i'm familiar with html. now that that's out of the way, on to the problem:

I have to develop an html-based form that has a series of questions on it. My company develops speech assistance devices. The form has 2 sections. In section one, each question has 3 possible choices and in section 2, each question is a yes/no answer. when each question is answered there is a point assigned to the devices (i have) listed under each answer (on the flowchart).

An example would be: " what age group is the patient/you in? [Preschool] [Elementary School] [High School/Adult] "
Answer Values:
[Preschool] = A, D > one point awarded to each A and D
[Elementary] = C, D, E, F > one point awarded to each C D E and F
[High School/Adult] = B, C, F > one point awarded to each B C and F

All of the questions would have the same set up, each awarding a point to each device in that category's possible answers. These variables are in an array and hold the points as they're added, then sorts the list in reverse descending order by number (bigger to smaller) to rate the devices.

now, this is going to be on a CD, so there's no way to use a server script or database to calculate the answer. What I need to do is have the form in one page and when you click "Submit" it sends/processes the values of the answers and displays the sorted list in the same page or in a new one.
Can this be done?
Can I add up the points in the same page, or can I have the form send the data to another HTML file containing the javascript to add it up and display the sorted list?

I'm not much of a programmer yet, but i'm going to be doing more with the site so this is kind of a "trial by fire" for doing this web development.

I could use some suggestions or examples of how I might do this. I can pick the code apart to figure out how to write it to fit my situation, I need to know mostly if it can even be done.

Thanks in advance...

Aaron

[Vladdy]

Doable.
Javascript complexity would depend on data organization (if done right - the script can be very simple).
Use form onsubmit event to perform summation and the rest of the processing, return false so that the form was not submitted - this way all your application fits on one page.

[gendou]

sounds good. thanks Vladdy.. once i have the code worked up i'll post it for comments. i'm sure i'll have difficulty with it. would it be possible for someone to post a generic example of the for onsumbit code, just to give me an idea of how it might work?
actually, what might be better is how the code would be set up to take the values from the form, add them up and put them into the array. sorry for asking to practically spell it out, but i'm still trying to get an understanding of how js transfers information around.

thanks,

Aaron

[Vladdy]

You start with defining how you are going to present data.
For multiple choice questions: are those mutually exclusive answers (presented by radio button) or not? (checkbox)?
Do the answer values work the same for yes/no questions as you described for multiple choice ones?
How many devices (A - F) do you have and will you have a need to expand in the future?
Will your form have other checkbox/radio button elements which you do not count for the devices?

[gendou]

the multiple choice questions were going to have radio buttons, and the same with the yes/no questions. the yes/no questions would have the same point system as the multiple choice questions, so basically it's the same setup as the multiple choice ones, just with 2 choices instead of 3. there won't be a need to exapnd in the future.
there are 7 devices all together, hence the A - F representation.

Aaron

[Vladdy]

Here is what I suggest then,
1. Since you need only to add one point per answer per device and you only have 7 devices - encode the value for an answer in a binary format:

bit 0: Device A;
bit 1: Device B;
...
bit 6: Device G;

So value for an answer that need to add 1 to devices A and D would be: 00001001 or decimal 9.

2. Your form becomes something like that:

<form name="myForm" action="#" onsubmit="return processForm()">
<div>
<p>Question 1</p>
<label><input name="Q1" type="radio" value="28" />Answer 1</label>
<label><input name="Q1" type="radio" value="9" />Answer 2</label>
<label><input name="Q1" type="radio" value="13"  />Answer 3</label>

<p>Question 2</p>
<label><input name="Q2" type="radio" value="32" />Yes</label>
<label><input name="Q2" type="radio" value="29" />No</label>



<input type="submit" name="submit" value="Submit" />
</div>
</form>

3. Your script will be along those lines

productArray=null;

function processForm()
  { // initialize array that holds the sums for products:
     productArray = new Array(0,0,0,0,0,0,0,0);
    // get all input elements of the form
    inputs = document.forms['myForm'].getElementsByTagName('input');
    // iterate through inputs
    for(var i=0; i<inputs.length; i++)
      { //if input type is radio
        if(inputs[i].type == 'radio')
          {// if input is checked 
        if(inputs[i].checked)
              {//process its value
            addProductValue(inputs[i].value);
              }
          }
      }
    /* Do something with the results */
    return false;
  }

function addProductValue(value)
  { /* Iterate through value bits and add 1 to corresponding productArray elements */
    return;
  }

[gendou]

that's helpful. by looking at the code you posted i can get an idea of what to do. i'll have to look into the binary value thing and how to get the script to read it as an integer value of 1. (sorry, that's the first i'd seen binary mentioned in js). i think what you've told me so far helps a lot. once i start putting it all together hopefully it'll start making more sense. i'll post the code as i'm going to see if i'm going about it correctly. it's probably going to be a couple days before i'm workgin with it again (weekend).

thanks a ton Vladdy,

Aaron

[Vladdy]

Try this:

function addProductValue(value)
  { // Iterate through 8 bits
    // I know you have only 7 products, but I'm used to a byte ;^)
    for(var i=0; i<8; i++)
      { // If value has the low bit set, 
        // add one to the corresponding array element
        if(value&1) productArray[i]++;
        // right shift value
        value = value >>> 1
      } 
  }

[gendou]

thanks for that last snippet. i'm going to take your suggestions and tinker with them and see what i can get working. i'll post up my progress probably monday.

thanks a lot,

Aaron

[gendou]

i just read on another thread that you can only have one set of radio buttons per form and to use checkboxes to define things with more than two choices. i know i've seen and filled out forms where this wasn't true. i'm going to have to make a mockup of the page i want to create to illustrate what i'm trying to do. Vladdy's tips have all been useful and helpful. there's just so many details and different possible ways to do things.. :P

[Vladdy]

Each "Set" of radio buttons has to have a unique name, but you can have as many sets as you need.

Originally posted by gendou
there's just so many <snip /> different possible ways to do things.. :P

3/4 of those are wrong, and 3/4 of the remaining ones are inefficient

[gendou]

thanks, i just stumbled over that by experimenting.
now, this doesn't need to be as complicated as i thought...well i dont think anyway.

here's what i have in my form:

<form name="radies">
dv4 <input type="radio" name="point" value="1">
mt4 <input type="radio" name="point" value="1">
txl <input type="radio" name="point" value="1">
plm <input type="radio" name="point" value="1">
<br>
dv4 <input type="radio" name="point1" value="1">
mt4 <input type="radio" name="point1" value="1">
txl <input type="radio" name="point1" value="1">
plm <input type="radio" name="point1" value="1">
points <input type="text" value="">
</form>

now, i can use the onsubmit function to send those points to an array then display the array as a sorted list, right?

transferring the points to the array is the trick now. i have found how to list the sorted array on devguru and another site..