Jump to content

Form field question.


PureEvil

Recommended Posts

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.
Link to comment
Share on other sites

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 :).
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.