Passing parameters to url using Javascript or Jquery

Question

I have the Django code as

views.py

def compare(request):
    import ipdb;ipdb.set_trace()
    ids = request.GET.getlist('ids', '')
    products = []
    product_matrix = []
    for uuid in ids:
        try:
            product = LoanProduct.objects.get(uuid=uuid)
            products.append(product)
        except LoanProduct.DoesNotExist:
            pass
    if products:
        product_matrix = make_product_matrix(products)


    print product_matrix
    return TemplateResponse(request, "products/compare.html", {'product_matrix': product_matrix})

page1.html

<div class="row">
    <div class="col-md-4 col-lg-3 col-sm-6">
      <form action="" method="post">{% csrf_token %}
        {{ form.as_p }}
        <button type="submit" class="btn btn-primary">Search</button>
      </form>
    </div>
    <form action="/products/compare/" method="get">
    <div class="col-md-8 col-lg-9 col-sm-6">
      {% if products %}
      <table class="table table-hover">
          <thead>
              <tr>
                  <th> Check to Compare </th>
                  <th> Product Name</th>
                  <th> Quantum of finance </th>
                  <th> Interest Rate </th>
                  <th> Nature of Security</th>
                  <th> Margin </th>
              </tr>
          </thead>
          <tbody>
            {% for product in products %}
            <tr data-uuid="{{ product.uuid }}" id="uuid">
                  <th><input type="checkbox" name="ids" id="checkbox" value= {{ product.uuid }} /></th>
                  <td>{{ product.name }}</td>
                  <td>{{ product.get_finance_quantum }}</td>
                  <td>{{ product.get_interest_rate }}</td>
                  <td>{{ product.security }}</td>
                  <td>{{ product.get_margin }}</td>
              </tr>
            {% endfor %}
          </tbody>
      </table>
      {% endif %}
    </div>
    <button type="submit" id="compare" class="btn pull-right btn-success"> Compare </button>
</form>
</div>

I am having unique uuid for one checkbox. By using that I am getting the items related to that UUID using Django views.By this my url will be https://localhost:8000/page1?ids=asdf-a972j-aswer&ids=asdf6-asdfewq-asdfwq-dfasfd&ids=asdf0-asdfasdf-asdf

But I need the URL in this way https://localhost:8000/page1?ids=sdf-asdf23-as2q3r,sdfqwe-232sasdf-23rwdefr,wqerqr-3qwq2r-23rq23r

How can I do this using javascript?

Appreciated the answers

But why are you expecting that URL, rather than the original which is the standard way of using multiple values in HTTP? That way you can get all the values by doing request.GET.getlist('ids'). — Daniel Roseman
– Daniel Roseman, Commented Feb 19, 2015 at 11:36
@DanielRoseman Yes. I am getting all the values using request.GET.getlist('ids') and my part of functionality is working fine for me. But showing the url in the above said format is needed for me. By using the <form> and <submit> actions I will get by default formats of url passing the parameters. I need to override it — Yashwanth Babu
– Yashwanth Babu, Commented Feb 19, 2015 at 11:39
What have you tried? Note that you can't repeat element id in a page, they are unique by definition. Use class instead — charlietfl
– charlietfl, Commented Feb 19, 2015 at 12:42
Right now I have tried this code $(document).ready(function() { $('#compare').click(function() { var uuids = ''; var length = $("input[type='checkbox']").length; $("input[type='checkbox']").each(function(index){ uuids = uuids + $(this).val(); if (index < length-1) { uuids = uuids + ','; } }); url = '/products/compare/?ids=' + uuids; window.location.replace(url); }); });. This splits me to ids=uuid1,uuid2,uuid3,....soon. But how can i get uuid for only checked boxes? — Yashwanth Babu
– Yashwanth Babu, Commented Feb 19, 2015 at 13:06

Yashwanth Babu · Accepted Answer · 2015-09-14 12:36:15Z

1

I tried it and made it work.

working code:

$(document).ready(function() {
    $('#compare').click(function() {
        var uuids = '';
        var length = $("input[type='checkbox']:checked").length;
        console.log(length);
        $("input[type='checkbox']:checked").each(function(index){
            uuids = uuids + $(this).val();
            if (index < length-1) {
                uuids = uuids + ',';
            }
        });
        url = '/products/compare/?ids=' + uuids;
        window.location.replace(url);
    });
});

Finally this gives me the url with uuid's separated with comma's

https://localhost:8000/page1?ids=sdf-asdf23-as2q3r,sdfqwe-232sasdf-23rwdefr,wqerqr-3qwq2r-23rq23r

answered Sep 14, 2015 at 12:36

Yashwanth Babu

9399 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Passing parameters to url using Javascript or Jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related