SitePoint Sponsor

User Tag List

Results 1 to 14 of 14

Hybrid View

  1. #1
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)

    Basic question about form action

    Being a JS novice, I have a simple question. Validation flags the following code:

    Code:
    <form>
    <input type="button" style="background-color: #00ccff" value="Home Page"
    onclick="window.location.href='index.html'">
    <input type="button" style="BACKGROUND-COLOR: #00ccff" value="Top of Page"
    onclick="window.location.href='#top'">
    </form>
    The form lacks a proper action attribute. What would be the proper one for this?

    And let me ask the same question about this JS code:

    Code:
    <form>
      <select>
        <option selected>Select a page</option>
    	<option value="#1897">1897-1902</option>
             ......
      </select>
      <input type="button" value="Go" onClick="jumpBox(this.form.elements[0])">
    </form>
    Note: this is, of course, client-side and not server-side.
    Last edited by Black Max; May 27, 2007 at 16:54.

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can get by with using action="#" in your form element; as for the rest, I really can't help you since I'm not a JavaScript person.

  3. #3
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Hey, at least you tried. As you can probably tell, I've declared war on these pages -- they will validate, no matter how many aspirin and cigarettes I go through. Thanks for the tip.

    Addendum: the little hack works, and the pages freakin' validate (at least the ones I've fixed). The angels wept...!

    Addendum secundus: Rather, they validate with HTML Tidy, but not at w3.org. Most of the errors seem to be in the Google search box code. Gaaah.

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's not a hack. Just a placeholder.

  5. #5
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    It may be the equivalent of using pantyhose to fix your fan belt, but I'm good with it.

  6. #6
    SitePoint Enthusiast FSan's Avatar
    Join Date
    Dec 2005
    Location
    San Martin de los Andes, Patagonia Argentina
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just wondering...
    If you are not actually submitting anything but only attaching events to elements (input, select or whatever). Why not just get rid of the form tags altogether?

  7. #7
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    I can do that? Could you show me what you're talking about? I can't believe I can just junk the form tags and still have everything work.

    Code in play

    The two code snippets are at the bottom and the top, respectively.

  8. #8
    SitePoint Enthusiast FSan's Avatar
    Join Date
    Dec 2005
    Location
    San Martin de los Andes, Patagonia Argentina
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I mean just this should work ok:
    HTML Code:
    <input type="button" style="BACKGROUND-COLOR: #00ccff" value="Top of Page"
    onclick="window.location.href='#top'">
    Since you only need the form tags, let's say, as a way of telling the browser what to submit via POST, what name/value pairs. You are performing an action by means of javascript code, so there's no need for the form tags. What matters in this case is only the proper event javascript code. If I'm not mistaking...

    You CAN use form elements without a form as long as you do not need to submit the values to another page.

    Again

    If I'm not mistaking...

    Try it

  9. #9
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, I see what he's talking about. Using an unordered list for this instead of a form would be better (semantically speaking) in this case. With some CSS you can make the link in each list item look like form buttons (by playing with the anchor dimensions and borders).

  10. #10
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    It's a dropdown menu. That can be emulated with an unordered list and CSS? I'm not sure where this is going, but it's 2:30 am here and I may be having a Homer Simpson moment.

    Bed for me. I'll be back at this tomorrow. Thanks, folks.

    Edit: Doh, I am having a Homer moment. I'm thinking about the dropdown menu, not the little form buttons at the bottom of the page. I'm going off to dream about donuts.

  11. #11
    SitePoint Enthusiast FSan's Avatar
    Join Date
    Dec 2005
    Location
    San Martin de los Andes, Patagonia Argentina
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    Ah, I see what he's talking about. Using an unordered list for this instead of a form would be better (semantically speaking) in this case. With some CSS you can make the link in each list item look like form buttons (by playing with the anchor dimensions and borders).
    That's exactly my point. He doesn't need the form. You are absolutely right about the semantics IMO. But he could still use the form elements without the form tags if he liked.

  12. #12
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    I take it you're on the East Coast?

  13. #13
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IIRC, only ancient browsers like Netscape 4 have issues with form controls existing outside of form elements.

    It would be best to use another <ul> for those 3 buttons and to use actual <a>s instead of <input>s and JavaScript.
    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.

  14. #14
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    Southeast coast, near the ocean. Sandy beaches and hurricanes.


    I'm forgetting one of the axioms of design: why beat yourself to death fixing bad code, when you can rip it out and replace it with well-constructed code?

    The bottom nav buttons in their little form get replaced with a UL. ALA has been kind enough to provide a nicely coded, plain-vanilla dropdown list that I will borrow and modify. The whole problem with wonky FORM commands should, if all goes well, simply disappear.

    Edit: That is not a "plain-vanilla" dropdown from ALA, but I found another one that works -- after over an hour's searching. Man, the simple things just aren't so simple....

    Thanks for all the input.
    Last edited by Black Max; May 28, 2007 at 20:50.


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
  •