django template form target with dynamic data - html

Question

i'm new at django template. i have a search field in header and i want to send searched keyword in this format
search/q/{{keyword}}/
my html code is this
<form action="{% url 'content.search' q=searched_key %}" class="search-input">
<input type="text" name="searched_key">
<button type="submit"><i data-feather="search"></i></button>
</form>
i want to get input value and send but result url is this
http://127.0.0.1:8000/contents/search/q//?searched_key=test
how can i do it in right way?

Answer 1

you can POST your search value as form (don't need to use /search/q//?searched_key=test in url) and your view should be something like this:
def search_view(request):
if request.method == "POST":
search_key = form.save()
search_result = Content.objects.filter(key=search_key)
context = {
'results': search_result,
}
return render(request, 'content.html', context)

Answer 2

You're probably better off using javascript to accomplish this.
<form id="form-id">
<input type="text" id="searched_key" name="searched_key">
<button type="submit"><i data-feather="search"></i></button>
</form>
<script type="text/javascript">
function submitForm(e) {
// Prevent default form submit
e.preventDefault();
// Get the search query
let query = document.getElementById("searched_key").value;
// redirect to the url with the query appended
window.location.href = "/contents/search/" + query + "/";
return false;
}
// Add an event listener to the form when the page loads
window.addEventListener('load', function() {
document.getElementById("form-id").addEventListener('submit', submitForm);
});
</script>