jQueryを使用しないでAJAXを使用してインデックスページとログインページを切り替える

Question

私の問題は、sign-upフォームのindex.phpページと、login.phpのコンテンツに対するajaxリクエストを行うスイッチボタンがあることですそして

のindex.php

<div id="content" class="content"> 
    <h1 id="message" class="contentHeader">Cloud platform<br> built from scratch</h1> 
    <br> 
    <form id="form" method="post"> 
     <h1 id="contentSignup" class="contentSignup">Sign up</h1> 
     <input type="text" name="fullname" placeholder="Fullname" required="required" /> 
     <br> 
     <input type="text" name="email" placeholder="Email" required="required" /> 
     <br> 
     <input type="text" name="username" pattern="[A-Za-z0-9]{4,30}" title="4 to 30 alphanumeric characters" placeholder="Username" required="required" /> 
     <br> 
     <input type="password" name="password" pattern="[A-Za-z0-9]{6,25}" title="6 to 25 alphanumeric characters" placeholder="Password" required="required" /> 
     <br> 
     <button type="submit" class="Submit" name="submit">Submit</button> 

     <?php include 'register.php';?> 

    </form> 
</div> 

login.php

<?php 
include("logic.php"); 
?> 
<h1 id="message" class="contentHeader">Welcome<br>Please log in</h1> 
<br> 
<form id="form" method="post" style="height:250px;" action="logic.php" "> 
    <h1 id="contentSignup" class="contentSignup">Log in</h1> 
    <input type="text" name="username" pattern="[A-Za-z0-9]{4,30}" title="4 to 30 alphanumeric characters" placeholder="Username" required="required" /> 
    <br> 
    <input type="password" name="password" pattern="[A-Za-z0-9]{6,25}" title="6 to 25 alphanumeric characters" placeholder="Password" required="required" /> 
    <br> 
    <button type="submit" class="Submit" name="submits">Submit</button> 
</form> 

...フォームを変更しますが、私は戻ってindex.phpを上に存在するサインアップフォームに行きたいです

js

function loadXMLDoc(docPath) { 
var ajaxRequest; 
try { 
    ajaxRequest = new XMLHttpRequest(); 

} catch (e) { 
    // Something went wrong 
    alert("Your browser broke!"); 
    return false; 
} 


ajaxRequest.onreadystatechange = function() { 
    if (ajaxRequest.readyState == 4) { 
     var ajaxDisplay = document.getElementById("content"); 
     ajaxDisplay.innerHTML = ajaxRequest.responseText; 
    } 
} 

ajaxRequest.open("GET", docPath, true); 
ajaxRequest.send(); 

if (docPath == "login.php") { 
    //change button to display Sign up; 
    var a = document.getElementById("log-in"); 
    a.innerHTML = "Sign up"; 


    //here I dont want to load the whole index.php page again I want to use AJAX 
    a.onclick = function backToIndex() { 
     window.location.href = "index.php"; 
     return false; 
    } 
} 
return false; 
} 

Answer 1

のindex.php

<!-- ... --> 

<!-- where the ajax response will be placed --> 
<div id="content"></div> 

<!-- toggles the state between 'login.php' and 'register.php' --> 
<button id="button" onClick="change()">switch</button> 

<!-- ... --> 

<script src="script.js"></script> 

singup.php

<!-- ... --> 

<div id="signup-form"> 
    <form action="signup.php"> 
     signup form ... <button>Sign Up</button> 
    </form> 
</div> 

<!-- ... --> 

login.php

<!-- ... --> 

<div id="login-form"> 
    <form action="login.php"> 
     login form ... <button>Log In</button> 
    </form> 
</div> 

<!-- ... --> 

script.js

var state = ''; 

// change the state on initialization 
change(); 

function change() 
{ 
    var xhr; 

    // toggle state between 'login.php' and 'signup.php' 
    state = state === 'login.php' ? 'signup.php' : 'login.php'; 

    try { 
     xhr = new XMLHttpRequest(); 
    } catch (e) { 
     console.log('error'); 
     return false; 
    } 

    var content = document.getElementById("content"); 
    var button = document.getElementById("button"); 

    xhr.onreadystatechange = function() { 
     if (xhr.readyState === 4) { 
     content.innerHTML = xhr.responseText; 

     // toggle button lable between 'Register' and 'Log In' based on state 
     button.innerHTML = state === 'login.php' ? 'Register' : 'Log In'; 
     } 
    }; 

    xhr.open('GET', state, true); 
    xhr.send(); 
}