Hi all,
I need to create a form that will collect some info.
The info collected should change based on a selection made by means of a dropdown menu.
Example:
The drop down menu has 2 items:
1- category 1
2- category 2
selecting 'category 1' from the menu the following fields appear:
- duration (dropdown menu)
- genre (dropdown menu)
selecting 'category 2' from the menu the following fields appear:
- destination (dropdown menu)
- license (dropdown menu)
What is the best approach to solve this problem?
Can I build a tabbed panels widget with spry instead of the dropdown selection menu?
Every panel will contain a form;
Once the user fill panel 1 and clicks the submit button the second panel will be displayed.
How can I collect info submitted with every panel? should I use sessions?
I use currently ADDT.
Is there a javascript solution that works with ADDT that could do the job?
TIA in advance.
Tony
Shame on Adobe shutting down interakt forums.
Fred you are my last resort! Long life to interaktonline.info!
[FORM] different fields based on menu selection?
Re: [FORM] different fields based on menu selection?
Hi Tony,
For the first problem I would use jquery to show the next fields based on the selection from the dropdown.
Will post an example if you need help with this. Might be a bit delayed as I am having pc issues at the moment.
For the second problem I don't suggest tabs, I dont use ADDT and spry so I can't really comment but I would rather use normal insert transaction for the first page and the url after insert points to a page containing the second part of the form. On this form you have an update function to update the record created on the first form. The url redirect on this page will go back to the original destination.
Hope it makes sense.
Yea it is tragic that they shut the site down.
Thanks for the heads up on this site.
For the first problem I would use jquery to show the next fields based on the selection from the dropdown.
Will post an example if you need help with this. Might be a bit delayed as I am having pc issues at the moment.
For the second problem I don't suggest tabs, I dont use ADDT and spry so I can't really comment but I would rather use normal insert transaction for the first page and the url after insert points to a page containing the second part of the form. On this form you have an update function to update the record created on the first form. The url redirect on this page will go back to the original destination.
Hope it makes sense.
Yea it is tragic that they shut the site down.
Thanks for the heads up on this site.
Re: [FORM] different fields based on menu selection?
Tony,
Sorry I forgot about this script I promised you for the dropdowns based on a selection from a dropdown.
Jquery as usual is required.
The Script.
The actual dropdowns.
Hope it make sense. It did when I code it initially. 
Here is a write-up with images of it working.
http://www.xms-systems.co.uk/articles_read.php?a_id=83
Sorry I forgot about this script I promised you for the dropdowns based on a selection from a dropdown.
Jquery as usual is required.
The Script.
Code: Select all
<script type="text/javascript">
<!--
$(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
});
//-->
</script>Code: Select all
<select class="type_data" name="url_param_<?php echo $cnt1; ?>" id="url_param_<?php echo $cnt1; ?>">
<option value="9999" <?php if (!(strcmp(9999, 9999))) {echo "SELECTED";} ?>>Select...</option>
<option value="Y" <?php if (!(strcmp("Y", 9999))) {echo "SELECTED";} ?>>I added a Page</option>
<option value="" <?php if (!(strcmp("", 9999))) {echo "SELECTED";} ?>>Use an XMS Systems Page</option>
</select>
<?php echo $tNGs->displayFieldError("menu_schema", "url_param", $cnt1); ?> <br>
<div id="custom_page">
<select class="type_data" name="param_value_<?php echo $cnt1; ?>" id="param_value_<?php echo $cnt1; ?>">
<!-- <option value="" <?php if (!(strcmp("", $row_rsmenu_schema['param_value']))) {echo "SELECTED";} ?>><?php echo NXT_getResource("Select one..."); ?></option> -->
<option value="" <?php if (!(strcmp("", $row_rsmenu_schema['param_value']))) {echo "SELECTED";} ?>>Select My Page</option>
<?php
do {
?>
<option value="<?php echo $row_rs_page['pg_id']?>"<?php if (!(strcmp($row_rs_page['pg_id'], $row_rsmenu_schema['param_value']))) {echo "SELECTED";} ?>><?php echo $row_rs_page['pg_title']?></option>
<?php
} while ($row_rs_page = mysql_fetch_assoc($rs_page));
$rows = mysql_num_rows($rs_page);
if($rows > 0) {
mysql_data_seek($rs_page, 0);
$row_rs_page = mysql_fetch_assoc($rs_page);
}
?>
</select>
<?php echo $tNGs->displayFieldError("menu_schema", "param_value", $cnt1); ?> <br>
</div>
<div id="url">
<select class="type_data" name="men_drop" id="men_drop">
<option value="">Select System Page...</option>
<!-- <option value="1" <?php //if (!(strcmp(1, substr($row_rsmenu_schema['men_url'],1)))) {echo "SELECTED";} ?>>Select System File</option> -->
<option value="custom_url">Enter Custom URL </option>
<?php
do {
?>
<option value="/<?php echo $row_rs_files['fullname']?>"<?php //if (!(strcmp($row_rs_files['fullname'], strstrb(substr($row_rsmenu_schema['men_url'],1),'?')))) {echo "SELECTED";} ?>> <?php echo $row_rs_files['fullname'];?></option>
<?php
} while ($row_rs_files = mysql_fetch_assoc($rs_files));
$rows = mysql_num_rows($rs_files);
if($rows > 0) {
mysql_data_seek($rs_files, 0);
$row_rs_files = mysql_fetch_assoc($rs_files);
}
?>
</select>
<div id="boxes">
<div id="custom_url">
<input class="type_data" type="text" name="men_url_<?php echo $cnt1; ?>" id="men_url_<?php echo $cnt1; ?>" value="<?php echo KT_escapeAttribute($row_rsmenu_schema['men_url']); ?>" size="80" /></div>
<div id="mem_id">
<select class="type_data" name="member_id">
<option value="" <?php if (!(strcmp("", $row_rsmenu_schema['men_url']))) {echo "SELECTED";} ?>>Select Author / Member</option>
<?php
do {
?>
<option value="?mem_id=<?php echo $row_rs_members['id']?>"<?php if (!(strcmp($row_rs_members['id'], $row_rsmenu_schema['men_url']))) {echo "SELECTED";} ?>><?php echo $row_rs_members['mem_name']?></option>
<?php
} while ($row_rs_members = mysql_fetch_assoc($rs_members));
$rows = mysql_num_rows($rs_members);
if($rows > 0) {
mysql_data_seek($rs_members, 0);
$row_rs_members = mysql_fetch_assoc($rs_members);
}
?>
</select></div>
<div id="cat_id">
<select class="type_data" name="category_id">
<option value="" <?php if (!(strcmp("", $row_rsmenu_schema['men_url']))) {echo "SELECTED";} ?>>Select Article Category</option>
<?php
do {
?>
<option value="?c_id=<?php echo $row_rs_category['lc_id']?>"<?php if (!(strcmp($row_rs_category['lc_id'], $row_rsmenu_schema['men_url']))) {echo "SELECTED";} ?>><?php echo $row_rs_category['lc_id']; ?> - <?php echo $row_rs_category['lc_name']?> (<?php echo $row_rs_category['tot_art']; ?> Articles) Visible: <?php echo $row_rs_category['ch_name']; ?></option>
<?php
} while ($row_rs_category = mysql_fetch_assoc($rs_category));
$rows = mysql_num_rows($rs_category);
if($rows > 0) {
mysql_data_seek($rs_category, 0);
$row_rs_category = mysql_fetch_assoc($rs_category);
}
?>
</select></div>
<div id="link_cat_id">
<select class="type_data" name="link_category_id">
<option value="" <?php if (!(strcmp("", $row_rsmenu_schema['men_url']))) {echo "SELECTED";} ?>>Select Link Category</option>
<?php
do {
?>
<option value="?lc=<?php echo $row_rs_link_categories['lc_id']?>"<?php if (!(strcmp($row_rs_link_categories['lc_id'], $row_rsmenu_schema['men_url']))) {echo "SELECTED";} ?>><?php echo $row_rs_link_categories['lc_id']?> - <?php echo $row_rs_link_categories['lc_name']?> (<?php echo $row_rs_link_categories['tot_links']?> Links) Visible: <?php echo $row_rs_link_categories['ch_name']?></option>
<?php
} while ($row_rs_link_categories = mysql_fetch_assoc($rs_link_categories));
$rows = mysql_num_rows($rs_link_categories);
if($rows > 0) {
mysql_data_seek($rs_link_categories, 0);
$row_rs_link_categories = mysql_fetch_assoc($rs_link_categories);
}
?>
</select></div>
<div id="file_cat">
<select class="type_data" name="file_cat_id">
<option value="">Select Document Category</option>
<?php
do {
?>
<option value="?cat_id=<?php echo $row_rs_file_list['lc_id']?>"><?php echo $row_rs_file_list['lc_id']; ?> - <?php echo $row_rs_file_list['lc_name']?> (<?php echo $row_rs_file_list['tot_files']; ?> Files) Visible: <?php echo $row_rs_file_list['ch_name']; ?></option>
<?php
} while ($row_rs_file_list = mysql_fetch_assoc($rs_file_list));
$rows = mysql_num_rows($rs_file_list);
if($rows > 0) {
mysql_data_seek($rs_file_list, 0);
$row_rs_file_list = mysql_fetch_assoc($rs_file_list);
}
?>
</select><br />
</div>
</div>
<p class="KT_field_hint">For custom links and files not on the list, follow the following procedure<br>
1. Select "Use and XMS Systems Page"<br>
2. Select "Enter Custom URL"<br>
3. Enter # to make the menu option "Not Clickable"<br />
4. Enter a page on our own site as /file_name.php<br />
5. Enter the complete file for pages not on your site<br />
e.g. <b>e.g. http://<?php echo $_SERVER['SERVER_NAME']; ?>/index.php</b><br>
Select "External Page" below.</p>
</div>Here is a write-up with images of it working.
http://www.xms-systems.co.uk/articles_read.php?a_id=83