SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    forms: effect of tags on DOM/ selectedIndex?

    Hi folks, I'm new to JavaScript and have spent the weekend struggling with a relatively simple script to add up scores from a form (questionnaire)

    Basic problem was I styled the form using dl and dd tags to hold the styles, and an external css stylesheet

    Then this parseInt statement no longer worked;
    value=parseInt (form[i].options[form[i].selectedIndex].value);

    It does work if I take out the definition list tags which is a pity because they provided a neat way of styling the form

    I tried putting the tags in the string, guessiing they would be needed to address the selected option, but no luck:
    value=parseInt (form[i].dl.dd.options[form[i].dl.dd.selectedIndex].value);

    Does anybody know if I'm allowed to use these tags and if so how to grab the selectedIndex value? I'd be grateful for any suggestions cos I've lost too many hours of my life on this! Thanks Rob

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi robhar,

    Can you give us a link to the page or post it?

    Or you could just put ids on the form controls and use document.getElementById().

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Mike,

    Back on the job...

    The unstyled form is now on
    http://www.cka-counselling.co.uk/resource/had2.htm

    The script is at
    http://www.cka-counselling.co.uk/resource/had.js

    the initial styled version is at
    http://www.cka-counselling.co.uk/resource/had.htm

    Answer pages aren't up yet

    I guess I just don't understand and have been unable to find out how inserting tags affects the DOM - i.e. my ability to access the choices array. Since the unstyled version works I could find some way of making it presentable - but I hate to be beaten by these things - so would be very grateful for any light you could shed....

    Regards,
    Rob

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Rob,

    form.elements[0] is the FIELDSET element, which results in (isNaN(value)) evaluating to TRUE.

    You may need to look at form.elements[0].tagname as well.

    edit...

    For example...
    Code:
    if (form.elements[i].tagName == 'SELECT') {
      switch (form.elements[i].type) {	
        ...
      }
    }
    Last edited by MikeFoster; Aug 29, 2006 at 21:34.

  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    BTW... you did a great job of helping us help you by providing links to the relevant files and a good description of the problem.

  6. #6
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well Mike, I'm so grateful that you'd spend time looking at this - but - I don't really understand. Tonight I had a break and a game of tennis. It's been a cool August evening here

    Tomorrow - I wrap a wet towel round my head and try again to get to grips with it! Am definitely in this over my head. Anyway thanks a lot for the suggestion, which I will give close attention to in the morn, and greetings from Warwick
    Yours Rob

  7. #7
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well Mike (or anybody listening!) I tried that and got close...

    Actually I have stripped out the switch function but still don't understand the DOM model or syntax enough to get the selected tag into the parseInt expression. Books are no help so far! Any guidance you can offer on the 'for' expression would be much appreciated :#

    for(i=0; i<form.elements.length; i++) {
    var value=0;
    sel = document.getElementByTag('select').index[i];
    value = parseInt(form.elements[i].options[sel.selectedIndex].value) ;
    }

    Thanks for thinking about this!
    Yours, Rob

  8. #8
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    of course it's 'getElementByTagName'

    But still does not work, trying various tweaks on the expressions. My head hurts

  9. #9
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I mean getElementsByTagName! Errors creeping in

  10. #10
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Rob,

    Try this for the 'get' function:
    Code:
    function get(form)
    {
      var total=0, value, sel;
      for(i = 0; i < form.elements.length; i++) {	
        if (form.elements[i].tagName == 'SELECT') {
          value = parseInt(form.elements[i].options[form.elements[i].selectedIndex].value);
          if (isNaN(value)) return null;
          if (value > 0) total += value;
          else dep_total -= value;
        }
      }
      return total;
    }

  11. #11
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It worked first time Mike. Thanks so much -- I'd never have got there!

    I tried to simplify by getting rid of the first if statement - but you seem to have used it to made the existence of the tag a condition (As in your original suggestion) I'd got hold of the idea that I'd select using the tag and shorten the navigation string - but it just wasn't working

    Great! thanks again. Will be able to sleep now!
    Best Wishes, Rob

  12. #12
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PS Bottom line is - re the opening question - I can preserve the dl styling tags. Good fix!

  13. #13
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Funny - the box width does not show correctly in IE. Is ok in Moz. Will fix later

  14. #14
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Rob,

    In the css file...
    Code:
    dd option  {
    	width:  250;
    	}
    ...it should have units, as:
    Code:
    dd option  {
    	width:  250px;
    	}
    All the best!

  15. #15
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh dear, that was a bit elementary... :-(

    If you ever have time, which I know is asking a lot - tell me why your if statement worked.... I seeem to have been on the wrong track worrying about the DOM model and the dl dd tags? Don't worry if you need to get onto the next thing

    Thanks again - I'm a happier bunny this morning
    Best wishes,
    Rob

  16. #16
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    glad to see you have a good sense of humor, Rob.

    You were on the right track, except that the problem element was the <fieldset>.

    The original code assumed that there were only Select objects in the forms.elements[] array - but the Fieldset object was also showing up in that array.

    My code really doesn't do anything different from your original except for the if statement. As we iterate through the forms.elements[] array the if statement guarantees that we only process Select objects.

    Have a great day!
    Mike

  17. #17
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    a light begins to glimmer in the dark recesses of my mind...

    Thanks again - that helps with the learning

    Yours
    Rob


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •