-1

I am creating a GUI using Python Eel.

In this UI I have a drop down. user will select the value of dropdown and submit and that dropdown value will reflect in Python console.

But I am unable to receive value from JavaScript.

This is my Python code:

from random import randint
import eel
  
eel.init("web")  
  
# Exposing the random_python function to javascript
@eel.expose    
def random_python():
    print("Random function running")
    return randint(1,100)


@eel.expose
def getList():
    lst = ["a","b","c","d"]
    return lst
  
eel.spawn(eel.js_myval()())
    

eel.start("index.html")

This is my JavaScript:

let lst =document.getElementById("cate") 
document.getElementById("submit").addEventListener("click",()=>{
        eel.expose(js_myval)// here i am using eel expose
        function js_myval(){
            return lst.value;
    }
       
    
    })

This is my html:

    <select name="meesho_category" id="cate">
        <option value="x">x</option>
        <option value="x">a</option>
        <option value="x">b</option>

    </select>

Read these

Pass JavaScript Variable Value to Python with Eel

https://github.com/ChrisKnott/Eel

halfer
  • 19,824
  • 17
  • 99
  • 186
James
  • 1,124
  • 3
  • 17
  • 37
  • Please try to spell-check and case-check your work before submitting it here. Stack Overflow is intended to be a reference site for future readers, and thus making it readable by default is optimal. Although we do have volunteer editors, we do not have nearly enough to fix the thousands of posts that are made every day. – halfer Aug 13 '21 at 19:11

1 Answers1

1

I'm going to answer your narrow question about passing the dropdown value from JavaScript to Python, and ignore code that isn't related to that question.

First, let's rewrite your JavaScript like this so it focuses on your question:

document.getElementById("btn-submit").addEventListener("click",()=>{submit()}, false);

function submit() {
    eel.on_submit(document.getElementById("cate").value)
}

That JavaScript code defines a click handler for the btn-submit button, which will read the value of cate dropdown and send it to Python code.

Next, let's do the same trim down of the Python file:

import eel
  
eel.init("web")

@eel.expose
def on_submit(cate_dropdown_val):
    print(f"cate val submitted: {cate_dropdown_val}")

eel.start("index.html")

This code exposes the on_submit function from Python to JavaScript. You'll notice it's being called in the JavaScript block listed above inside of the submit function.

Lastly, let's look at the HTML:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="eel.js"></script>        
    </head>
    <body>
        <select name="meesho_category" id="cate">
            <option value="x">x</option>
            <option value="a">a</option>
            <option value="b">b</option>    
        </select>
        <button id="btn-submit">Submit</button>
    </body>
    <script type="text/javascript" src="js/app.js"></script>
</html>

This HTML defines the cate dropdown element, a Submit button, and imports the eel.js and custom app.js shown above.

When the application is run, and a user clicks the submit button, the Python console will print out the value of the cate dropdown to the console.

From the other code in your example, it looks like you want to build more stuff. Please open a new question with the additional help you might need.

dstricks
  • 1,465
  • 12
  • 23