...

View Full Version : Need Example to Prompt Something in the Same Page When Click on the Content of ....



jiapei_jen
05-08-2007, 11:40 PM
I need to prompt a set of input fields, checkboxes, etc. onto the bottom of a table when the content (i.e., text) of a certain table cell is clicked by users.

I have tried to Google but was unable to provide proper key words to find the relevant JavaScript examples. I use IE6. Please advise. Thank you.

christslove
05-09-2007, 12:40 AM
Here you go.... a simple one, but you should get the idea..... hope it works for you. The only problem is that when you click on the cell, the table disappears, so if you dont want that happening I can try to fix it for you, although it may be a kinda wierd fix. Have fun :thumbsup:


<html>
<head>
<script type="text/javascript">
<!--
function clickText(cell){
if (cell==1){
document.write("<form><input type=\"checkbox\" value=\"someText\" />Some checkbox</form>")
}
else if(cell==2){
document.write("<form><input type=\"text\" /></form>")
}
}

//-->
</script>
</head>
<body>
<table name="getStuff" border="1">
<tr>
<td onclick="clickText(1)">Text</td>
<td onclick="clickText(2)">More Text</td>
</tr>
</table>
</body>
</html>

Hope this is what you meant

Matt

EDIT: Just noticed that you did want it to pull up under the table..... I'm working on it.

jiapei_jen
05-09-2007, 02:09 PM
Thank you very much for your reply and your code. It is very very close to what I was looking for.

I do expect the "table" still stays on the screen. Whatever prompted onto the screen after the clicking is to be displayed at the bottom of the "table" because the "table" will still be part of the "form".

May I know why it is going to be a weird fix? Thank you.

christslove
05-09-2007, 11:47 PM
Well, the way I thought I would have to fix it wasn't really working, so I'm trying to figure this out.... I know I've seen similar things done, I just dont remember how to do it, but dont worry, I'm working on it. Hopefully I can have it fixed by the end of today.

Matt

UPDATE: So far, the farthest I've gotten is getting the table to stay when you click on a cell, but when you click on another cell, nothing happens. I'm trying to fix this, but if you could live with it, just tell me and I'll post what I've got.

jiapei_jen
05-10-2007, 02:14 PM
Thanks for your response and help.

Somebody told my that we should use document.createElement instead of document.write

Of course, I do not know JavaScript well enough to tell if that advice is good or not.

christslove
05-10-2007, 03:08 PM
Hmm.... I haven't ever used that method before, but I'll look into it. I'll be on after school to do some more with the script.

jiapei_jen
05-10-2007, 06:28 PM
The code shown below puts the prompted HTML element inside the table cell. I am still not there it. I have to put the prompted HTML element below the table.


<html>
<head>
<script type="text/javascript">

function clickText(cell)
{
if (cell==1)
{
document.getElementById('theCheckbox').style.display = "inline";
} else
if(cell==2)
{
document.getElementById('theText').style.display = "inline";
}
}

</script>
</head>
<body>
<table name="getStuff" border="1">
<tr>
<td onclick="clickText(1)">Text
<div id="theCheckbox" style="display: none;">
<input type="checkbox" value="someText">
Some Checkbox
</div>
</td>
<td onclick="clickText(2)">More Text
<div id="theText" style="display: none;">
<input type="text"/>
</div>

</td>
</tr>
</table>
</body>
</html>

glenngv
05-10-2007, 10:28 PM
Then put the divs below the table.

<table name="getStuff" border="1">
<tr>
<td onclick="clickText(1)">Text
</td>
<td onclick="clickText(2)">More Text
</td>
</tr>
</table>
<div id="theCheckbox" style="display: none;">
<input type="checkbox" value="someText">Some Checkbox
</div>
<div id="theText" style="display: none;">
<input type="text"/>
</div>

christslove
05-10-2007, 11:33 PM
It would be easier to use switch statements instead of if statements, like this:


function clickText(cell){
switch (cell){
case 1:
document.getElementById('theCheckbox').style.display="inline"
break
case 2:
document.getElementById('theText').style.display="inline"
break
}
}

Also, I've noticed another problem that I'm not sure if you want it to happen like this or not..... but when you click on the second cell, the first one stays there.... is that what you want, or do you want the other one to disappear?

If you want it to disappear then change the above code to this:


function clickText(cell){
switch (cell){
case 1:
document.getElementById('theCheckbox').style.display="inline"
document.getElementById('theText').style.display="none"
break
case 2:
document.getElementById('theText').style.display="inline"
document.getElementById('theCheckbox').style.display="none"
break
}
}

jiapei_jen
05-11-2007, 02:39 PM
Yeah, the second one is what I am trying to do for my task at hand - when the second cell is clicked, the HTML element prompted by clicking the first cell is supposed to disappear.

Thanks very much for your time, your code, and your help.

christslove
05-11-2007, 03:02 PM
No problem, it was fun and a bit of a learning experience.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum