PDA

View Full Version : Dynamic field display



confusus
03-03-2008, 10:56 PM
I am trying to dynamically display a text field or a date field depending on if the user selects "region" or "Date" from a droplist. I don't know how to read the selected value within the scriptlet. What should I compare in the "<% if(Date is selected){ %>" line?

Please see attachment for sample code and expected result.

codeexploiter
03-05-2008, 05:06 AM
The thing you are trying to do can be done using JavaScript alone without much trouble. The basic idea is something like the following you create all the form elements using HTML and hide the necessary ones until they need to be displayed. You can hide/show based on the selection user makes. Have a look at the following code, which is a simple example of what I've mentioned above.



<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> </title>
<style type="text/css">

</style>
<script type="text/javascript">
var hideElemIds = ['one','two'];
var selectChangeHandler = function(selElem){
hideAll();
var d = document;
switch(selElem.options[selElem.selectedIndex].value){
case "1":{
d.getElementById('one').style.display = '';
return;
}
case "2":{
d.getElementById('two').style.display = '';
return;
}
}
}
var hideAll = function(){
var d = document;
for(var i = 0; i < hideElemIds.length; i++){
d.getElementById(hideElemIds[i]).style.display = 'none';
}
}
</script>
</head>
<body>
<div>
<form>
<select name='sel1''' onchange="selectChangeHandler(this);">
<option selected="selected" value="">Select An Option</option>
<option value="1">Show First Field</option>
<option value="2">Show Second Field</option>
</select><br/>
<input type="text" id="one" value="This is first" style="display: none;"/>
<input type="text" id="two" value="This is second" style="display: none;"/>
</form>
</div>
</body>
</html>



Hope this help you.