Styling the Success echo

Dilip · December 31, 2023

Hi, I have this connect.php which has an echo when the db entry is a failure or success. I am trying to use Bootstrap alert to style it. Using a div around echo make the code non functional. When I click submit, it goes to connect.php and nothing happens when there is a styling div. Would be nice to know any way around

connect.php

<?php
  if($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['submit'])) {
  
      echo 'submit button clicked';

     $conn= mysqli_connect('localhost', 'root', '', 'my_db') or die("Connection Failed:" .mysqli_connect_error());

     echo 'no connection error';


     if(isset($_POST['name']) && isset($_POST['email']) && isset($_POST['phone'])) {
     
         $name= $_POST['name'];
         $email= $_POST['email'];
         $phone= $_POST['phone'];

         echo 'Upto SQL';
         
         $sql= "INSERT INTO `users` (`name`, `email`, `phone`) VALUES ('$name', '$email', '$phone');";

         echo 'SQL Run';
         
         $query = mysqli_query($conn,$sql);

         echo 'query run';
         
         if($query) {
         
           echo 'Entry Successful';
         
         } else {
         
          
           echo 'Error, Entry Failed';    
     
     }
     
  
  }

}
  
  
  ?>

I am trying to style the echo at the last which are

Entry Successful

and

Errory, Entry Failed

Thanks.

gw1500se · December 31, 2023

This is really an HTML question. Have you tried using the <font> tag to format the output?

Dilip · December 31, 2023

I simply used it like this, which didn't work even though there was Bootstrap CDN inside <head>

echo 'Entry Successful';

</div>

ginerjm · December 31, 2023

Not familiar with Bootstrap but since all I see here is an attempt to use a CSS(?) class to do your formatting. If that is what you are using, how about showing us the CSS?

mac_gyver · December 31, 2023

programming is an exact science. when you have a whole web page that doesn't work, you need to post all the actual code, less any database connection credentials, necessary to reproduce the problem.

there could be a dozen different things wrong that could cause this symptom. we need to see what your actual code is in order to concentrate on what the code is or is not doing correctly.

Edited December 31, 2023 by mac_gyver

Dilip · December 31, 2023

Hi, I do not have much. I simply use the Bootstrap CDN in <head>. No extra styling added. Can I add

<div style="color: green;">echo 'my_message';</div>

Never thought it would be that simple.

Edited December 31, 2023 by Dilip

Dilip · December 31, 2023

I just tried this code as index.php in a test folder, no output at all. Renders a blank page

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
   

<?php

<div style="color: green;">echo 'my_message';</div>

echo "my error";

echo 'my error 2';

?>

 <h1>Hello, world!</h1>
  </body>
</html>


<?php

echo 'not working';

?>

But when I delete everything and just use this, it works

<?php

echo 'not working';

?>

Barand · December 31, 2023

10 minutes ago, Dilip said:

<?php

<div style="color: green;">echo 'my_message';</div>

echo "my error";

echo 'my error 2';

?>

The above code is invalid php syntax. That's why there is no output.

Try

<?php

echo "<div style='color: green;'>my_message</div>";

echo "my error";

echo 'my error 2';

?>

Dilip · December 31, 2023

thanks, it works @Barand

I am trying to use this styling from Boostrap

echo "<div class='alert alert-success' role="alert">my_message</div>";

How do I make it work? Normally I add Bootstrap CDN inside <head>. Looks like it is not possible in this case.

Edited December 31, 2023 by Dilip

Barand · December 31, 2023

16 minutes ago, Dilip said:

Looks like it is not possible in this case.

Have you tried it?

Dilip · December 31, 2023

It kind of works, but the alert box is too wide. Please see

<?php

echo "<div style='color: green;'>my_message</div>";

echo "my error";

echo 'my error 2';

?>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

    
    <?php
    
    echo "<div class='alert alert-success' role='alert'>this is my_message</div>";
    
    ?>
    
    
  </body>
</html>

Barand · December 31, 2023

By default, div widths are 100%

[edit]...

PS you could add some css of your own in the style section of the head.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  </head>
  <style type='text/css'>
      .alert-success {
          width: 25%;
          text-align: center;
      }
  </style>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

    
    <?php
    
    echo "<div class='alert alert-success' role='alert'>this is my_message</div>";
    
    ?>
    
    
  </body>
</html>

Dilip · December 31, 2023

this works, thanks

echo "<div class='alert alert-success' role='alert'style='width:250px; margin-left: 30px;'>this is my_message</div>";

Andou · January 16

Answering this a couple of days late in the hopes it helps someone - if you run into a situation like this, either stick "alert-success" in the div class itself or use a <style> tag, if it's only for that one section alone.

Also, in the future if you run into issues and need our help, it helps if you put

error_reporting(E_ALL);
ini_set('display_errors', '1');

right after the opening <?php tag, so we can see what's going on. Glad to see you found a solution.

Sign In

Styling the Success echo

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information