Filling in a form

S

Steve Wylie

Recently on this newsgroup I asked for help with a questionnaire I was
doing in HTML & Javascript. I wanted a script that allowed me to use
the keys 1-9 to fill in the form rather than using the mouse (so where
there was a selection of radio controls, I would hit 1 to select the
first one, two for the second etc), and use Enter to move down the
form. Someone answered my post and provided a solution, but now I
need this script amending to do something else and it appears this
person is now unavailable. What I am requiring is the script
amending slightly so that as I am working my way down the questions,
the current question could be highlighted a different colour so I
could see easily which question I am on. All the questions are in
table cells so presumably this would make it easier. If I could
figure out what the writer of the script (pasted below) had done, I
could do this myself, but my knowledge of JS is rather limited.

Is anyone else able to help?

Steve Wylie


The script is:

<script type="text/javascript">
var snapForm;
var currentControl;
var currentGroup;
var nextControl

function active(thisElem,nextElem) {
currentControl = thisElem;
nextControl = nextElem;
if (thisElem.name) {
currentGroup = thisElem.form.elements[thisElem.name];
if (! currentGroup.length) {
currentGroup = undefined;
}
}
}

function snapkey(event) {
event = event || window.event;
var key = event.keyCode || event.charCode || event.which;
if(key == 0x30 && currentGroup) { // 0
for (var i=0;i<currentGroup.length;i++) {
currentGroup.checked = false;
}
return false;
}
if (0x31 <= key && key <= 0x39 && currentGroup) { // 1-9
var idx = key - 0x31;
if (idx < currentGroup.length) {
currentGroup[idx].checked = true;
}
return false;
}
if (key == 13) {
if(nextControl){
var next = nextControl;
next.focus();
next.onfocus();
return false;
}
}
return true;
}

function init(formName) {
var makeActiveCall = function(next) {
return function(){active(this,next);};
};
var elems = document.forms[formName].elements;

var firstElem; // first named element. Is focused at start.

var currentName = "";
var currentIdx = 0;
for (var i=1;i<elems.length;i++) {
if (elems.type.toLowerCase() != "hidden" &&
elems.name && currentName != elems.name) {
if (!firstElem) {firstElem = elems;}
for (var j = currentIdx; j < i; j++) {
if (elems[j].name) {
elems[j].onfocus = makeActiveCall(elems);
}
}
currentIdx = i;
currentName = elems.name;
}
}
for (j=currentIdx;j<elems.length;j++) {
elems[j].onfocus = makeActiveCall();
}
firstElem.focus();
firstElem.onfocus();
document.onkeypress = snapkey;
}
</script>
 
L

Lasse Reichstein Nielsen

What I am requiring is the script amending slightly so that as I am
working my way down the questions, the current question could be
highlighted a different colour so I could see easily which question
I am on. All the questions are in table cells so presumably this
would make it easier.

It should. You can just highlight the entire table cell. However, it
is made somewhat harder because you have several nested tables, but
you don't have one table cell surrounding the entire question. You have
one cell for the question number, one for the question, one for each
possible answer, etc. So, it is very hard to find a good place to
add the highlight.

(Honestly, nested tables and font tags are not great web design in
this day and age!)
If I could figure out what the writer of the script (pasted below)
had done, I could do this myself, but my knowledge of JS is rather
limited.

Hmm, maybe I should start writing comments :)
<script type="text/javascript">
var snapForm;
var currentControl;
var currentGroup;
var nextControl

Try adding a function here:

function setTDBackground(elem,bg) {
// find surrounding td elements
var cnt;
var tds = [];
while(elem) {
if (elem.tagName == "TD") {
tds[tds.length] = elem;
}
elem = elem.parentNode;
}
// if successful, set the background color of the td around
// this answer.
if (tds && tds.length>=2) {
tds[tds.length-2].style.backgroundColor = bg;
}
}

This way of accessing the document tree requires a modern browser.
I have tested it in Opera 7, Mozilla and IE 6.

Then call it from the active function.

function active(thisElem,nextElem) {
setTDBackground(currentControl,""); // clear previous highlight
currentControl = thisElem;
setTDBackground(currentControl,"yellow"); // set new highlight
nextControl = nextElem;
if (thisElem.name) {
 
S

Steve Wylie

Thanks - I'll give it a go when I get back to work on Monday.

(Honestly, nested tables and font tags are not great web design in this day
and age!)

Yeah, it's a real pain but the HTML code is generated by the Snap program
itself. When it dumps it out it looks awful on the screen and I have to go
through it painstakingly tidying it up, and then adding the Javascript for
client-side validation. It takes ages.

Thanks again.

Steve
 
S

Steve Wylie

Hi Lasse

I've tried your solution out at work, and it runs fine. You're a genius! Thanks.

Steve Wylie
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top