So, what I am doing is creating a card using Bootstrap that has a movie poster and its name below it. When I hover over the card it shows a button. On clicking the button what I want is it should display information about that movie.

I searched online but couldn't find any way to do this just with python. They involve javascript and ajax. And, I have no idea about javascript.

For, an input bar with a button I know how it works with Flask. We provide action attribute with the form tag and a name attribute with the input tag, then we use request.form in python file.

But, my problem is that it's a card with button, not a form.

Here's that card with button

Here's the code for the card. The Jinja template is for the information I'm getting from the API using Python.

<div class="movie-content">
{% for poster, title in trendingMoviesDetails.items() if not trendingMoviesDetails.hidden %}
  <div class="card" style="width: 15rem;" title="{{title}}" onclick="recommendcard(this)">
    <div class="imghvr">
      <img class="card-img-top" height="360" width="240" alt="{{title}} - poster" src={{poster}}>
      <figcaption class="fig">
        <button class="card-btn btn btn-danger"> Click Me </button>
      </figcaption>
     </div>
    <div class="card-body">
      <h5 class="card-title">{{title|upper}}</h5>
    </div>
  </div>

{% endfor %}

So, what I want is that when we click on that "Click Me" Button, it takes that {{title}} and redirects me to a new page, showing further information about that name. Let's say I want to just print HELLO {{title}}. For example when we click on that Batman Card that I have provided as an image, it redirects me to a new webpage, that displays "Hello The Batman".

I want to do this just with the help of flask and python. This was something related to my problem

But, I don't have much idea about javascript. And also no idea about ajax and jquery.