Filling in a form

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • Steve Wylie

    Filling in a form

    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.e lements[thisElem.name];
    if (! currentGroup.le ngth) {
    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<currentGr oup.length;i++) {
    currentGroup[i].checked = false;
    }
    return false;
    }
    if (0x31 <= key && key <= 0x39 && currentGroup) { // 1-9
    var idx = key - 0x31;
    if (idx < currentGroup.le ngth) {
    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(){acti ve(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.len gth;i++) {
    if (elems[i].type.toLowerCa se() != "hidden" &&
    elems[i].name && currentName != elems[i].name) {
    if (!firstElem) {firstElem = elems[i];}
    for (var j = currentIdx; j < i; j++) {
    if (elems[j].name) {
    elems[j].onfocus = makeActiveCall( elems[i]);
    }
    }
    currentIdx = i;
    currentName = elems[i].name;
    }
    }
    for (j=currentIdx;j <elems.length;j ++) {
    elems[j].onfocus = makeActiveCall( );
    }
    firstElem.focus ();
    firstElem.onfoc us();
    document.onkeyp ress = snapkey;
    }
    </script>
  • Lasse Reichstein Nielsen

    #2
    Re: Filling in a form

    stevewy@hotmail .com (Steve Wylie) writes:
    [color=blue]
    > 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.[/color]

    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!)
    [color=blue]
    > 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.[/color]

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

    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.backgrou ndColor = 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) {

    Comment

    • Steve Wylie

      #3
      Re: Filling in a form

      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


      Comment

      • Steve Wylie

        #4
        Re: Filling in a form

        Hi Lasse

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

        Steve Wylie

        Comment

        Working...