Issue regarding text redirect which shouldn’t occur

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

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.

Advertisement

Answer