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
– ygbgames, Commented Aug 2, 2019 at 1: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
– Grismar, Commented Aug 2, 2019 at 1:03
Alternatively, bottle works to create API's. bottle is a single file with no dependencies so for me it works better. — user11803894
– user11803894, Commented Aug 2, 2019 at 1: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
– Alligator, Commented Aug 2, 2019 at 1:16

logicOnAbstractions · Accepted Answer · 2019-08-02 17:42:38Z

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!

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related