I would like to send a radio_id to my view, Now I'm currently trying to get the ID of my radio by javascript, but I don't know how to pass it by get method inside my url and send to the view:
html:
<a href="{% url 'maintenance_issue_fix' %}?radio_id=checked">
<img src="{% static 'images/maintenance_list.jpg' %}">
</a>
{% for list in issue_list %}
<tr style="text-transform: capitalize;">
<td style="text-align:center;">
<input name="radio_id" type="radio" id="radio_id" value="{{list.id}}">
</td>
<\tr>
{% endfor %}
javascript:
<script>
$(function(){
$('input[type="radio"]').click(function(){
if ($(this).is(':checked'))
{
var checked = $(this).val();
console.log(checked);
}
});
});
</script>
views:
def maintenance_issue_fix(request):
if request.method == 'GET':
issue_id = request.GET.get('radio_id')
print(issue_id)
urls:
urlpatterns = [
path('maintenance_issue_fix/', views.maintenance_issue_fix, name="maintenance_issue_fix"),
]
When I try to get the javascript var to pass inside the url, occur the follow error:
ValueError at /maintenance/maintenance_issue_fix/ invalid literal for
int() with base 10: 'checked'
How to do it?
you can change the href value of you link like that
#you add the url in data
<a id="redirect-issue-fix" href="{% url 'maintenance_issue_fix' %}" data-baseurl="{% url 'maintenance_issue_fix' %}">
<img src="{% static 'images/maintenance_list.jpg' %}">
</a>
{% for list in issue_list %}
<tr style="text-transform: capitalize;">
<td style="text-align:center;">
<input name="radio_id" type="radio" id="radio_id" value="{{list.id}}">
</td>
<\tr>
{% endfor %}
javascript:
<script>
$(function(){
const link = $('#redirect-issue-fix');
$('input[type="radio"]').click(function(){
if ($(this).is(':checked'))
{
var checked = $(this).val();
# here you change the href with id of input checked and the baseurl
$(link).href = $(link).data('baseurl') + "&radio_id=" + checked;
console.log(checked);
}
});
});
</script>
In your <a> tag you have fixed checked value for query parameter. That's why you receive ValueError -- your app expects integer as radio_url, but you're sending "checked" string.
I assume you want to replace href attribute (redirect URL) based on user input. This should work:
HTML:
<a href="{% url 'maintenance_issue_fix' %}" id="link">
<img src="{% static 'images/maintenance_list.jpg' %}">
</a>
Here I assigned link id to <a> element so it can be referenced from JavaScript code.
JS:
$(function(){
$('input[type="radio"]').click(function(){
if ($(this).is(':checked'))
{
let link = $('#link')
let currentHref = link.attr("href")
let newHref = currentHref.split("?radio_id=")[0] + "?radio_id=" + $(this).val()
link.attr("href", newHref);
}
});
});
Here I'm changing the URL every time user clicks on the radio. Keep in mind that if no item is selected, the <a> element will redirect to {% url 'maintenance_issue_fix' %} without radio_id parameter. You can change it if it wasn't the default value you wanted.
PS: You should avoid assigning the same id (radio_id) to multiple elements (like you did in the for loop). You can use {{list.id}} instead.