1
 <input type="number" x-model="inputValue" min="1" max="{{ page.paginator.num_pages }}"
           placeholder="Enter a number">
<button type="button" hx-get="?page={{ ????? }}">Go</button>

here is the code extending it from the htmx example to create a go to page for partial load pagination https://github.com/adamchainz/django-htmx/tree/main/example

The problem is that I am not able to configure hx-get to take the value of inputValue field.

1 Answer 1

0

You're trying to populate the parameters with Django template interpolation, but that is server-side, and the value is only known on the client-side.

Instead, you need to tell HTMX what values to grab from the client side, to include in the GET request. You can do this with the hx-include attribute. You also need to add a name attribute to the input element:

<input name="page" type="number" x-model="inputValue" min="1" max="{{ page.paginator.num_pages }}" placeholder="Enter a number">
<button type="button" hx-get="" hx-include="[name='page']">Go</button>
Sign up to request clarification or add additional context in comments.

3 Comments

<input name="goto_page" type="number"> <a href="?page=" type="button" hx-get="?page=" hx-include="[name='goto_page']">Go</a> What am I doing wrong? the goto_page is not being included. even with hx-include.
@AdnanNazir I just tested your code, and it submits the value like this: ?page=&goto_page=3 If you go back and copy/paste the code from my answer directly, it will work, and submit the value as page in the GET request. The way you are doing it, you will have an empty page attribute, and a separate goto_page attribute with the actual value.
Mark many thanks for your reply. I tried but its still not working.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.