How to pass a javascript variable inside a url get in Django-CodePudding

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?

CodePudding user response：

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>

CodePudding user response：

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.