How to pass dropdown value from javascrpt to python using eel correctly?

Question

read this : Pass JavaScript Variable Value to Python with Eel

read this : https://github.com/ChrisKnott/Eel

hi,

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>

Answer 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.

How to pass dropdown value from javascrpt to python using eel correctly?

Question

1 answers

solution1
1 ACCPTED 2021-07-27 00:45:24

How to pass dropdown value from javascrpt to python using eel correctly?

Question

1 answers

solution1 1 ACCPTED 2021-07-27 00:45:24

solution1
1 ACCPTED 2021-07-27 00:45:24