install psycopg2 https://pypi.org/project/psycopg2/
Psycopg is the most popular PostgreSQL database adapter for the Python programming language.
(venv) PS C:\flaskmyproject> pip install psycopg2
CREATE TABLE skills (
id serial PRIMARY KEY,
skillname VARCHAR ( 150 ) NOT NULL
);
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | #app.pyfrom flask import Flask, render_template, jsonify, requestimport psycopg2 #pip install psycopg2 import psycopg2.extras app = Flask(__name__) app.secret_key = "caircocoders-ednalan" DB_HOST = "localhost"DB_NAME = "sampledb"DB_USER = "postgres"DB_PASS = "admin" conn = psycopg2.connect(dbname=DB_NAME, user=DB_USER, password=DB_PASS, host=DB_HOST) @app.route('/')def index(): return render_template('index.html') @app.route("/postskill",methods=["POST","GET"])def postskill(): cur = conn.cursor(cursor_factory=psycopg2.extras.DictCursor) if request.method == 'POST': skills = request.form.getlist('skill[]') for value in skills: cur.execute("INSERT INTO skills (skillname) VALUES (%s)",[value]) conn.commit() cur.close() msg = 'New record created successfully' return jsonify(msg) if __name__ == "__main__": app.run(debug=True) |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | //templates/index.html<!DOCTYPE html><html><head> <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Add Remove Input Fields Dynamically with JQuery Ajax Python Flask and PostgreSQL</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> </head><body> <script>$(document).ready(function() { var MaxInputs = 8; //maximum input boxes allowedvar InputsWrapper = $("#InputsWrapper"); //Input boxes wrapper IDvar AddButton = $("#AddMoreFileBox"); //Add button ID var x = InputsWrapper.length; //initlal text box countvar FieldCount=1; //to keep track of text box added $(AddButton).click(function (e) //on add input button click{ if(x <= MaxInputs) //max input box allowed { FieldCount++; //text box added increment //add input box $(InputsWrapper).append('<div class="row"><p class="col-xs-6"><input type="text" placeholder="Enter your skill" class="form-control skill_list" name="skill[]" id="field_'+ FieldCount +'" value="Enter your skill '+ FieldCount +'"/></p><a href="#" class="btn btn-danger removeclass">×</a></div>'); x++; //text box increment } return false;}); $("body").on("click",".removeclass", function(e){ //user click on remove text if( x > 1 ) { $(this).parent('div').remove(); //remove text box x--; //decrement textbox } return false;}) $('#submit').click(function(){ $.ajax({ url:"/postskill", method:"POST", data:$('#add_skills').serialize(), success:function(data) { alert(data) $('#resultbox').html(data); $('#add_skills')[0].reset(); } }); }); });</script><style>.row {padding:10px;}</style><div class="container"><br /> <br /> <h2 align="center">Add Remove Input Fields Dynamically with JQuery Ajax Python Flask and PostgreSQL</h2><div id="resultbox"></div> <div class="form-group"> <form name="add_skills" id="add_skills"> <div id="InputsWrapper"> <div class="row"> <div class="col-xs-6"><input type="text" name="skill[]" placeholder="Enter your skill" class="form-control name_list" /></div> <div class="col-xs-6"><button type="button" name="add" id="AddMoreFileBox" class="btn btn-success">Add More</button></div> </div> </div> <br/> <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" /> </form> </div> </div> </body></html> |
