Two Ajax calls only meet one condition at a time - ajax

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

Answer 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">