CODEWITHSUNDEEP
htmlcssdjango
shaderko
shaderko

Reputation: 55

Can you have button inside a tag

So my problem is that I have those 2 buttons inside this card and when i click them it redirects to a link which the card itself is redirecting, so can i make this work?

<a class="panel-product-div-a" href="{{ item.get_absolute_url }}">


    <div style="color: {{ item.checks_color }}" class="p-checks">
      <p>{{ item.checks|safe|linebreaks }}</p>
    </div>
    <span>
      <img {% if item.image %} src="{{ item.image.url }}" {% else %} nop {% endif %} alt="ehm..">
    </span>
    <h1 class="mdh2">{{ item.title }}</h1>


    <div class="panel-button-div">
      <button onclick="window.location.href='{{ item.get_add_to_cart_url }}'"
        class="btn btn-lg btn-primary panel-btn">To cart</button>
      <button onclick="window.location.href='{{ item.get_absolute_url }}'"
        class="btn btn-lg btn-light panel-btn">More info</button>
    </div>


    <div class="con-div">
      {% if item.discount_price %}
      <h1 class="mdh1-discount">
        {{ item.price }}€
      </h1>
      <h1 class="mdh1">
        {{ item.discount_price }}€
      </h1>
      {% else %}
      <h1 class="mdh1">
        {{ item.price }}€
      </h1>
      {% endif %}
    </div>
  </a>

enter image description here

Upvotes: 2

Views: 312

Answers (2)

Charlesthk
Charlesthk

Reputation: 9684

You can make use of event.preventDefault() :

<button onclick="event.preventDefault();window.location.href='{{ item.get_add_to_cart_url }}'"
        class="btn btn-lg btn-primary panel-btn">To cart</button>

Here is a full working example :

<html>

<body>
    <a href="card_link">
        <p>My Card text</p>
        <button onclick="event.preventDefault();window.location.href='button_link'">button</button>
    </a>
</body>
</html>

Upvotes: 1

user13912051
user13912051

Reputation:

You said

when i click them it redirects to a link which the card itself is redirecting

do you need the link to be there in the card itself? How about you try removing the link that the card redirects to and then the button links will become accessible.

Otherwise, if you have access to the css, using the z-index style helps to move certain elements to the front or to the back, so you could give the buttons a higher z-index which will bring them in front of the card.

Upvotes: 0

Related Questions