[Answered ]-How to get element value from htmx

by

1👍

I have just started working with HTMX. And I had a similar need. I think the answer to your question lies in HTML standards and how form data is typically posted in HTML.

I know the HTMX docs say that every element’s value will be included in the parameters. But web standards don’t define name and value attributes for SVG elements. I think that’s the root of your problem.

The docs also say that the hx-vals attribute allows you to add to the parameters that will be submitted with an AJAX request. Try this:

    <svg hx-post="{% url 'posts:support_post' post.pk %}" hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' hx-vals='{"post_id": "{{ post.id }}"}' class="some_class" xmlns=... /></svg>

If that doesn’t work, you can always resort to a form tag:

    <form>
      {% csrf_token %}
      <input type=hidden name=post_id value="{{ post.id }}">
      <svg hx-post="{% url 'posts:support_post' post.pk %}" class="some_class" xmlns=... /></svg>
    </form>

On a final note, far be it for me to preach about accessibility, but the svg tag you’re putting in place of the button won’t act like a button without some work that is out of the scope of your question.

👤Stephen Farmer

Leave a comment