How to push element down when another is added - php

Question

<form id="password_form" action="" method="post">
Username: </br>
<input type="text" name="login_username"></br>
Password:</br>
<input type="password" name="login_password">
</br>
<input type="submit" name="login" value="Log in">
</form>
//form validation now occurs
<?php
if (isset($_POST['login']))
{
$username = trim($_POST['login_username']);
$password = trim($_POST['login_password']);
//checks if correct credentials were given
$login = login($username, $password);
if ($login === FALSE)
{
$errors[] = 'That username/password combination is incorrect';
$errors_1 = output_errors($errors);
echo "<div id='errors'> $errors_1</div>";
}
}
?>
Above is my code. After the user submits the form, I check to make sure the user has provided the correct credentials. If not, then an error message is added to the $errors array and is outputted. I want the errors to be outputted above the form and the form to be moved down proportionally. I've tried locating the errors array above the form and increased the margin and padding but that did not work. Any suggestions?

Answer 1

If you are using jQuery and you have a separate html and php (MVC)
define a div in the form called error_container <div id="error_container"></div>
then from your PHP echo the response .
$html = "<div id='errors'>$errors_1</div>";
echo json_encode($html);
in jQuery ajax success
success:function(result){
$("#error_container").html(result);
}
if you are using only PHP and your php and html is in same page
in your view set if $error_1 is set , echo the error
//form validation now occurs
<?php
if (isset($_POST['login']))
{
$username = trim($_POST['login_username']);
$password = trim($_POST['login_password']);
//checks if correct credentials were given
$login = login($username, $password);
if ($login === FALSE)
{
$errors[] = 'That username/password combination is incorrect';
$errors_1 = output_errors($errors);
}
}
?>
<!-- check is variable isset -->
<?php if(isset($errors_1)) { ?>
<div id='errors'><?php echo $errors_1; ?></div>
<?php } ?>
<form id="password_form" action="" method="post">
Username: </br>
<input type="text" name="login_username"></br>
Password:</br>
<input type="password" name="login_password">
</br>
<input type="submit" name="login" value="Log in">
</form>