Form field question.

[PureEvil]

Good Morning all. Thanks for taking the time to read this.

I'm pretty new to Java, so I'm not sure if I can do this or not. I'm looking to have a drop down option box in one of my forms. One of the items in the drop down box requires more information from the user. I would like to have a text input box magically appear in this form when this option has been selected. I would also like text to appear that states "add data here". Can this be done with Java? and if so, how? If someone could point me at an example or maybe just post some code I could look over that would rock.

Thanks in advance for your time.

[bladesage]

Well, there are several ways of doing that.

1) You can make a small div to contain the data you wish to appear/disappear
[code]<script type="text/javascript">
<!--

var contents = "Text to label the box:<br />\n";
contents += "<input type=\"text\" name=\"boxName\" size=\"40\" /><br /><br />\n\n";

function toggleBox()
{
if(document.formName.selectName.value == "value4")
{
document.getElementById("contDiv").innerHTML = contents;
}
else
{
document.getElementById("contDiv").innerHTML = "";
}
}

-->
</script>

<form action="action.php" name="formName">

<select name="selectName" onchange="toggleBox()">
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
<option value="value3">Option 3</option>
<option value="value4">Option 4</option>
</select><br /><br />

<div id="contDiv"></div>

<input type="submit" value="Send!" />

</form>[/code]

2) Create an element node, that will be deleted if the value is not the particular one you want (this is a bit more complex, but way more fun!)
[code]<script type="text/javascript">
<!--

function toggleBox()
{
if(document.formName.selectName.value == "value4")
{
makeNodes();
}
else
{
destroyNodes();
}
}

function makeNodes()
{
var parElem = document.getElementById("contDiv");
var newNode = document.createElement("input");
var newText = document.createTextNode("The text to describe the box<br />\n");
newNode.setAttribute("type", "text");
newNode.setAttribute("name", "inputName");
newNode.setAttribute("size", 40);

parElem.appendChild(newText);
parElem.appendChild(newNode);
}

function destroyNodes()
{
var contElem = document.getElementById("contDiv");
contElem.removeChild(contElem.childNodes.item(1));
contElem.removeChild(contElem.childNodes.item(0));
}

-->
</script>

<form action="action.php" name="formName">

<select name="selectName" onchange="toggleBox()">
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
<option value="value3">Option 3</option>
<option value="value4">Option 4</option>
</select><br /><br />

<div id="contDiv"></div>

<input type="submit" value="Send!" />

</form>[/code]

Yes, that last one made it a bit more complicated than necessary, but that's what I love about it.  I love scripting.

If you decide to get into manipulating Nodes later in your exploration of JavaScript, that could be of some help :).