How to pass strings from HTML to Python and back to HTML

Question

Background:

I have created a very simple front end, where the user can input strings. Once entered and "check" button is clicked, I would like to pass this string as a JSON to a python string where it will do a SQL look up. Based on the SQL look the python script should pass a boolean value which should change the ? to a ✔ or a ✘.

Question:

How can I pass on a string once the "check' button is pressed as a JSON to a Python script, and pass a Boolean from Python to HTML to change the ? to a ✔ or a ✘?

Research:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}


  h3 {text-align: center;}
  .center {
            display: flex;
            justify-content: center;
            align-items: center;
            }
    </style>

</style>
</head>
<body>

<h3>My Request</h3>

<div class="container">
  <form action="/action_page.php">
  
<label for="account_name">? Account Name:</label>
<input type="text" id="fname" name="firstname" placeholder="Account Name..">
<input type="submit" value="Check Account"><br><br>

<label for="contact_name">? Contact Name:</label>
<input type="text" id="lname" name="lastname" placeholder="Contact Name..">
<input type="submit" value="Check Contact"><br><br>


<label for="reseller">? Reseller:</label>
<input type="text" id="lname" name="lastname" placeholder="Reseller..">
<input type="submit" value="Check Reseller"><br><br>

<label for="issue_date">? Issue Date:</label><br>
<input type="date" id="start" name="trip-start" value="" min="2018-01-01" max="2100-12-31">

 
<br>
<div class="center">
    <input type="submit" value="VERIFY ALL">
</div>
  </form>
</div>

</body>
</html>

@user1558604 I've quickly changed it to a form, not as pretty as the previous one, but a form a nevertheless... — 3kstc, May 17 '20 at 03:04
You’ll need to use some AJAX. If you’re using jQuery, look into jQuery.Post. You’ll post the value to check to the Flask/Python endpoint, then use the callback method to update the checkbox mark based on the response. — ww2406, May 17 '20 at 03:39
Which kind of endpoint are you using Flask or something else? — ngShravil.py, May 17 '20 at 03:49
@ngShravil.py Nothing atm - I'm open to anything - I have no idea where to start..... — 3kstc, May 17 '20 at 04:02
To start with, you can go with Flask. It's a very easy framework. — ngShravil.py, May 17 '20 at 04:09
@ngShravil.py Any hints, or any rough code that I can progress on? — 3kstc, May 17 '20 at 04:10

ngShravil.py · Accepted Answer · 2020-05-19T07:07:57.387

This is just a sample code, which will make you understand how to pass values from client to server as well as server to client.

Asumption: 'Flask' is you current working directory

Please follow the below steps:

Install Flask

Run the below command

pip install Flask

Create a python file app.py, copy paste the below content into this file.

from flask import Flask, render_template, request

app = Flask(__name__)


@app.route('/')
def index():
    return render_template('index.html')


@app.route('/greet', methods=['POST'])
def greet():
    name = request.form['name']
    return render_template('greet.html', name=name)


if __name__ == '__main__':
    app.run()

Create a file index.html in location '/Flasak/templates' as

<h1>Welcome</h1>
<form action="http://localhost:5000/greet" method="POST">
    Name: <input type="text" name="name"> <button type="submit">Submit</button>
</form>

Create a file greet.html in location '/Flasak/templates' as

<h2>Have a good day, {{name}}</h2>

Run the python file like below

python app.py

Open a browser and hit http://localhost:5000, it will display 'welcome', along with a field to input name. Provide your name and hit Submit. Like this you can send the values to server from client.
After pressing Submit, redirection will happen, the server will receive name and send it again to client. Now you should be able to see Have a good day, along with the name provided.

Just for your reference the project's directory will be looking like below:

Flask
  |
  |-> templates
  |    |
  |    |-> greet.html
  |    |-> index.html
  |
  |-> app.py

Note: For better understanding, I would recommend you to go through tutorials. I hope this was helpful to you.

How would I make it so that the `
Have a good day, {{name}}
` happens in the `index.html`when the user "submits" a name, and if they dont't enter a "name" but push submit, `
Didn't get your name
` appears instead? — 3kstc, May 19 '20 at 05:18
In that case, you don't need to send the data to server. So, it will be out of scope of the original question. Could you post another question and let me know. — ngShravil.py, May 19 '20 at 07:17
I've created another question [here](https://stackoverflow.com/questions/62078985/updating-the-same-site-with-pythons-flask-module). It looks simple, but I just can't get my head around it. — 3kstc, May 29 '20 at 04:57

How to pass strings from HTML to Python and back to HTML

1 Answers1

Have a good day, {{name}}

Didn't get your name

Linked