Two Ajax calls only meet one condition at a time

Question

I have the following script that sends a POST of my select option to a url called requestaccess. This works great when using only one of the two, but when I change the other field the result of the POST is None for the first and correct for the second and vice-versa.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<select title ="accesslevelid" class="form-control" id="accesslevelid" onclick="accesslevelid">
            <option value=""> Please select your access level  </option>
            <option value="7"> Facility  </option>
            <option value="5"> Division  </option>
            <option value = "3"> Corporate  </option>
            <option value = "6"> Market  </option>
            <option value = "4"> Group  </option>
</select>
<script>
$(document).ready(function () {
    $('#accesslevelid').on('click', function () {
        var accesslevelid = $(this).val();
        $.ajax({ url: "{% url 'requestaccess' %}",
                headers: { 'X-CSRFToken': '{{ csrf_token }}' },
                data: {
                  accesslevelid: accesslevelid,
                },
                type: 'POST',
                success: function (result) {
                  ;
                },
              });
      });
  });
</script>
        </div>
        <div class="col">


          <label for="phi"><h3>PHI</h3></label>

          <select class="form-control" id="phi" title = "phi" onclick="phi">
            <option value = ""> Please select if you need access to PHI data </option>
            <option value = "0"> No  </option>
            <option value = "1"> Yes  </option>

          </select>
          <script>
          $(document).ready(function () {
              $('#phi').on('click', function () {
                  var phi = $(this).val();
                  $.ajax({ url: "{% url 'requestaccess' %}",
                          headers: { 'X-CSRFToken': '{{ csrf_token }}' },
                          data: {
                            phi: phi,
                          },
                          type: 'POST',
                          success: function (result) {
                            ;
                          },
                        });
                });
            });
          </script>

My view gets the POST value with the following:

selectedaccesslevel = request.POST.get('accesslevelid')
print(selectedaccesslevel)
selectedphi = request.POST.get('phi')
print(selectedphi)

However, my print either displays as:

None
1 or 2

or 

7, 5, 3, 6, 4
None.

My desired results are for it to display as :

7, 5, 3, 6, or 4
1 or 2

rajkris · Accepted Answer · 2017-12-07T16:07:41.187

1

Maybe just write a single click function for both selects, ie each time you click on either of the selects you fetch both the select values and pass it to the view, something like this:

 $(document).ready(function () {
          $('.my_select').on('click', function () {
              var phi = $('#phi').val();
              var accesslevelid = $('#accesslevelid ').val();
              $.ajax({ url: "{% url 'requestaccess' %}",
                      headers: { 'X-CSRFToken': '{{ csrf_token }}' },
                      data: {
                        phi: phi,
                        accesslevelid: accesslevelid
                      },
                      type: 'POST',
                      success: function (result) {
                        ;
                      },
                    });
            });
        });

do not forget to add class name 'my_select' to both your selects.

<select class="form-control my_select" id="phi" title = "phi" >
<select title ="accesslevelid" class="form-control my_select" id="accesslevelid">

edited Dec 07 '17 at 16:07

answered Dec 07 '17 at 15:10

rajkris

1,775
1
9
16

I tried using a single click function as you suggested and posted the code above below my code, but it returns no value. If I re-add the accesslevelid as it was and try to combine it in the PHI, only the accesslevelid returns a value in the POST. – student101 Dec 07 '17 at 15:42
I'll also need to access each POST from my_select individually as I send the POST to the database. – student101 Dec 07 '17 at 15:58
It is $('.my_select') and you have to add class "my_select" to both the selects. Currently you have "form-control" only as class name for both the selects, please change that..I think it will work fine once you do that. And you dont need onclick="accesslevelid" since you are already binding the click event in the script code – rajkris Dec 07 '17 at 15:58
I changed the code block at the very bottom above as suggested and my results are no longer sent to the POST. Do I also have to change the request.POST.get('accesslevelid') to my_select? <~ that didn't work. – student101 Dec 07 '17 at 16:07
updated the answer. I was talking about the HTML part. To add class name "my_select" to the selects and use the above code – rajkris Dec 07 '17 at 16:10
Thank you Rajkris, i accepted as the correct answer. I'm new to this area of development, I appreciate your help. – student101 Dec 07 '17 at 16:13
Glad it helped! – rajkris Dec 07 '17 at 16:14
Question for you. What is the difference in .my_select and #my_select? – student101 Dec 07 '17 at 16:14
1

'.my_select' points to a class name(starting with a dot), while '#my_select' points to an id (starting with a '#'). Here we gave both of your selects the class name 'my_select' and on using $('.my_select') we refer them both – rajkris Dec 07 '17 at 16:16

Two Ajax calls only meet one condition at a time

1 Answers1