onclick replace php included file

Question

I am not sure if what I am trying to do is possible but here it is.

I have a header, inside that header is a php include for "login.php"

On "login.php" is a link that takes the user to "forgot.php".

What I would like to do is, instead of the user being taken to "forgot.php" is to just refresh the page with "login.php" include replaced with "forgot.php" or do some sort of content switch out, sort of like using an Iframe.

I dont want to bring the user to a new page, I just want to switch out the content displayed inside my header.

Thanks for any help you can provide, code samples appreciated.

Answer 1

PHP is parsed in it's entirety before the page is displayed in a user's browser, therefore, things such as onclick() or onsubmit() that are featured in JavaScript (a client-side language) are not available in PHP.

There would be a few solutions possible:

1) Use AJAX to submit a query to the server and replace the HTML content on the page with the result.

2) As you mentioned, use iFrames.

3) Have a hidden <div> on your login.php page that contains the HTML for forgot.php, and use a simple JavaScript onclick() method to swap the page contents. In this case, both "pages" would actually all be in the same file of login.php.

Answer 2

I can think of two things:

What I would do, assuming that the differences between your login.php and forgot.php aren't too different because you don't to change the page, is to put the html for the forgot.php just below the html for the login.php and hide the login.php html and show the forgot.php content.

example:

<div id = "login">
    <!-- Login HTML -->
</div>
<div id = "forgot" style = "display:none" >
    <!-- forgot password HTML -->
</div>
<input type="button" value="Forgot Password?" onclick="forgot()" />

Javascript:

function forgot(){
    document.getElementById('login').style.display='none';
    document.getElementById('forgot').style.display='block';
}

Otherwise, you could use an ajax call to the page and insert the necessary elements. This would create a noticeable pause.

Answer 3

You can't change the include statement from javascript because the script was already executed by the time you see your page in the browser.

Use ajax to dinamically change the content of the page without refreshing. If you're using jquery the code would be pretty simple:

<script type="text/javascript">
$(document).ready(function() {
    $('#link').click(function() {
        $.get('script.php', function(data) {
            $('#divOfContainer').html(data);
        });
    });
});
</script>
<div id="divOfContainer"><!-- the content to be fetched with ajax will be put here --></div>
<a href="#" id="link">Link</a>

Answer 4

If you are trying to accomplish this without reloading the page you will need to use AJAX.

If you want to just keep the login.php you can perhaps do something like:

<a href="login.php?p=forgot">link</a>

with php something like

<?
if ( isset($_GET['p']) && $_GET['p']=="forgot") {
    include('forgot.php');
} else {
    include('login.php');
}