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.
Code:
<?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.
New Comer (less than 5 posts)
Dynamic field display
Posting Permissions
Reply With Quote
Bookmarks