SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    Carpe Diem = Fish of the Day fisherboy's Avatar
    Join Date
    Dec 2005
    Location
    New Zealand
    Posts
    488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can't make form list work

    I know NOTHING about javascript and rarely use it beyond the odd cut and paste of a simple script.

    Can anyone tell me what's wrong here?

    <head>
    Code:
    <script type="text/javascript" language="JavaScript">
    <!-- Begin
    function formHandler(form){
    var URL = document.form.site.options[document.form.site.selectedIndex].value;
    window.location.href = URL;
    }
    // End -->
    <body>
    Code:
    <form name="form" id="form" action=""><p><select name="site" class="option">
    <option value="">Packaging Products...</option>
    <option value="product11.htm">Bottles &amp; Caps</option>
    <option value="product12.htm">Flagons, Bottles &amp; Caps</option>
    <option value="product13.htm">Jerry Cans &amp; Caps</option>
    <option value="product14.htm">Jars, Pots &amp; Lids</option>
    <option value="product15.htm">Pails &amp; Lids</option>
    <option value="product16.htm">Buckets</option>
    <option value="product18.htm">Jugs, Scoops &amp; Funnels</option>
    <option value="product9.htm">Barrels &amp; Drums</option>
    <option value="product10.htm">Taps, Pumps &amp; Bungs</option>
    </select> <input type="button" value="Go"
    onclick="javascript:formHandler(this)"></p></form>
    Unless I'm missing a dot or something, the only thing I can think of is that the test page is not sitting in the root directory. Does it need to?

    Any help appreciated very much!
    fisherboy
    Web Site Design

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1) You can't use the form variable like that.

    Try this.
    Code:
    function formHandler(btn){
      var site = btn.form.site;
      window.location.href = site.options[site.selectedIndex].value;
    }
    2) Keep in mind that some Internet users use a browser that doesn't have JavaScript enabled.

    I suggest you read these:
    Graded Browser Support
    Progressive Enhancement and the Future of Web Design
    Accessibility is seldom just up to the interface developer
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Zealot yacka's Avatar
    Join Date
    Aug 2006
    Posts
    124
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As far as I can tell there's nothing wrong with that code. I am assuming that the pages referenced exist in the same directory as this page and that you have a closing script tag.

    Why don't you tell us in what way it isn't working?

  4. #4
    Carpe Diem = Fish of the Day fisherboy's Avatar
    Join Date
    Dec 2005
    Location
    New Zealand
    Posts
    488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Kravvitz. That sorted it nicely! I have no idea how or why but that's OK.

    On this site there is a non-js way to navigate to the same pages, in case they ain't using it.

    Thanks for the articles.

    HAGD
    fisherboy
    Web Site Design

  5. #5
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're welcome

    1) When you use dot syntax, like in document.formName.formControlName formName and formControlName must be unquoted string literals, not variables. To use a string variable you can use array notation like document[formName][formControlName], where formName and formControlName are string variables. To use an object variable you can do something like this: form.formControlName.value, where form is an object reference that refers to a <form> element and formControlName is an unquoted string literal.

    2) I suggest you generate the <select> with JavaScript, so you don't confuse anyone using a browser that doesn't have it enabled.

    These should be helpful:
    The Behavior Layer
    Separating behavior and structure
    Behavioral Separation
    Unobtrusive JavaScript
    DOM Scripting - Sample chapter: Best Practices
    Accessible DHTML
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  6. #6
    SitePoint Zealot yacka's Avatar
    Join Date
    Aug 2006
    Posts
    124
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm interested to know what exactly was fixed, apart from implementing the code with better practices. I put the OP code in a test file and checked it with IE, Firefox and Opera and it seems to work as intended. What was the problem?

  7. #7
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's a good question, yacka.

    The first time I looked at it I didn't notice that the form was named "form".

    The "form" attribute being passed to the function wasn't being used. So point number 1 of my last reply doesn't apply to that code.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  8. #8
    Carpe Diem = Fish of the Day fisherboy's Avatar
    Join Date
    Dec 2005
    Location
    New Zealand
    Posts
    488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Yacka

    I can't help you at all on your question of why the original script didn't work. JS is a mystery to me. The script I posted was basically copied from another of my sites but simply refused to work for no obvious reason.

    Kravvitz's script, when pasted into the page, worked immediately and well.

    Anyway, thanks to both of you for your help and interest.

    Cheers
    fisherboy
    Web Site Design

  9. #9
    SitePoint Zealot yacka's Avatar
    Join Date
    Aug 2006
    Posts
    124
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fisherboy, the original script you posted did work, that's what had me confused. What made you think it didn't? Anyway it doesn't matter, so long as it's working now.

  10. #10
    Carpe Diem = Fish of the Day fisherboy's Avatar
    Join Date
    Dec 2005
    Location
    New Zealand
    Posts
    488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It didn't work for me, either on the server or locally, hence my "cry for help" to SP.

    Like I said, I have no b****y idea why not!
    fisherboy
    Web Site Design


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
  •