-2

I am working on web cgi application using python. Where I have two dropdowns whose options are rendered from list. Now I want to dynamically updated content of the second dropdown based on the first dropdown value.

All the code is written in Python including HTML. I am able to call onchange event on the first dropdown and get the selected value into Javascript object, however I want to assign it to python variable so that I can populate the second dropdown based on the selected value.

    <label for="staticEmail" class="col-sm-2 col-form-label">State:</label>
    <div class="col-sm-6">
      <select name="state" class="form-select" autofocus id="select_facility" onchange="selectFacility()">
      <option value="XX">Select Facility</option>''')
  for r in stateList:
    print('<option value="'+str(r)+'">'+str(r))
  print('</select>')
  print('</div>')
  print('</div>')

  print('''<div class="mb-3 row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Facility Name:</label>
    <div class="col-sm-6">
      <select name=state class="form-select" >
      <option value=XX>Select Facility</option>''')
  for r in facList:
    print('<option value="'+str(r['state'])+'|'+r['facility_npi']+'">'+r['name']+', '+r['city']+', '+r['state'])
  print('</select>')
  print('</div>')
  print('</div>')```

And Javascript code having onchange method defined is as follows:
```print('''<script>''')
print('function selectFacility(){return document.getElementById("select_facility").value}')
print('</script>''')```

But I am unable to obtain the selected value into Python variable.
7
  • 3
    $order = $_POST['column_name'] this is what you should have on your server or change data: { column_name: "sortOrder"}, to data: { sortOrder: sortOrder}, Oct 2, 2019 at 12:19
  • @MasivuyeCokile then i get Notice: Undefined index: column_name in /opt/lampp/htdocs/final/sort.php on line 4 error Oct 2, 2019 at 12:22
  • print_r($_POST) check what you are getting Oct 2, 2019 at 12:23
  • @Vk check what formdata is being sent from your developer console network tab Oct 2, 2019 at 12:23
  • @MasivuyeCokile I get "GET localhost sort.php?column_name=ASC" which seems correct Oct 2, 2019 at 12:35

2 Answers 2

0

Your AJAX call is incorrect.

You are passing an object which has a property called column_name which contains a literal string "sortOrder".

Try something like this:

function sortby(selectObject) {
    var sortOrder = selectObject.value;
    $.ajax({
        url: "sort.php",
        method: "POST",
        data: { column_name: sortOrder },
        success: function(data) {
            $('#allProducts').html(data);
        }
    })
    console.log("called");
}

And then in PHP:

<?php
if(isset($_POST['column_name']) {
    // do something here
} else {
    echo 'No value was passed!';
}
8
  • I get No value was passed Oct 2, 2019 at 12:33
  • Did you check your network tab in your browser, to see what values are sent? Did you check in PHP the contents of POST array?
    – Dharman
    Oct 2, 2019 at 12:35
  • post array is empty and network tab shows proper data Oct 2, 2019 at 12:42
  • Check that your method is really POST. From your comment above it looks like it is GET
    – Dharman
    Oct 2, 2019 at 12:43
  • Networ shows method GEt but I have used POST in the both the files Oct 2, 2019 at 12:46
0

You have to make following changes in your data object.

function sortby(selectObject) {
        var sortOrder = selectObject.value;
        $.ajax({
            url: "sort.php",
            method: "POST",
            data: { "sortOrder": sortOrder }, // the var you have get from DOM to sent to PHP code
            success: function(data) {
                $('#allProducts').html(data);
            }
        })
        console.log("called");
    }

sorOrder indes is looked into $_POST[] array but it can't found and hence it return you notice.

1
  • Thanks everyone, issues is solved. I used type instead of method. :) Oct 5, 2019 at 4:18

Not the answer you're looking for? Browse other questions tagged or ask your own question.