Trying to: Button calls function which replaces html by id, into

Question

I've been trying to create a simple menu.php for my web server with two buttons b1=Log in and b2=Register. Each of those will call its separate function which will then scan for the id='main' block and change its internal html to something along the lines of <?php include('testLogIN.php') ?> and <?php include('testRegister.php') ?>. The buttons erase the internal html of the block with id='main', BUT on my server the buttons when clicked do nothing. I am led to believe this might be a problem with how nested strings work, thus echo "He said 'haha' and left." wouldn't print He said 'haha' and left. correctly. I understand i might be all over the place with my description but please bear with me.

@charset "UTF-8";

.right{
 margin:1%;
 position:relative;
 clear:right;
 float:right;
 right:15px;
}

.left{
 margin:1%;
 position:relative;
     clear:left;
 float:left;
 left:10px;
}

.bleft{
 margin:1%;
 position:relative;
 float:left;
 width=15px;
}

.fleft{
 float:left;
}

.mainbox{
 margin:2%;
 width:450px;
 height:auto;
}

.box{
 clear:left;
 float:left;
 margin:1%;
 width:280px;
 height:33px;
}

img{ 
     max-width: 100%;
 max-height: 100%;
     width: auto; 
}

.stat{
 float:right;
 position:fixed;
 right:10px;
}

.bolded{
 border-width: 5px;
 size:5px;
}

h2{
 margin-left:2px;
}

.white{
 color:#DDD;
}

.black{
 background-color:#333;
}

hr{
 clear:left;
}

<!DOCTYPE html>
<html>
 <head>

  <title>Main</title>

  <link rel="stylesheet" type="text/css" href="mystyle.css">

  <style>
   .abs{
        position: absolute;
        top: 0;
        left: 0;
   }
   .rel{
        position: relative;
   }
   a:visited{
        color: green;
   }
   body{
        margin: 0;
        padding: 0;
    border: 0;
        background--image: url("images/dragon.jpg");
    background-size: cover;
   }
  </style>
  
 </head>
 <body>

  <div class="rel">
   <img src="images/dragon.jpg">
   
   <div id='main' class="mainbox black abs">
    <button onclick='tologin()'>Log in</button>
    <button onclick='toregister()'>Register</button>
   </div>
  </div>

 </body>
</html>

<script>
function tologin(){
    document.getElementById("main").innerHTML ="<?php include('unistuff/LogIN/login.php');?>";
}
function toregister(){
    document.getElementById("main").innerHTML ="<?php include('unistuff/LogIN/toregister.php');?>";
}
</script>

PHP code can only be executed on the server. Changing the `innerHTML` will only change the HTML (a client-side event). You probably need to send a request to the server after you click 'Log In' and the server will generate a new page for you. — d4nyll, Nov 24 '16 at 17:19

score 0 · Answer 1 · edited May 23 '17 at 11:53

0

Since php ignore scripts (it will include both file without yielding to javascript), i will suggest you look into Loading file with javascript

Or you can use jQuery load method(dont load PHP file):

<script>
    function tologin(){
        $("#main").load('login.html');
    }
    function toregister(){
        $("#main").load('register.html');
    }
</script>

IF necessarily PHP then you can use Ajax

edited May 23 '17 at 11:53

Community

1
1

answered Nov 24 '16 at 17:12

Ghostff

1,407
3
18
30

be honest you didn't read the whole answer? even so you can see (Loading file with javascript) why repeat it. – Ghostff Nov 24 '16 at 17:22

Trying to: Button calls function which replaces html by id, into

1 Answers1