Grow your CSS skills. Land your dream job.

Hidden forms – need help

  • # September 9, 2008 at 7:44 am

    I am not sure how to accomplish this:

    A form that has a list of 2 items. If the user was to select a certain choice then a textfield and text area became available. I would prefer that these areas not seen until they choose the option that gernerated it, but I guess another option would be that these two additional fields would be disabled until that field was selected.

    Example:
    List: "Send To:"
    Options: "Me" or "As a Gift"

    If they chose "As a Gift" it would generate a "Name" textfield and "Message" textarea.

    Any suggestions?

    # September 10, 2008 at 9:59 am

    You are going to need JavaScript for that kind of logic and DOM manipulation.

    For accessibility sake, I’d make sure all form fields are visible by default (with JavaScript off), and use the "disabled" attribute to make sure the irrelevant ones are unusable.

    Then for users with JavaScript working (vast majority), you can go ahead and hide those areas from view. With jQuery, you could put those fields inside a DIV of ID "optional-fields".

    Code:
    $(function(){
    $(“#optional-fields”).hide();
    });

    Now assuming that you have a drop-down menu which will activate those fields, you’ll need to test for that.

    var send_type = $("#send-to-select:selected").text();

    Assuming your <select> element has an ID of "send-to-select", this will return a string of the value of that selected option. Then you can write an IF statement where if it matches "As a gift", you can display those hidden fields.

    if (send_type == ‘As a gift’) {
    $("textarea#message").removeAttr("disabled");
    $("#optional-fields").show();
    };

    I recently wrote up a demo for a customer who wanted a similar thing:

    http://beaconrelaunch.com/seminars/seminar-test2.php

    # September 11, 2008 at 11:21 am

    Thanks Chris for taking the time to provide such insight. I appreciate it.

    # September 11, 2008 at 12:05 pm

    I did something similar to this on one of the custom e-commerce apps I built at work. Of course it was done before I knew anything about jQuery, so it’s a bit messier than the example Chris has provided, but the theory is the same.

    I have the submit button deactive until the user fills out all the required fields and checks the box indicating they’ve read the liability waiver and agree to the terms (or in other words, poor mans digital signing of said waiver)

    I’d worked on a similar thing several years ago for a clothing store site I was working on with a guy, we populated all the potential drop downs and whatnot from the database, and kept them hidden revealing them only based on what selections were made earlier in the form. The smarter way to do that these days would be ajax.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".