Jump to content

Styling the Success echo


Go to solution Solved by Barand,

Recommended Posts

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.

Link to comment
https://forums.phpfreaks.com/topic/317589-styling-the-success-echo/
Share on other sites

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 by mac_gyver

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';

?>

 

  • Solution
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';

?>

 

 

  • Like 1

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 by Dilip

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>

 

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>

 

  • Like 1
  • 3 weeks later...

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.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.