JavaScript/PHP [Show/Hide]

Question

What I am trying to figure out how to use JavaScript to Show/Hide PHP scripts.

JavaScript:

<script type="text/javascript">
function showhide(id){ 
    if (document.getElementById){ 
    obj = document.getElementById(id); 
    if (obj.style.display == "none"){ 
    obj.style.display = ""; 
    } else { 
     obj.style.display = "none"; 
    } 
  }
} 
</script>

Body Code:

<?php
echo "<a href='javascript:showhide('delivery.php');'>Show/Hide Delivery options</a>";
require "delivery.php" ?>

Any ideas on why/how I could get this to work?

Any help is appreciated!

This one might take forever to figure out (because its not possible lol) — Ozzy
– Ozzy, Commented May 8, 2012 at 21:25
Look into AJAX/JQEURY. You can kind of get what you looking for by loading in different things through AJAX to simulate what you want to do. — Serguei Fedorov
– Serguei Fedorov, Commented May 8, 2012 at 21:26
Do you to show the contents of the php-file or the result of the executed php-file? — Zombaya
– Zombaya, Commented May 8, 2012 at 21:26
The server will read the PHP code regardless of javascript showing/hiding it. — Norse
– Norse, Commented May 8, 2012 at 21:26

slowBear · Accepted Answer · 2012-05-08 21:35:23Z

JavaScript is Client-side, that means it is executed on your PC, after the website has been downloaded from the server.

PHP is server-side, that means it is executed on the Server computer, and then it sends a pure HTML page to your PC.

That's why its not possible. You have to use PHP to do that, using some variables. Otherwise you can use javascript/ajax to send a request to the server, which then sends the new information back to the client, which can then update the page.

But its better to just do it in PHP like this:

if (isset($_GET['some_var'])) {
    switch ($_GET['some_var']) {
        default: case "blah":
                 include("somefile.php"); break;
        case "nyah":
                 include("some_other_file.php"); break;
    }
}

'some_var' can be send to the PHP page with a form like this:

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="GET">
    <input type="text" name="some_var" value="blah"/>
    <input type="submit" value="Go"/>
</form>

If you type "blah" into the text field and send it, the page will show 'somefile.php', but if you type "nyah" it will show 'some_other_file.php's contents instead.

Hope this helps.

paulslater19 · Accepted Answer · 2012-05-08 21:26:38Z

1

I think what you're looking for is ajax (e.g. http://api.jquery.com/jQuery.get/)

answered May 8, 2012 at 21:26

paulslater19

5,9171 gold badge30 silver badges25 bronze badges

Comments

Spudley · Accepted Answer · 2012-05-08 21:33:09Z

You cannot achieve what you're trying to do in the way you're doing it here. As stated by @Ozzy in the comments, it is impossible.

The reason for this is that the Javascript code never knows about what the PHP code is doing. All the JS code knows about is what is received by the browser. This means that it gets the contents of the delivery.php file as part of the page, but does not know that it originated from a separate file to the rest of the page, let alone know what that file was called.

The quick answer is to add a wrapping <div> element around the require() statement.

This will give you an element that your Javascript code can target for the show/hide function.

So your PHP code might now look like this:

<?php
echo "<a href='javascript:showhide('deliveryblock');'>Show/Hide Delivery options</a>";
echo "<div id='deliveryblock'>";
require "delivery.php"
echo "</div>";
?>

(This does assume that the content generated by delivery.php is valid HTML code, but you haven't shown us what that file looks like, so I'll just have to make that assumption).

Hope that helps.

mostar · Accepted Answer · 2012-05-08 21:34:42Z

0

I think you're basically trying to show/hide some content on the page. Your showhide function will only work for some html components on your web page. So just try to put the contents of "delivery.php" into an element like <div id='deliverydiv'></div>. Then use showhide('deliverydiv').

answered May 8, 2012 at 21:34

mostar

4,8712 gold badges30 silver badges45 bronze badges

Collectives™ on Stack Overflow

JavaScript/PHP [Show/Hide]

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related