How do I input data from Python FLASK to a database?

Question

I've got the below Python code:

@restServer.route("/sendData", methods=['POST'])
def client():
ID = request.form.get('ID')
name = request.form.get('name')
postcode = request.form.get('postcode')
dateofbirth = request.form.get('dateofbirth')
balance = request.form.get('balance')
description = request.form.get('description')

insert_stmt = (
    "INSERT INTO clients (ID, name, postcode, dateofbirth, balance, description) "
    "VALUES (%s, %s, %s, %s, %s, %s)"

)
data = (ID, name, postcode, dateofbirth, balance, description)
cursor.execute(insert_stmt, data)
conn.commit()
print("Did we do it?")
return jsonify(data)

I've also got the below HTML code:

  <form method="POST">
         <p>ID of your Avenger:</p> <input type="number" id="ID" required> 
       <p>Name of your Avenger:</p> <input type="text" id="name" required> 
         <p>Post Code of your Avenger:</p> <input type="text" id="postcode" required> 
          <p>Date of Birth of your Avenger:</p> <input type="date" id="dateofbirth" required> 
          <p>Bank balance of your Avenger:</p> <input type="number" id="balance" required> 
          <p>Description of your Avenger:</p> <input type="text" id="description" required> 


        <button class="button1" type="button" id="hashButton" onclick="nameInput()">Submit</button></form>

And finally the below Javascript code:

  function nameInput() {
   var words = document.getElementById("ID", "name", "postcode", "dateofbirth", "balance", "description" ).value;
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
  if(this.readyState == 4 && this.status == 200) {
  var json = JSON.parse(this.responseText);
  document.getElementById("nameInputReturn").innerHTML = 
  json.name;
  }
  }

        xhttp.open("POST", "http://127.0.0.1:5000/sendData", true);
        xhttp.setRequestHeader("Content-type", "application/x-www-form- 
 urlencoded");
        xhttp.send(words);
    }

I'm trying to make it so you can input data into the form and then it will upload that data into the database. I've figured out how to input data that I specify in the code, by simply changing the parts variables inside the data = (ID, name, postcode, dateofbirth, balance, description) line. Currently, the submit button is clicked but the database just adds a line which has NULL for every column.

I'm quite new to Flask, so any help is appreciated!

Do you really need to use JS to submit a form, even though using HTML would be the easier option? — Sean Francis N. Ballais
– Sean Francis N. Ballais, Commented May 19, 2018 at 15:34

Sean Francis N. Ballais · Accepted Answer · 2018-05-19 15:40:08Z

Your front end is kind of a mess. It seems like you are trying to send the POST request through JS, when your HTML could do it better and easier.

Try removing the listener from your submit button and changing your opening form tag to something like <form method="POST" action="http://127.0.0.1:5000/updateName">.

You should also change all of your id attributes to name. This is because the id attribute does not get sent to the server. The name attribute, however, is sent and used to access the form's information from the server.

This should be a good place to start:

<form method="POST" action="http://127.0.0.1:5000/updateName">
  <p>ID of your Avenger:</p> <input type="number" name="ID" required> 
  <p>Name of your Avenger:</p> <input type="text" name="name" required> 
  <p>Post Code of your Avenger:</p> <input type="text" name="postcode" required> 
  <p>Date of Birth of your Avenger:</p> <input type="date" name="dateofbirth" required> 
  <p>Bank balance of your Avenger:</p> <input type="number" name="balance" required> 
  <p>Description of your Avenger:</p> <input type="text" name="description" required> 
  <button class="button1" type="button" id="hashButton">Submit</button>
</form>

Collectives™ on Stack Overflow

How do I input data from Python FLASK to a database?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related