Dyanmically change Python list contents through Javascript

Question

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.

`$order = $_POST['column_name']` this is what you should have on your server or change `data: { column_name: "sortOrder"},` to `data: { sortOrder: sortOrder},` — Masivuye Cokile, Oct 02 '19 at 12:19
@MasivuyeCokile then i get Notice: Undefined index: column_name in /opt/lampp/htdocs/final/sort.php on line 4 error — Vaibhav Kakade, Oct 02 '19 at 12:22
@Vk check what formdata is being sent from your developer console network tab — Masivuye Cokile, Oct 02 '19 at 12:23
@MasivuyeCokile I get "GET localhost sort.php?column_name=ASC" which seems correct — Vaibhav Kakade, Oct 02 '19 at 12:35
@Vk This is a GET request, not POST. Which method do you really use? — Dharman, Oct 02 '19 at 12:36

score 0 · Answer 1 · answered Oct 02 '19 at 12:25

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!';
}

answered Oct 02 '19 at 12:25

Dharman

30,962
25
85
135

I get No value was passed – Vaibhav Kakade Oct 02 '19 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 02 '19 at 12:35
post array is empty and network tab shows proper data – Vaibhav Kakade Oct 02 '19 at 12:42
Check that your method is really POST. From your comment above it looks like it is GET – Dharman Oct 02 '19 at 12:43
Networ shows method GEt but I have used POST in the both the files – Vaibhav Kakade Oct 02 '19 at 12:46
Then you need to investigate where the GET comes from and why. – Dharman Oct 02 '19 at 12:47
does having session affects anything, coz i have session_start on the other page and not on sort.php – Vaibhav Kakade Oct 02 '19 at 12:49
yes you required session on the other page aswell – Ahmed Sunny Oct 02 '19 at 18:02

score 0 · Answer 2 · answered Oct 02 '19 at 12:28

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.

Thanks everyone, issues is solved. I used type instead of method. :) — Vaibhav Kakade, Oct 05 '19 at 04:18

Dyanmically change Python list contents through Javascript

2 Answers2