SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Dynamic Forms - options shown dependant on selections

    Hi guys and girls!

    I've had a browse around the forums for this, and tried googling, but to no avail. I'm not really sure if I'm using the correct terminology!

    I'm sure many people would like to know solutions for this. I'll be as concise as I possibly can.

    I'd like to know where to start with regards to using dynamic forms. To clarify, I mean forms that will show and hide additional inputs based on previous selections.

    Working Example: A flooring shop. Let's say the user has to enter all the usual info such as name and address fields, which are always there and static.

    The user then has to choose what sort of flooring he's ordering, so we'll say two radio buttons, CARPET and VINYL. If the user selects CARPET, I want a new set of carpet-specific input controls to appear, for example PILE DEPTH, SOFTNESS, etc. If the user chooses VINYL, they will be presented with carpet-specific fields.

    I envisage this to work along the lines of expanding divs that are triggered by onClick events associated with the CARPET/VINYL radio buttons (??).

    It would be ultra-nice to have them slide in, fade in, etc, jQuery or whatever.

    Can anybody point me to a decent related tutorial? I have a full knowledge of html and I'm okay with JavaScript as far as following tuts is concerned.

    Any hints, pitfalls?

    Thanks in advance to the community for any light you can shine on this

    all the best
    Phil Gill

  2. #2
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I knew it was a tough one people!

    Can anybody even recommend a book that covers advanced form design, user interaction in this context, etc?

    I guess I might have to tackle this the old skool way...

    Seriously though, ANY resource greatly appreciated.

  3. #3
    SitePoint Wizard Mike Borozdin's Avatar
    Join Date
    Oct 2002
    Location
    Edinburgh, UK
    Posts
    1,743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    If you can't find needed tutorials on Google, then everybody else isn't likely to find them...

    Anyway, regarding your question. You outlined the idea well, why not start implementing it? If any specific question arise, you can always ask them in specific forums.

    Personally, I'd just start with JavaScript, assign some event handlers that will show more options based on selected ones.

    I'd just advise you to be careful when validating all the input, because some fields will never be populated because they don't belong to user's initial choice.

  4. #4
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Mike Borozdin

    You're right, I'm going to have to start from scratch myself. I've found a FEW hints online but nothing like what I want.

    The reason, I assume, for my google failings is that I'm not using the correct terminology for the effect I'm after.

    I'll post the finished thing up on here for the benefit of the readers.

  5. #5
    SitePoint Wizard
    Join Date
    Mar 2008
    Posts
    1,149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're probably not finding many tutorials because it's not done on most forms, and because it's also easy to do (if you know JS well).

    Showing/hiding a DIV based on a checkbox can be done with just one line of JS (+ jQuery), for example:
    Code JavaScript:
    $("#details-cb").change(function() { this.checked ? $("#details").fadeIn() : $("#details").fadeOut(); });
    Or just JS:
    Code JavaScript:
    document.getElementById("details-cb").onchange = function() { this.checked ? document.getElementById("details").style.display = '' : document.getElementById("details").style.display = 'none'; });

    Note: That doesn't handle the case when a user goes back in their browser to return to the form. (The values of the form inputs that the user filled in will be restored in modern desktop browsers.) Re-checking the form inputs on load would fix that.


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
  •