I have a search function in my django app using ajax. It displays all results from a model.
I want to limit the number of results the search returns on the page though, so when the queryset is so large the user should click on a 'see all results', rather than having heaps of results in the search box.
I'm trying to do this by adding a HTML form below, but when I click on the href it is creating a GET request. I'm not totally sure what I need to fix up here to pass the data to the view and render the new page.
resultsBox.innerHTML += `
<a href="${url} ${'results'}" class="item">
<form method="POST" class="post-form" input type="submit"
{% csrf_token %}
<action="${url} ${'results'}">
</form>
<div class="row mt-2 mb-2">
<div class="col-2">
img placeholder
</div>
<div class="col-10">
<h5>See all results for "${quote}"</h5>
</div>
</div>
</a>
` `
You are wrapping the entire form in the href, you probably just want See all results to be the link?
resultsBox.innerHTML += `
<form method="POST" class="post-form" input type="submit"
{% csrf_token %}
<action="${url} ${'results'}">
</form>
<div class="row mt-2 mb-2">
<div class="col-2">
img placeholder
</div>
<div class="col-10">
<h5>
<a href="${url} ${'results'}" class="item">
See all results for "${quote}"
</a>
</h5>
</div>
</div>`
Alternatively (as noted in the comments below): to avoid a GET and have a POST instead, you want to submit a form, not follow a hyperlink: How to submit a form with JavaScript by clicking a link?