Attempting to trigger an ajax function within a form in order to retrieve a value for the dropdown.
mypython.py
@app.route('/new_data', methods = ['POST', 'GET'])
def new_data():
#Filter data and return the data(data_list,filter_function_url) to myhtml.html file
myhtml.html
<div>
<form ....method="POST" action="{{url_for('submit_new_data')}}" method="POST" enctype="multipart/form-data">
....
....
<select id="selected_data" onchange='get_subdata_filters("{{ filter_function_url }}")'>
<option disabled selected>Please Select Partner State</option>
{% for f in data_list %}
<option value="{{f}}">{{f}}</option>
{% endfor %}
</select>
</form>
</div>
myjsfile.js
This works properly where the value from the id selected_data in the html file and the selected_option_data_filter_url obtained from the html is displayed accurately on the console without any issues.
function get_subdata_filters(selected_option_data_filter_url) {
var selected_data = document.getElementById("selected_data").value;
// convert user-selected data into dictionary/json
var new_selected_data = {
s_data:selected_data
};
console.log(new_selected_data);
console.log(selected_option_data_filter_url);
}
However, adding an ajax call inside my js function up to select results in this error:
Uncaught ReferenceError: get_subdata_filters is not definedconsole.
What am I doing wrong? How can I fix this?