[RESOLVED] visibility/invisibility in php

freedmania

On a page intended to manage a database table, I'd like the input configuration to appear only when needed. I expected to do this by displaying/not displaying divs. I wanted to start with the insertion form hidden. Clicking the "New Input" button would reveal it.

<style>
#theInsert{
	position:relative;
	top:50px;
	left:0px;
	display:none;
}
</style>
</head>

<body>
<?php 

if($_POST['action']=="visible"){
	$ch = $_POST['choice'];
	switch($ch){
		case "New Input":
			echo '<script>document.getElementById("theInsert").style.display = ""</script>';
		break;
	}
}

<form name="actionSelect" class="actionSelect" action="thisScript.php" method="post">
<input type="hidden" name="action" value="visible">
<table name="buttons" width="465" border="1" cellpadding="1" cellspacing="0">
	<tr><td align="center"><input type="submit" name="choice" value="New Input" /></td></tr>
</table>
</form>

<div id="theInsert">
<h2>Insert a new theme:</h2>
<form>
<table name="insertTheme" border="1" cellpadding="1" cellspacing="0">
	<tr><th width="45">ID</th><th width="100">Theme Name</th><th width="100">Theme Color</th><th width="100">Font Name</th><th width="100">Font Color</th> </tr>
	<tr>
		<td><?php echo $inid; ?></td><td><?php echo $inThName; ?></td><td><?php echo $inTcName; ?></td><td><?php echo $inFname; ?></td><td><?php echo $inFCol; ?></td>
	</tr>
</table>
</form>
</div>

There would be more to it, but I'm stymied by the fact that this button doesn't reveal anything. I've tried several variations of the above, to no avail. And so I humbly ask for help.

Please, can someone lead me out of this swamp?

Much thanks in advance,
Paul

Weedpacket

When the JavaScript runs, the "theInsert" element doesn't exist in the page yet (it's further down) so trying to reset its style would have no effect. Why are you using PHP for this instead of JavaScript, anyway?

freedmania

Yep, that's it all right. (Now, why couldn't I see that??)

I'm using php here because the main business of this page is the manipulation of a table in a database, which is php-work. The table's really small, and probably will stay that way, so I have room for both the controls and a display of the complete contents of the table on one screen. Nonetheless, I wanted the controls to use screen-space only when needed.

Thanks again. Now I can drink myself into a coma with a clear conscience. (I won't, but I can, and that makes all the difference.)

Weedpacket

freedmania wrote:
The table's really small, and probably will stay that way, so I have room for both the controls and a display of the complete contents of the table on one screen. Nonetheless, I wanted the controls to use screen-space only when needed.

Well yes, I figured that; but why use PHP instead of JavaScript to do it?

freedmania

I don't know how to query sql in javascript, and can't imagine a JS alternative. Could you give me an example of what you're talking about?

Weedpacket

freedmania wrote:
I don't know how to query sql in javascript

if($_POST['action']=="visible"){
    $ch = $_POST['choice'];
    switch($ch){
        case "New Input":
            echo '<script>document.getElementById("theInsert").style.display = ""</script>';
        break;
    }
}

What SQL query? That's the only bit that's affected by your button is it not?

freedmania

I'm sorry, I must not understand your question.

I did it this way because it seemed to be the most economical approach to fielding $_POST variables and dealing with "visibility" in quick succession. Can this code be more concise?

Or, what do you want to suggest?

Weedpacket

You click a button and the form appears, right? I'm not understanding why the server needs to be involved at all.

<script>
function showTheInsert()
{
    document.getElementById("theInsert").style.display = ";
}
</script>
<!-- ..... -->
<table name="buttons" width="465" border="1" cellpadding="1" cellspacing="0">
    <tr><td align="center"><input type="button" value="New Input" onclick="showTheInsert()" /></td></tr>
</table>

And if you do need the server, you don't need any JavaScript.

<style>
#theInsert{
    position:relative;
    top:50px;
    left:0px;
<?php
// Decide whether to print "display:none;" here or not.
?>
}
</style>

Of course, now there's no JavaScript, there's nothing to change the visibility of the form - so why put it in the page at all if no-one's going to see it?

if($_POST['action']=="visible"){
    $ch = $_POST['choice'];
    switch($ch){
        case "New Input":
?>
<div id="theInsert">
<!-- ... -->
</div>
?>
    break;
    }
}

And what's with that table being used to lay out the button? What's wrong with using a bit of CSS instead?