Issue regarding text redirect which shouldn't occur

Question

I have an HTML text field, and a post button, which you click to make a post. Now, to send this post to the database, I made a separate file called post.php to handle the PHP and MySQL code for that, and for that, I had to keep the HTML elements (form and button) in a form, with an action of post.php. Now, whether the form is empty or not, with the click of the post button, it's redirecting to the post.php page, which I don't want to happen. what's happening is when I click the post button it's redirecting to the post.php page. It shouldn't be doing that. My posting textarea is on a popup, and when you enter some text and click post, it should close the popup, and display the post (which I will make later), and if you don't enter anything it shouldn't close the popup and display an error message I made by giving it display flex (which I already coded using js). So, basically, if the textarea is filled or not, it shouldn't redirect to post.php page, it should stay on the same page. So, if the textarea Is empty, it should display the error message I made, and I already wrote the logic for using javascript, it shouldn't redirect to post.php page, the popup should remain visible and the error message should display. Now, when text is filled and the post button is clicked, it should close the popup and display the post (which I'll code later), but it shouldn't redirect to post.php page in either case. Here's the code:

HTML (yourposts.php):

<form class="popup-form" action="post.php" method="post">
<textarea id="postContent" name="postContent" rows="8" cols="80" class="postContent" placeholder="What's going on, <?php echo $firstname ?>?"></textarea>
  <button id="pos" class="pos">Post</button>
    <div id="noText" style="font-family: 'Rajdhani'; margin-top:95px; margin-left:270px; font-size:25px; border:2px solid black; padding-left:7px; padding-top:10px; padding-bottom:7px; width:290px; border-radius:10px; background:orange; visibility:hidden; position:fixed">Your post cannot be empty.</div>
</form>

Javascript (for displaying error message "#noText", if post is empty) (yourposts.php):

var postContent = document.getElementById('postContent');
var postBtn = document.getElementById('pos');
var noText = document.getElementById('noText');
var popup = document.getElementById('popup');

postBtn.addEventListener('click', () => {
  if (postContent.value === "") {
    noText.style.visibility = 'visible';
    popup.style.display = 'flex';
  } else {
    noText.style.visibility = 'hidden';
    popup.style.display = 'none';
  }
});

PHP (post.php):

<?php

session_start();

// Making Connection To The Database

$dbHost = "localhost";
$dbUser = "root";
$dbPass = "";
$database = "signup";

$connection = mysqli_connect($dbHost, $dbUser, $dbPass, $database) or die ("Sorry, we could not connect to the database");

// Posting System

if (!empty($_POST['postContent'])) {
  $post = $_POST['postContent'];
  $firstname = $_SESSION['firstname'];
  $lastname = $_SESSION['lastname'];

  $postSQL = "INSERT INTO posts (firstname, lastname, body, date_posted) VALUES (?, ?, ?, NOW())";
  $stmt = mysqli_prepare($connection, $postSQL);
  mysqli_stmt_bind_param($stmt, 'sss', $firstname, $lastname, $post);
  mysqli_stmt_execute($connection, $stmt);
} else {
  echo "No post insertion, as field is empty!";
}

if (mysqli_query($connection, $sql)) {
  echo "";
} else {
  echo "Error: " . $sql . "<br>" . mysqli_error($connection);
}

?>

Answer 1

One way to do this would be to use the "PHP_SELF" method. So if you had one file which has your php and html in it like this:

<form class="popup-form" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<!--Note the difference in the above line where it changes "action" to PHP_SELF-->
<textarea id="postContent" name="postContent" rows="8" cols="80" class="postContent" placeholder="What's going on, <?php echo $firstname ?>?"></textarea>
  <button id="pos" class="pos">Post</button>
    <div id="noText" style="font-family: 'Rajdhani'; margin-top:95px; margin-left:270px; font-size:25px; border:2px solid black; padding-left:7px; padding-top:10px; padding-bottom:7px; width:290px; border-radius:10px; background:orange; visibility:hidden; position:fixed">Your post cannot be empty.</div>
</form>

<?php

session_start();

// Making Connection To The Database

$dbHost = "localhost";
$dbUser = "root";
$dbPass = "";
$database = "signup";

$connection = mysqli_connect($dbHost, $dbUser, $dbPass, $database) or die ("Sorry, we could not connect to the database");

// Posting System

if (!empty($_POST['postContent'])) {
  $post = $_POST['postContent'];
  $firstname = $_SESSION['firstname'];
  $lastname = $_SESSION['lastname'];

  $postSQL = "INSERT INTO posts (firstname, lastname, body, date_posted) VALUES (?, ?, ?, NOW())";
  $stmt = mysqli_prepare($connection, $postSQL);
  mysqli_stmt_bind_param($stmt, 'sss', $firstname, $lastname, $post);
  mysqli_stmt_execute($connection, $stmt);
} else {
  echo "No post insertion, as field is empty!";
}

if (mysqli_query($connection, $sql)) {
  echo "";
} else {
  echo "Error: " . $sql . "<br>" . mysqli_error($connection);
}

?>

With the PHP in the same page as the HTML, you can call PHP_SELF and it will not redirect the page. This page has some more detail on other solutions though personally I think this one is the simplest. All the code I have done will do is stop the page from redirecting, you will still need to add in whatever you are planning to do to close the popup and everything else.

Also, your wall of text at the top is a bit hard to read. In future posts, you should maybe try to separate it with paragraphs.

Answer 2

When you include an action attribute in a form element, you are telling the form where to post and redirect the user to.

If you would like to stay on the same page, you can remove the action attribute. This will tell the browser to post form data to the page. To process the data, you will need to include post.php at the top of your page.

At the top of your yourposts.php page, before the <html> tag, insert <?php include 'post.php';?>

You can also look into submitting forms with AJAX.