Searching through loaded data and displaying similar items in the database - php

Question

I currently have a page titled news.php, this page displays my news articles. I am now planning to allow my users to search through the database preventing constant scrolling. In doing so I have created a second file called search.php. My intention with this page is to load in articles 'LIKE' the submission from my form in news.php on this page. I have no errors in my error.log and I am having trouble submitting the information and loading search.php displaying my results. I have found tones of information on mysqli but nothing for PDO. So in short, how do I take the user to search.php and displaying similar information to their submission in my form on news.php?
php on search.php html of form on news.php is displayed bellow
<div id="news">
<?php
if(isset($_POST['submit-search'])){
$search = $_POST['search'];
$q = $handler->prepare("SELECT * FROM articles WHERE headline LIKE '%$search%' OR dateTime LIKE '%$ search%' OR text LIKE '%$search%'");
$q->execute(array($search));
if ($q->rowCount() > 0){
while ($result = $q -> fetch(PDO::FETCH_ASSOC)); {
echo '<div class="col-md-4 col-xs-12 col-sm-12 height-news">';
echo '<p class="news-title">'.$results[$i]['headline'].'<br>'.'</p>';
echo '<img class="news-img" src="data:image/png;base64,'.base64_encode( $results[$i]['logo']). '"/>';
echo '<p class="news-time">'.$results[$i]['dateTime'].'<br>'.'</p>';
echo '<p class="news-body">'.$results[$i]['text'].'</p>';
echo '<button class="news-btn" id="myBtn" onclick="showFull(this)">Read More</button>'.'</div> ';
}
if ($result == 0) {
echo '<p class="error-message3">Sorry there is no results!</p>';
}
}
}
?>
<div class="searchPanel">
<div id="x-gon">
<i class="fa fa-close"></i>
</div>
<form action="search.php" id="content" method="POST">
<input type="text" name="search" type="text" class="input420"></input>
<submit id="CupidsArrow" class="fa fa-chevron-right fa-4x" type="submit" name="submit-search" value="Submit"></submit>
</form>
</div>

Answer 1

The issue is here:
<i id="CupidsArrow" class="fa fa-chevron-right fa-4x" name="submit-search"></i></a>
here you are using a i tag to submit the form with an a tag. And also </a> is there but its opening tag is missing. So instead of this, try:
<input type="submit" name="submit-search" value="Submit" />
input type submit will submit the form to the url specified in the form action.
Ex:
<form action="search.php" id="content" method="POST">
<input />
<input type="submit" value="Submit" />
</form>

Answer 2

var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
function showFull(button) {
modal.style.display = "block";
$('.dimmer').show();
var newsText = $(button).parent().find(".news-title")[0];
$(".news-title2").text(newsText.textContent);
var newsDate = $(button).parent().find(".news-time")[0];
$(".news-time2").text(newsDate.textContent);
var newsBody = $(button).parent().find(".news-body")[0];
$(".news-body2").text(newsBody.textContent);
var newsImg = $(button).parent().find(".news-img")[0].src;
$('.news-img2').attr("src", newsImg);
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
<div class="searchPanel animated bounceInLeft">
<div id="x-gon">
<i class="fa fa-close"></i>
</div>
<form action="search.php" id="content" method="POST">
<input type="text" name="search" type="text" class="input420"></input>
<input type="submit" name="submit-search" value="Submit" id="CupidsArrow" class="fa fa-chevron-right fa-4x"></input>
</form>
</div>