how to document.getElementById().innerHTML from different html/php file

Question

Hello I am really new to coding in general but I got the basics of what I need.

I have my index.html that contains this:

<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li class="hidden">
                    <a href="#page-top"></a>
                </li>
                <li class="page-scroll">
                    <a href="#portfolio">Portfolio</a>
                </li>
                <li id="navbutone" class="page-scroll">
                    <a href="login.php">Login</a>
                </li>
                <li id="navbuttwo" class="page-scroll">
                    <a href="register.php">Register</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>

keep in mind I got this from a website template that I am editing so I didn't come up with this layout

and I have a php file that has some html in it to try and replace the contents of the list when this part of the code is run:

<?php
if($login_ok) 
    { 
?>
<script type="text/javascript">
function logedin() {
    document.getElementById("one").innerHTML = "<a href="logout.php">Logout</a>";
}
</script>
<script type="text/javascript">
    logedin();
</script>
<?php
header("Location: index.html"); 
        die("Redirecting to: private.php"); 
    } 
?>

This doesn't work and I have no idea if this is even close or not. Thanks in advance for the help. also I might add that they link to login.php where they login through an html form at the bottom of the php.

?> 
<h1>Login</h1> 
<form action="login.php" method="post"> 
Username:<br /> 
<input type="text" name="username" value="<?php echo $submitted_username; ?>" /> 
<br /><br /> 
Password:<br /> 
<input type="password" name="password" value="" /> 
<br /><br /> 
<input type="submit" value="Login" /> 
</form> 
<a href="register.php">Register</a>

<script src="index.html"></script>

</html>

Update: I found what I needed instead of messing with the php file i just put this into my index.html were the links will change out:

<?php 
                require("common.php"); 
                if(empty($_SESSION['user'])) 
                    { 
                       ?> 
                        <li class="page-scroll">
                            <a href="login.php">Login</a>
                        </li>

                        <li class="page-scroll">
                            <a href="register.php">Register</a>
                        </li>
                        <?php
                    } 
                else 
                    {
                        ?> 
                        <li class="page-scroll">
                            <a href="logout.php">Logout</a>
                        </li>

                        <li class="page-scroll">
                            <a href="private.php">Members Page</a>
                        </li>
                        <?php
                    }
                ?>

were common.php just connects to my database.

I think you are going about this all wrong. Pretty sure you can't access an html outside of the browser dom (Can't access that html if its not loaded in the browser). What you need to do is do some more php work. It looks like you want to change a link if the user is logged in? — floor
– floor, Commented Feb 17, 2015 at 20:28
Can you post all the code please to get a complete understanding of what you are trying to do here. — floor
– floor, Commented Feb 17, 2015 at 20:32
why don't you try making your index.html and php file and adding you php code to the top of it. Well fixing the syntax pointed out below — floor
– floor, Commented Feb 17, 2015 at 20:39
This is completely wrong, since you can't send headers (in this case, the header("Location: index.html")) after outputting anything (including the Javascript before it). It would be better for you to read some PHP tutorials (like the one @floor mentioned) and learn, first of all, how this stuff works. Resuming: 1) PHP processes data (for example, login data) and outputs HTML (usually) according to it. 2) HTML and Javascript get to the user's browser. 3) The Javascript is executed locally in the user's browser (there's no server processing at this point, including session check). — Alejandro Iván
– Alejandro Iván, Commented Feb 17, 2015 at 20:53

Alejandro Iván · Accepted Answer · 2015-02-17 21:27:45Z

Look, I'm gonna give you some tips you could use for developing this:

First of all, you should use only PHP files (index.php instead of index.html), so it's easier to manage POST data and session variables.

So:

index.php

<?php
    // This is PHP code, executed BEFORE any output is sent.

    // First, to save data that works across page loads, we should use sessions, so we start a session that has to be called in every PHP page that uses that information.
    // Variables use the format $_SESSION['variable_name'] = value
    session_name('MySession'); // Give it a unique name
    session_start(); // Start a session
?>
<html>
    <head>
        <title>Some title for your page...</title>
    </head>
    <body>
        <!-- Here you will manage your template. It's plain HTML but, as this is a PHP file, you can include PHP code as well inside the PHP tags -->

        <?php
            // This is a PHP tag, here we can manage some PHP and output different HTML
            // We check if the user logged in or not
            if (
                isset($_SESSION['logged_in']) // Always check if a variable exists before checking its value, or PHP will complain
                &&
                $_SESSION['logged_in'] == true
            )
            {
                // The user logged in, show a LOGOUT link
                echo '<a href=logout.php>Logout</a>';
            }
            else
            {
                // Otherwise, the user did not log in. Show a link to log in.
                echo '<a href=login.php>Login</a>';
            }
        ?>

        <!-- Any other HTML you want, template or whatever -->
    </body>
<html>

Now, we used two files: login.php and logout.php. The first one will show a form, the second one will logout and redirect to the index page.

login.php

<html>
    <head>
        <title>Please log in</title>
    </head>
    <body>
        <form action="do_login.php" method="post"><!-- Notice another file: do_login.php -->
            <input type="text" name="username" placeholder="Your username" />
            <br />
            <input type="password" name="password" placeholder="Your password" />
            <br />
            <br />
            <input type="submit" name="submit" value="Log in" />
        </form>
    <body>
</html>

Now we need the file that processes the login (do_login.php in the form) and stores session data.

do_login.php

<?php
    // We use the same session as before
    session_name('MySession'); // Same name as index.php and all other files
    session_start();

    // This will be a pure PHP file that stores session data and returns to the index page.
    // You want to check data against databases here, but we will use static information for easier reading.
    // You also want to check data to be correct, but we won't do that here for simplicity.

    $username = $_POST['username']; // This is the "username" from the form.
    $password = $_POST['password']; // This is the "password" from the form.

    if (
        $username == 'John' // Username is John
        &&
        $password == 'MyPassword' // Password is MyPassword
    )
    {
        // Here the login data is correct, let's save some session variable that says the user correctly logged in.
        // Note that this is potentially extremely INSECURE! You should save other data and check every request, but this is just for you to start learning.
        $_SESSION['logged_in'] = true;

        // Ok, user logged in. Redirect to the index.
        header('Location: index.php'); // Send a redirect header (note that NOTHING has been echoed before in this page).
        exit;
    }
    else
    {
        // Login data incorrect. Redirect to an error page, let's say login_error.php
        header('Location: login_error.php');
        exit;
    }
?>

Now the file to log out:

logout.php

<?php
    // First we recreate the session and destroy the variable(s) that say the user has logged in.
    session_name('MySession'); // Same name as before
    session_start(); // We start the session. At this point, all session variables have been recreated.

    unset( $_SESSION['logged_in'] ); // We destroy the variable

    session_destroy(); // Now we drop the session

    header('Location: index.php'); // Redirect to index.php
    exit;
?>

Now we only need the login failed page:

login_error.php

<html>
    <head>
        <title>Login error!<title>
    </head>
    <body>
        <h1>Login error!</h1>
        <p>The login data was incorrect. Try again.</p>
        <br />
        <p><a href="index.php">Go back to the index page</a></p>
    </body>
</html>

I hope this helps, but you really need to read some tutorials. Have fun!

void · Accepted Answer · 2015-02-17 20:25:08Z

0

Use used " instead you should have used '

<script type="text/javascript">
function logedin() {
    document.getElementById("one").innerHTML = "<a href='logout.php'>Logout</a>";
}
</script>

answered Feb 17, 2015 at 20:25

void

36.8k10 gold badges72 silver badges111 bronze badges

4 Comments

floor Over a year ago

Even if he fixes that syntax error, can he access that html file if its not loaded in the dom?

void Over a year ago

Hey Jacob, you said they are two different files. What are you doing to bring the html file inside PHP file?

Jacob Kelley Over a year ago

the index.html has a the link to the login.php and there they login. once it confirms they have loged in, i want it to take them back to index.html and change the login link to the logout link with logout.php

void Over a year ago

You dont do this, this way. You should be using session variables for this.

jmmk · Accepted Answer · 2015-02-17 20:35:54Z

0

Change to following line:

document.getElementById("one").innerHTML = "<a href=\"logout.php\">Logout</a>";

" characters has to be escaped. And link has to be like that

<a href="#" onClick="logedin()">link</a>

It's worth to use i.e. firefox plugins like JS console where you could see in what line error occurs.

edited Feb 17, 2015 at 20:35

answered Feb 17, 2015 at 20:27

jmmk

1032 silver badges9 bronze badges

5 Comments

jmmk Over a year ago

link shouldn't be to another file but to JS content i.e. onClick="logedin()"

floor Over a year ago

This only solves the syntax error not the problem of having the html loaded so php script can target it.

floor Over a year ago

also why escape the double quotes when you can just use single quotes?

jmmk Over a year ago

This would work when JS is in the same file. To change content dynamic you could use AJAX.

jmmk Over a year ago

Two possibilities. Sometimes when functions are more complicated this may be useful

Jacob Kelley · Accepted Answer · 2015-02-17 21:56:51Z

I've got it figured out. in the index.html i just put

<li class="hidden">
    <a href="#page-top"></a>
</li>

<li class="page-scroll">
    <a href="#portfolio">Portfolio</a>
</li>

<?php 
require("common.php"); 
if(empty($_SESSION['user'])) 
    { 
        ?> 
        <li class="page-scroll">
            <a href="login.php">Login</a>
        </li>

        <li class="page-scroll">
            <a href="register.php">Register</a>
        </li>
        <?php
    } 
else 
    {
        ?> 
        <li class="page-scroll">
            <a href="logout.php">Logout</a>
        </li>

        <li class="page-scroll">
            <a href="private.php">Members Page</a>
        </li>
        <?php
    }
?>

does exactly what I need and no messing with the other php files.

Collectives™ on Stack Overflow

how to document.getElementById().innerHTML from different html/php file

4 Answers 4

1 Comment

4 Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

4 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related