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
– 3kstc, Commented May 17, 2020 at 3: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
– ww2406, Commented May 17, 2020 at 3:39
Which kind of endpoint are you using Flask or something else? — ngShravil.py
– ngShravil.py, Commented May 17, 2020 at 3:49
@ngShravil.py Nothing atm - I'm open to anything - I have no idea where to start..... — 3kstc
– 3kstc, Commented May 17, 2020 at 4:02

ngShravil.py · Accepted Answer · 2020-05-19 07:07:57Z

1

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.

edited May 19, 2020 at 7:07

answered May 17, 2020 at 5:12

ngShravil.py

5,0983 gold badges21 silver badges32 bronze badges

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

3 Comments

3kstc Over a year ago

How would I make it so that the <h2>Have a good day, {{name}}</h2> happens in the index.htmlwhen the user "submits" a name, and if they dont't enter a "name" but push submit, <h2>Didn't get your name</h2> appears instead?

ngShravil.py Over a year ago

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.

3kstc Over a year ago

I've created another question here. It looks simple, but I just can't get my head around it.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related