Show alert messages if error is not empty

JavaScript
,
1

Hi, i have a bootstrap 3 + php script to add a user to a database. Now what i want is to show a alert message or modal when i got error in script.

Here is my code

<?php

include 'config.php';

// process form
if (isset($_POST['submit'])) {

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

	$stmt = $dbh->prepare("SELECT username, email FROM users WHERE username = :username OR email = :email");
	$stmt->bindParam(':username', $username);
	$stmt->bindParam(':email', $email);
	$stmt->execute();
	$udata = $stmt->fetch();

	if ($udata['username'] == $username) {
		$error = '<div class="alert alert-warning alert-dismissible fade-in">
                	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                	Username in use, please choose another one.
              	  </div>';
	} elseif ($udata['email'] == $email) {
		$error = '<div class="alert alert-warning alert-dismissible fade-in">
                	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                	Email in use, please choose another one.
              	  </div>';
	} else {
		$error = '<div class="alert alert-success alert-dismissible fade-in">
                	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                	All ok, register user.
              	  </div>';
	}
}

?>

<?php include 'inc/header.php'; ?>

	<section class="content-header">
      <h1>
        Add user
      </h1>
      <ol class="breadcrumb">
        <li><a href="index.php"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="active">Add user</li>
      </ol>
    </section>

    <!-- display error message if any -->
    <?php if (!empty($error)) { echo '<section class="content-header">'.$error.'</section>'; } ?>

    <!-- Main content -->
    <section class="content">
      <div class="row">
        <!-- left column -->
        <div class="col-md-12">
          <!-- general form elements -->
          <div class="box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title">User data</h3>
            </div>
            <!-- /.box-header -->
            <!-- form start -->
			<form role="form" action="" method="post">
              <div class="box-body">
              	<div class="form-group">
                  <label for="user">Username</label>
                  <input type="text" name="username" class="form-control" id="user" placeholder="Enter username" required>
                </div>
                <div class="form-group">
                  <label for="pass">Password</label>
                  <input type="password" name="password" class="form-control" id="pass" placeholder="Enter password" required>
                </div>
                <div class="form-group">
                  <label for="mail">Email</label>
                  <input type="email" name="email" class="form-control" id="mail" placeholder="Enter email" required>
                </div>
              </div>
              <!-- /.box-body -->

              <div class="box-footer">
                <button type="submit" name="submit" class="btn btn-primary">Submit</button>
              </div>
            </form>
           </div>
          </div>
         </div>
        </section>
        
<?php include 'inc/footer.php'; ?>
2

Really nobody knows how to activate alert window if $error variable have value ?

3

Is this a PHP question? I don’t see any JS, and those BS alerts would show right away anyway…

4

This is php and javascript question, because i’m using bootstrap and i don’t know how to implement alert instead of echo-ing errors. I’m first time doing bootstrap so i’m like a new in this bootstrap and javascript.

5

Sorry, I’m afraid I don’t quite understand what you’re trying to achieve… in what way does echoing them as you’re doing now not work? I just copy/pasted one of your error-alerts to codepen, and it just showed as expected…

6

As i want to achieve is instead of echoing error to show him in alert window.

Something like

// set error
$error = 'My error';

// show error in alert window
alert($error);
7

Currently the error is shown in the following area:

<?php if (!empty($error)) { echo '<section class="content-header">'.$error.'</section>'; } ?>

It looks like you are using Bootstrap - have you investigated some of the JavaScript effects that Bootstrap supports? One of them is for alert messages with JavaScript support for dismiss functionality, for example.

8

Thanks @Paul_Wilkins i got it now :smiley: This was my error reporting but i wanted to get rid of that and use javascript instead.

9

Oh… well okay, but why would you want to use those native JS dialogs when you’re already using a much better approach?

To answer your question though, one possible way to do this would be to echo a (hidden) div with id="error" (say), and check if that div exists using JS when the page got loaded… like

PHP

if ($error) {
  echo '<div id="error" class="hidden">' . $error . '</div>';
}

JS

var error = document.getElementById('error')

if (error) {
  // Please don't use native dialogs though!
  alert(error.textConent)
}

x-post…

10

Thanks @m3g4p0p, i was think that this with alert windows will be better and less code.

11

Well the problem with these dialogues is that they’re modal, i.e. they block your entire app. This can be quite annoying for users, and even worse, it’s the reason why they’re commonly misused for various scams. Reversely, this means that you can’t rely on them because you can usually turn them off altogether. And yet another problem is that you can’t style them like the rest of your page.

So as you’re already using a nice and unobtrusive BS alert anyway, I’d see no reason to use an ugly and annoying JS alert instead. :-)

1 Like
12

Thanks @m3g4p0p i will use my style then. I hate Javascript anyway :smiley:

1 Like
13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.