CODEWITHSUNDEEP
phpjavascriptjqueryformsdesign-patterns
I'll-Be-Back
I'll-Be-Back

Reputation: 10828

How to make Multiple Forms more reliable?

I am looking for a neat solutions for the multiple Forms.

Have a look at the example screenshot:

enter image description here

There are three networks in the dropdown, AT&T, Verizon Wireless and T-Mobile.

I've selected 'AT&T' from the dropdown list and then 'Sale Type' radios appear. T-Mobile network may have same Sale Type as 'AT&T' network but two extras Sale Type.

Majority of the text boxes from all the Sale Type are the same. For example:

Consumers will have 20 Fields and Business have 27 Fields (Extras Fields). Sim-Only will have less fields - 15 Fields (A few removed and new fields).

What is a good solution implement like this and DRY principle?

I have used jQuery with a lot of $('.name').hide(); $('.name').hide(); but it get real messy. Example:

$(".at&t_consumer_radio").click(function(){
       showSaleType("at&t_consumer");
});

function showSaleType(type) {
        if (type == "at&t_consumer") { 
          $('.name').hide(); 
          $('.name').hide(); and so on..
     } 
}

When completing the form, then I use PHP to validate it.

Upvotes: 0

Views: 106

Answers (2)

Matt Moore
Matt Moore

Reputation: 581

Here's the Fiddle: http://jsfiddle.net/GvGoldmedal/FxEGP/

Your best bet is to create the following class tags:

.att, .verizon. , .tmobile, .consumer, .business, .sim

Then you can tag the fields based on when they need to be hidden. If a field is used for verison then it'd get a verizon class. If a field is bussiness type then it'd get the business class. Also add the "hide" class to any field that isn't ALWAYS showing.

Some Field:
<input type="text" class=" hide verizon att consumer" />

Another Field
<input type="text" class = " hide att business" />

Make sure to label every field. Also make sure your radio buttons and the options in your select have values that match the classes. And give your select and radio button a class of 'option', like so: att verizon tmobile 

<input type='radio' name='sale_type' class='option' value="business" />
<input type='radio' name='sale_type' class='option' value="consumer" />
<input type='radio' name='sale_type' class='option' value="consumer" />

.. and so on

Now for the Jquery:

//selectId is the ID of your select 
// myform is the id of your form



$(".option").change(function()
{   
     // get the value of our select and option
     carrier =  $('#selectId option:selected').val();
     sale_type = $('input[name=sale_type]:checked').val();

    // Hide all fields that don't always show up.
     $(".hide").hide();

    //Show all fields that match our carrier and sale type

    $(".hide").each(function(){
        if($(this).hasClass(carrier) && $(this).hasClass(sale_type))
        {            
            $(this).show();
        }    
    });
});

There you have it. Anytime a new option is selected all the fields that aren't part of the form all the time will be hidden and the ones matching your carrier and sale type will then be shown. It will happen almost immediately and the user won't be able to tell the different. You can do some fading to make it look more smooth if you want. Also, if a field is visible for both verizon and att then just add both classes to that input. Let me know if you have any questions.

I'll try and get a Fiddle up showing exactly how to do it.

Upvotes: 1

Mark Walters
Mark Walters

Reputation: 12390

Hide all the fields that are only shown for specific choices e.g Business or sim free.

Like so

<input type="text" class="standard" />
<input type="text" class="business" style="display:none" />
<input type="text" class="simOnly" style="display:none" />
<input type="text" class="standard" />
<input type="text" class="business simOnly" style="display:none" />

Not sure i'm explaining this that well. :(

Then use jquery to just show the business ones if that option is chosen

$("#businessRadio").click(function(){          
    $('.business').show();   
});

This way you aren't showing and hiding everything, just those inputs specific to each sale type

Upvotes: 1

Related Questions