Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need Example to Prompt Something in the Same Page When Click on the Content of ....

    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.

  • #2
    New Coder
    Join Date
    Apr 2007
    Location
    Chicken
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

    Code:
    <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.
    Last edited by christslove; 05-08-2007 at 11:46 PM.

  • #3
    New Coder
    Join Date
    Mar 2005
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New Coder
    Join Date
    Apr 2007
    Location
    Chicken
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Last edited by christslove; 05-10-2007 at 12:24 AM. Reason: progress update

  • #5
    New Coder
    Join Date
    Mar 2005
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #6
    New Coder
    Join Date
    Apr 2007
    Location
    Chicken
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #7
    New Coder
    Join Date
    Mar 2005
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Code:
    <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>

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,965
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Then put the divs below the table.
    Code:
    <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>

  • #9
    New Coder
    Join Date
    Apr 2007
    Location
    Chicken
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It would be easier to use switch statements instead of if statements, like this:

    Code:
    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:

    Code:
    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
    	}
    }
    Last edited by christslove; 05-10-2007 at 10:44 PM.

  • #10
    New Coder
    Join Date
    Mar 2005
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #11
    New Coder
    Join Date
    Apr 2007
    Location
    Chicken
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No problem, it was fun and a bit of a learning experience.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •