Passing HTML/JS variables to Python

Question

I am creating a site that will run on an embedded device that provides an interface for the user to interact with several functions on the site. These functions on the HTML site will interface to a Python script which will then control external physical devices connected to the embedded device.

So far, I have several buttons that look like this:

<button class="ui left attached button white" value="Button A - OFF" onClick='buttonTrigger(this.value)'>Button A</button>

The buttonTigger.js method looks as follows:

function buttonTrigger(value) {
  document.location = "cgi-bin/command.cgi"
}

command.cgi looks as follows:

#!/bin/bash

echo "Hello World!"

My end goal is to have the .cgi script pass the value of the button pressed to a Python script.

Here is my question: How do I invoke command.cgi from buttonTrigger.js and pass the value parameter from the buttonTrigger to the method? How will my Python script access the variables passed to the .cgi script? Alternatively, how can my Python script directly access the variable values from JS without a .cgi script?

EDIT: So Bottle has the ability to handle query strings:

from bottle import route, request, response, template
@route('/forum')
def display_forum():
    forum_id = request.query.id
    page = request.query.page or '1'
    return template('Forum ID: {{id}} (page {{page}})', id=forum_id, page=page)

Is there a way to send a query string without reloading the webpage? I don’t want my page to reload every time a user clicks a button as they will do so quite frequently.

Your question is much broader than you seem to realize. You will want to use a web framework, not write a CGI script directly from scratch. You might start by looking at some simple, lightweight frameworks such as Flask or Bottle and see if you can find examples that illustrate use of server-side Python in dynamic web pages. — BrenBarn
– BrenBarn, Commented Jul 15, 2018 at 18:35

Brian · Accepted Answer · 2018-07-15 20:59:47Z

1

This is an example using the bottle framework. To run this, install bottle using pip install bottle, and then start the application using python app.py, which will run the application on http://localhost:8000/ by default.

app.py

from bottle import request, route, run, static_file

@route('/')
def index():
    return static_file('index.html', './')

@route('/command')
def command():
    value = request.query.value
    return 'Value was set to: ' + value

run(host='0.0.0.0', port=8000, debug=True)

index.html

<!doctype html>
<html>
<head>
    <title>Python Example</title>
    <script>
        function buttonTrigger(value) {
            var output = document.getElementById('output');
            output.innerText = 'Button clicked, waiting for response...';

            fetch('command?value=' + value)
                .then(function(response) { 
                    return response.text();
                })
                .then(function(text) {
                    console.log(text);
                    output.innerText = text;
                });
        }
    </script>
</head>
<body>
    <button value="Button A - OFF" onClick='buttonTrigger(this.value)'>Button A</button>
    <div id="output"></div>
</body>
</html>

edited Jul 15, 2018 at 20:59

answered Jul 15, 2018 at 20:27

Brian

1,9081 gold badge11 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Owen Over a year ago

When I set my environment up like this, I'm receiving the following error. I must not have something configured correctly.

Owen Over a year ago

The button does, in fact, trigger the correct request as noted by app.py: "GET /command?value=OFF HTTP/1.1" 200 21

Collectives™ on Stack Overflow

Passing HTML/JS variables to Python

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related