Page 1 of 1
advanced forms with addt
Posted: 2011-12-19 10:26
by antonio
hi all,
I'm asked by a custome to create an advanced form that will behave as follow:
the page is divided in 3 parts:
- part 1: contains 3 field
- part 2: contains other 4 fields
- part 3: contains other 3 fields
Is there a way to make the part 2 and part 3 grayed-out (or faded) while filling part 1.
Once part 1 is filled the part 2 is 'enabled' and not anymore grayed-out/faded.
The same should happen with part 3.
Is there a way to do something similar with ADDT?
It seems that this is something easy to do with jquery buI don't know how to integrate it with ADDT.
Thanks in advance for any reply
tony
Re: advanced forms with addt
Posted: 2011-12-19 10:35
by Fred
Re: advanced forms with addt
Posted: 2011-12-19 11:11
by antonio
Hi Fred, you're a life saver!
The example you posted is almost perfect.
I've searched for another kind of example, but it seems i cannot search efficiently in that stackoverflow website.
So, I'm searching for a sample similar to the one that you posted but with this difference:
you don't have to select anything from a 'viewslector'.
The fields in part 2 should became visible once I fill the last field of the part 1.
Thanks again for your help, Fred.
tony
Re: advanced forms with addt
Posted: 2011-12-19 14:05
by Fred
Here is an example I am using in XMS Systems to assist the user to build the menu url.
The code is not optimised as I didnt really care to much about optimisation as it is obviously not used much. So I left it as is for clarity and as an example for myself as well.
Ok it uses dropdowns and based on a selection it fires the next set of relevant dropdowns, also hides the dropdown if the user made a mistake and changes the selection.
In your case you will probably use onblur() or focusout() rather than change()
Code: Select all
$(function(){
$('#custom_page').hide();
$('#url').hide();
$('#file_cat').hide();
// Check Type of page dropdown
$('#url_param_1').change(function() {
$("#url_param_1 option:selected")
var val=$(this).val()
if(val =='Y') {
$('#custom_page').show('slow');
$('#upd_button').show('slow');
$('#url').hide('slow');
} else {
$('#upd_button').show('slow');
$('#url').show('slow');
$('#custom_page').hide('slow');
}
});
// End Type of Page Dropdown
// System Page Drop Down to select custom url or Member ID
$('#custom_url').hide();
$('#men_drop').change(function() {
$("#men_url option:selected")
var val=$(this).val()
if(val =='custom_url') {
$('#custom_url').show('slow');
$('#upd_button').show('slow');
} else {
$('#custom_url').hide('slow');
}
});
// Check for blog.php or author.php and display members list
$('#mem_id').hide();
$('#men_drop').change(function() {
$("#men_id option:selected")
var val=$(this).val()
if(val =='/blog.php' || val =='/author.php') {
$('#mem_id').show('slow');
$('#upd_button').show('slow');
} else {
$('#mem_id').hide('slow');
}
});
// Check for category
$('#cat_id').hide();
$('#men_drop').change(function() {
$("#catt_id option:selected")
var val=$(this).val()
if(val =='/articles_by_category.php') {
$('#cat_id').show('slow');
$('#upd_button').show('slow');
} else {
$('#cat_id').hide('slow');
}
});
// Check for Links category
$('#link_cat_id').hide();
$('#men_drop').change(function() {
$("#catt_id option:selected")
var val=$(this).val()
if(val =='/link_category.php') {
$('#link_cat_id').show('slow');
$('#upd_button').show('slow');
} else {
$('#link_cat_id').hide('slow');
}
});
// Check for Download File category
$('#file_cat').hide();
$('#men_drop').change(function() {
$("#catt_id option:selected")
var val=$(this).val()
if(val =='/file_list_by_category.php') {
$('#file_cat').show('slow');
} else {
$('#file_cat').hide('slow');
}
});
// End System Page Drop Down
});