Forum Moderators: open
i should know this, but i dont...
I have a form that i want to make a little more dynamic. I have a checkbox option that says "Has the file closed?" and you have a Y or N checkbox. When the agent checks Y i want another "hidden" are to magically appear with more options....like the closing date, address of closing proerty....etc.
can anyone show me, or point me towards the solution for this?
im working on a Linux box using PHP if that matters....but i thought it could be pure HTML and maybe some Javascript?
On the input that decides whether or not to show things, have some javascript to catch it, something like:
<input onselect="document.getElementById('other-inputs').style.display = 'block';" />I forget whether you can just use the
onclickonselectonclickonclickAfter that, your
div<div id="other-inputs">
<input />
...
</div>Which already has the CSS of:
div#other-inputs { display: none; }And that will get overridden when you click on the first input :)
P!
you are talking about a "radio button", not a checkbox, right? for y/n..
The OP said checkbox, besides, a checkbox can do Yes/No anyway?
If it's checked, Yes, if it isn't, No?
A radio button can't be un-radioed if a user had clicked on it by accident, to uninitialise those extra form fields, whereas a checkbox could be unchecked.
[edited by: Setek at 10:25 pm (utc) on May 23, 2007]
i actually changed the input to "radio"...seems more intuitive for users...
in any case, how can i now make it disappear if after the select, yes...then choose NO and have it re-hide?
<script type="text/javascript">
// <![CDATA[
function display(obj,id1,id2) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
if ( txt.match(id1) ) {
document.getElementById(id1).style.display = 'block';
}
if ( txt.match(id2) ) {
document.getElementById(id2).style.display = 'block';
}
}
// ]]>
</script>
</head><body>
<table width="340" cellspacing="0" cellpadding="2">
<thead>
<tr>
<td class="title">Type:</td>
<td class="field">
<select name="type" onchange="display(this,'image','text');">
<option>Please select:</option>
<option value="image">Image</option>
<option value="text">Text</option>
<option value="invisible">Invisible</option>
</select>
</td>
</tr>
</thead>
<tfoot>
<tr>
<td class="align-center" colspan="2"><input type="submit" name="submit" value="Update" /> <input type="reset" value="Reset" /></td>
</tr>
</tfoot>
<tbody id="text" style="display: none;">
<tr>
<td class="title">Text Color:</td>
<td class="field"><input type="text" name="color" size="8" maxlength="7" /></td>
</tr>
</tbody>
<tbody id="image" style="display: none;">
<tr>
<td class="title">Image:</td>
<td class="field"><input type="file" name="image" size="10" /></td>
</tr>
<tr>
<td class="title">X Coordinates:</td>
<td class="field"><input type="text" name="x_coordinates" size="5" /></td>
</tr>
<tr>
<td class="title">Y Coordinates:</td>
<td class="field"><input type="text" name="y_coordinates" size="5" /></td>
</tr>
<tr>
<td class="title">Text Color:</td>
<td class="field"><input type="text" name="color" size="8" maxlength="7" /></td>
</tr>
</tbody>
<tbody>
<tr>
<td class="title">Display:</td>
<td class="field">
<select name="display">
<option value="visitors">Visitors</option>
<option value="hits">Hits</option>
</select>
</td>
</tr>
</tbody>
</table>
