Jump to content

bladesage

New Members
  • Posts

    1
  • Joined

  • Last visited

    Never

Profile Information

  • Gender
    Not Telling

bladesage's Achievements

Newbie

Newbie (1/5)

0

Reputation

  1. 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 :).
×
×
  • 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.