JavaScript Ajax request for login PHP page not working

Question

 window.onload = function() { var a = document.getElementById("log-in"); a.onclick = function loadXMLDoc() { var ajaxRequest; try { // Opera 8.0+, Firefox, Safari ajaxRequest = new XMLHttpRequest(); } catch (e) { // Internet Explorer Browsers try { ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); } 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", "/login.php", true); ajaxRequest.send(); var a = document.getElementById("log-in"); a.innerHTML = "Sign up"; a.onclick = function backToIndex() { window.location.href = "index.php"; return false; } return false; } }

 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>CloudBox</title> <link rel="shortcut icon" href="img/g3.ico" /> <script src="js/script.js"></script> <link rel="stylesheet" type="text/css" media="screen" href="css/index.css" /> </head> <body> <header class="shadow-box"> <a href="https://github.com/alexifrim95/CloudBox" id="git-img" class="github-img"> <img src="img/GitHub-Mark-32px.png" alt="github-logo" class="github-logo"> </a> <a href="https://github.com/alexifrim95/CloudBox" id="git-link" class="github-link">GitHub link</a> <a href="index.php" id="logo-img" class="logo-img"> <img src="img/g3.png" alt="logo" class="logo"> </a> <a href="index.php" id="logo-txt" class="logo-txt"><img src="img/logo-text.png" alt="logo-text" class=logo-text"></a> <a href="#" id="log-in" class="button-link">Log in</a> </header> <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> <footer id="foot" class="bottom-page"> </footer> </body> </html>

login.php

<?php
session_start();
?>

<h1 id="message" class="contentHeader">Welcome<br>Please log in</h1>
    <br>
    <form id="form" method="post" style="height:250px;" ">
      <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>
      <?php
        if (isset($_POST['username']) && isset($_POST['password']) && isset($_POST['submits']))
        {

                $user = trim($_POST['username']);
                $pass = trim($_POST['password']);

                $file = "/private/data.csv";
                $handle = fopen($file, "r") or die('ERROR OPEN FILE!');

          while (($data = fgetcsv($handle)) !== FALSE) {
            if ($data[0] == $username && $data[1] == hash('sha256', $password) ){
                $_SESSION['user'] = $username;
                header("Location: ./home.php");
                $success = true;
                break;
            }
          }


                if (!$success)
                {
            echo '<script type="text/javascript">document.getElementById("message").style.color="red";</script>';
            echo '<script type="text/javascript">document.getElementById("message").innerHTML="Wrong username or password";</script>';
                }

                fclose($handle);
        }
      ?>
    </form>

I have a button which is first set as Log in and the index page is for sign up, then after clicking it the content div of the page will load a login.php page using Ajax request and Sign up value on the button. The problem is when the ajax request page is loaded I cannot submit, the submit button redirects me to index.php even though it shouldn't.

Answer 1

The login form needs an action attribute, otherwise it defaults to the URL of the current page.

<form id="form" method="post" style="height:250px;" action="login.php">

Loading it by AJAX doesn't make it default to the AJAX URL.

JavaScript Ajax request for login PHP page not working

Question

1 answers

solution1
1 ACCPTED 2017-01-10 02:08:09

JavaScript Ajax request for login PHP page not working

Question

1 answers

solution1 1 ACCPTED 2017-01-10 02:08:09

solution1
1 ACCPTED 2017-01-10 02:08:09