Grow your CSS skills. Land your dream job.

Seminar Registration Form – some improvement ;)

  • # December 7, 2012 at 2:52 am

    I saw this wonderful thing (Seminar Registration Form) in Demos. Very cool form! But it’s code can be improved. Now there is:

    switch ($(“#num_attendees option:selected”).text()) {
    case ’1′:
    $(“#attendee_1_wrap”).slideDown().find(“input”).addClass(“active_name_field”);
    break;
    case ’2′:
    $(“#attendee_1_wrap”).slideDown().find(“input”).addClass(“active_name_field”);
    $(“#attendee_2_wrap”).slideDown().find(“input”).addClass(“active_name_field”);
    break;
    case ’3′:
    $(“#attendee_1_wrap”).slideDown().find(“input”).addClass(“active_name_field”);
    $(“#attendee_2_wrap”).slideDown().find(“input”).addClass(“active_name_field”);
    $(“#attendee_3_wrap”).slideDown().find(“input”).addClass(“active_name_field”);
    break;
    case ’4′:
    $(“#attendee_1_wrap”).slideDown().find(“input”).addClass(“active_name_field”);
    $(“#attendee_2_wrap”).slideDown().find(“input”).addClass(“active_name_field”);
    $(“#attendee_3_wrap”).slideDown().find(“input”).addClass(“active_name_field”);
    $(“#attendee_4_wrap”).slideDown().find(“input”).addClass(“active_name_field”);
    break;
    case ’5′:
    $(“#attendee_1_wrap”).slideDown().find(“input”).addClass(“active_name_field”);
    $(“#attendee_2_wrap”).slideDown().find(“input”).addClass(“active_name_field”);
    $(“#attendee_3_wrap”).slideDown().find(“input”).addClass(“active_name_field”);
    $(“#attendee_4_wrap”).slideDown().find(“input”).addClass(“active_name_field”);
    $(“#attendee_5_wrap”).slideDown().find(“input”).addClass(“active_name_field”);
    break;
    }

    But if you know how work “switch/break;” it can be written as:
    switch ($(“#num_attendees option:selected”).text()) {
    case ’5′:
    $(“#attendee_5_wrap”).slideDown().find(“input”).addClass(“active_name_field”);
    case ’4′:
    $(“#attendee_4_wrap”).slideDown().find(“input”).addClass(“active_name_field”);
    case ’3′:
    $(“#attendee_3_wrap”).slideDown().find(“input”).addClass(“active_name_field”);
    case ’2′:
    $(“#attendee_2_wrap”).slideDown().find(“input”).addClass(“active_name_field”);
    case ’1′:
    $(“#attendee_1_wrap”).slideDown().find(“input”).addClass(“active_name_field”);
    break;
    }

    The result is the same, but code is shorter! :)

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

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