Home Two Ajax calls only meet one condition at a time
Reply: 1

Two Ajax calls only meet one condition at a time

student101
1#
student101 Published in 2017-12-07 15:04:16Z

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
2#
rajkris Reply to 2017-12-07 16:07:41Z

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">
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.300474 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO