Python Forum

Full Version: How to capture value from javascript using flask
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
I am creating a dynamic form in javascript dynamic form where i have a button which will add text fields . I want to capture the value of the those text boxes that whatever user enters i want to print it out. But unable to get it till now...

In java script i have created function which create text boxes on clicking add button. I want to capture the value of text boxes

below is my html:
<html>
<head>
<title>Payment Plan Form</title>

<script type="text/javascript" src="{{url_for('static', filename='vendor/jquery/jquery-3.2.1.min.js')}}"></script>
<a href ="/" style="text-align:right-side;display:block;">Log Out</a>
<a href ="/tco" style="text-align:right-side;display:block;">Visit TCO</a>
<style type="text/css">
    div{
        padding:8px;
    }
</style>

</head>

<body>

<h1 align="center">Payment Plan Form </h1>

<script type="text/javascript">

$(document).ready(function() {
    var max_fields      = 100; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //wants to capture value of below div text name is mytext[]
            $(wrapper).append('<div><input type="text" name="mytext[]"/>&nbsp&nbsp<input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});
</script>
</head><body>
<form action="" ALIGN="CENTRE" method="POST">
<div class="input_fields_wrap"align="center">
    <button class="add_field_button">Add More Fields</button>
</div>
<div align="center">
    <input type="submit" value="Submit"><br>
</div>
<TR><TD>
                                XID Number </TD>
                                    <TD><input type="text" name="xidnumber">
                                            </TD>
                                </TR>
</form>
</body>
</html>
from flask import Flask, render_template
import os
from flask import redirect, url_for, request
from flask_sqlalchemy import SQLAlchemy
import sys
import sqlite3
import datetime
from datetime import date
import csv

app = Flask(__name__)

@app.route("/", methods=["GET", "POST"])
def log():
    names = os.getlogin().split(".")[0].title()
    error= None
    if request.method == "POST":
        if request.form["username"]!= os.getlogin() or request.form["password"]!="1234":
            error = "Invalid Credentials.Please Try again."
        else:
            return redirect(url_for("welcome"))
    return render_template("login.html", error=error, name=names)

@app.route("/welcome",methods=["GET","POST"])
def welcome():
    return render_template("welcome.html")

@app.route("/paymentplan",methods=["GET","POST"])
def paymentplan():
    conn = sqlite3.connect("payment_tco.db")
    fdate = date.today()
    if request.method=="POST":
        rxidnumber = request.form["xidnumber"]#
        #mytext = request.form["mytexta[]"]# unable to get the value of mytext[]
    return render_template("payment.html")

@app.route("/tco",methods=["GET","POST"])
def tco():
    return render_template("tco.html")

app.run(debug=True)