Filling in a form

Discussion in 'Javascript' started by Steve Wylie, Nov 7, 2003.

  1. Steve Wylie

    Steve Wylie Guest

    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>
    Steve Wylie, Nov 7, 2003
    #1
    1. Advertising

  2. (Steve Wylie) writes:

    > 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) {
    Lasse Reichstein Nielsen, Nov 7, 2003
    #2
    1. Advertising

  3. Steve Wylie

    Steve Wylie Guest

    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
    Steve Wylie, Nov 8, 2003
    #3
  4. Steve Wylie

    Steve Wylie Guest

    Hi Lasse

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

    Steve Wylie
    Steve Wylie, Nov 10, 2003
    #4
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?RXJpayBKZW5zZW4=?=

    Filling in HttpWebRequest object with form data

    =?Utf-8?B?RXJpayBKZW5zZW4=?=, Feb 11, 2004, in forum: ASP .Net
    Replies:
    3
    Views:
    5,464
    bruce barker
    Feb 11, 2004
  2. Bob
    Replies:
    1
    Views:
    654
  3. Bob
    Replies:
    0
    Views:
    486
  4. Mohsen Pahlevanzadeh
    Replies:
    0
    Views:
    115
    Mohsen Pahlevanzadeh
    Sep 9, 2013
  5. MRAB
    Replies:
    0
    Views:
    113
Loading...

Share This Page