How can I show a DIV element without creating a new row?

Question

I crated a small login form where I check the username in a external php file. After that I give back an error message or redirect to another site. My problem is to show the error message. I want a short message above the login form if the username != „test“. In my script, the errormessage appears above the login form, but the login form jumps one row deeper.

Question 1: How can a create a placeholder above the login form? So that the login form is fix?

Question 2: Is it the right way to fill a JavaScrpt Variable in PHP as in my Code?

Thanks for your help!

 < script > var error_login; if (error_login == 1) { $('#errorText').show(); } else { $('#errorText').hide(); } < /script>

 <?php //debug error_reporting(-1); ini_set('display_errors', true); session_start(); session_unset(); session_destroy(); ?> <!doctype html> <html lang="de"> <head> <title>Hello World</title> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> </head> <body> <?php include ("login.php"); ?> <div class="container"> <div id="errorText" class="row justify-content-center"> Login failed! <!-- This should be a placeholder --> </div> <!-- Formular Beginn --> <div class="row justify-content-center"> <div class="col-md-6"> <form class="form" role="form" method="post" action="?login=1" accept-charset="UTF-8" id="login"> <div class="input-group" id="frmGrpBenutzer"> <input type="password" class="form-control input-lg" id="user" name="user" placeholder="Username" required autofocus> <span class="input-group-btn"> <button type="submit" class="btn btn-primary btn-custom btn-lg" title="login" id="loginbtn"><span>Go</span></button> </span> </div> </form> </div> </div> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> </body> </html>

Here the login.php file:

<?php
session_start();
if(isset($_GET['login'])) {
    $user = $_POST['user'];

    if ($user == "test") {
        $_SESSION['username'] = $user;
        header('Location: site2.php');
    } else {
        echo "<script>
          var error_login = 1;
       </script>";
    }
}

Answer 1

There are a few possibilities. The easiest would be to set your div with an opacity:0 or visibility:hidden this will make it still take space in the document flow.

Another option, could be to set it's position:absolute this will prevent it to take space inside your login form. Doing this will make it overlap tough, so there would need to be a padding or margin to offset the content of the form.

As for setting your javascript variable with PHP, that's one way to do it yes, but your script already defines error_login... Another way to do it, is use a holder HTML element, give it an id, and a data-* attribute. This will make it very easy to read the information from code:

 $('button').click(function() { console.log($('#login_status').data('login-error')); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="login_status" data-login-error="1"></div> <button>Click me to get result</button>

You could also add all the data you want into a JSON string as the div's content, and parse it once the page loaded.

How can I show a DIV element without creating a new row?

Question

1 answers

solution1
0 ACCPTED 2017-10-30 10:22:42

How can I show a DIV element without creating a new row?

Question

1 answers

solution1 0 ACCPTED 2017-10-30 10:22:42

solution1
0 ACCPTED 2017-10-30 10:22:42