How can I pass a variable from a javascript form to python (on the same computer)?

Question

I have a javascript form with three sliders where a user can select three different values:

<form action="submit.php">
<div class="container">

<div class="slidecontainer">
    <input type="range" min="0" max="100" value="50" class="slider" id="red">
</div>

<div class="slidecontainer">
  <input type="range" min="0" max="100" value="50" class="slider" id="green">
</div>

<div class="slidecontainer">
  <input type="range" min="0" max="100" value="50" class="slider" id="blue">
</div>

<button type="submit" class="button">Submit</button>
</div>
</div>
</form>

I'd like to pass all three values (red, green, blue) to python so I can use them with other code, on the same computer. I tried using ajax and the example I saw here, but I think I'm submitting the form incorrectly. How can I post the data instead of calling submit.php so that I can read it with python?

Have you created any api in flask to receive the post or get request ?? — ygbgames, Aug 02 '19 at 01:02
You need to build a simple web service / web application with Python, so that it can be called from your JavaScript instead of the PHP script it is currently calling. How to set that up and code it goes a bit beyond just answering a question though. — Grismar, Aug 02 '19 at 01:03
Alternatively, `bottle` works to create API's. `bottle` is a single file with no dependencies so for me it works better. — , Aug 02 '19 at 01:10
Bottle appears to allow me to pass variables from python to a web page, but I'd like to go the other direction. Is that possible? — Alligator, Aug 02 '19 at 01:16

logicOnAbstractions · Accepted Answer · 2019-08-02T17:42:38.770

Simple. Use Cherrypy

Put that in a file (say main.py):

import random
import string

import cherrypy


class StringGenerator(object):
    @cherrypy.expose
    def index(self):
        return """<html>
          <head></head>
          <body>
<form name="search" action="/home" method="get">
Search: <input type="text" name="box">
<input type="submit" value="Submit">
<div class="container">

<div class="slidecontainer">
    <input type="range" min="0" max="100" value="50" class="slider" id="red">
</div>

<div class="slidecontainer">
  <input type="range" min="0" max="100" value="50" class="slider" id="green">
</div>

<div class="slidecontainer">
  <input type="range" min="0" max="100" value="50" class="slider" id="blue">
</div>

<button type="submit" class="button">Submit</button>
</div>
</div>
</form>
          </body>
        </html>"""

    @cherrypy.expose
    def generate(self, length=8):
        return ''.join(random.sample(string.hexdigits, int(length)))

    @cherrypy.expose
    def home(self, box):
        print("You've entered in the form: "+ str(box))

        return "THANKS"


if __name__ == '__main__':
    cherrypy.quickstart(StringGenerator())

Then in a terminal:

python main.py

Then go to : http://127.0.0.1:8080 & see magic happening when you click submit (the one next to the search box I added to your code):

You've entered in the form: I entered something in the form...

I litteraly just pasted an example from the doc (& tweaked to fit your code a bit more). Other than

pip install cherrypy

you really have nothing else to do to get started. By far the easiest way to make a webserver in python imo.

Essentially, when you do

@cherrypy.expose

the name of that method becomes https://127.0.0.1:8080/my_new_endpoint

You can easily serve stuff to different endpoints & pass arguments (as shown). So you can very easily add new enpoints. See docs for details.

Have fun!

This was a very easy answer, and worked perfectly. Thanks. – Alligator Aug 02 '19 at 01:30 — Alligator, Aug 02 '19 at 01:30

How can I pass a variable from a javascript form to python (on the same computer)?

1 Answers1