Get data to a python variable from a html input?

Question

I am new to python. I need to get data from a html input to a python variable. But I can't find a way to do this. It shows output as None, None, None for output. It doesn't print out the data too. How can I fix this issue? This is the code in html file.

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type=text/javascript>
            $(function() {
              $('button#add-income').bind('click', function() {
                $.getJSON('/add_income',
                    function(data) {
                  //do nothing
                });
                return false;
              });
            });
    </script>

    <form class="add-income-box" method="POST" action="">
        <div class="add-income-expences-top-div">
            <label>INCOME</label>
        </div>
        <div class="add-income-expences-label-div">
            <label class="add-income-expences-date-lbl">Date : </label>
            <label class="add-income-expences-details-lbl">Details : </label>
            <label class="add-income-expences-amount-lbl">Amount : </label>
        </div>
        <div class="add-income-expences-input-div" id="div1">
            <input class="add-income-expences-date-input" name="i_date" value="{{request.form.i_date}}">
            <input class="add-income-expences-details-input" name="i_details" value="{{request.form.i_details}}">
            <input class="add-income-expences-amount-input" name="i_amount" value="{{request.form.i_amount}}">
        </div>
        <button class="add-income-expences-bottom" id="add-income">ADD</button>
    </form>

this is the code in python file

    @app.route('/add_income', methods=["GET", "POST"])
    def add_income():
        i_date = request.form.get('i_date')
        i_details = request.form.get('i_details')
        i_amount = request.form.get('i_amount')
        print(i_date)
        print(i_details)
        print(i_amount)
        return "nothing"

output:-

None
None
None
127.0.0.1 - - [31/May/2020 16:56:07] "GET /add_income HTTP/1.1" 200 -

Answer 1

Change this form tag action attribute

<form class="add-income-box" method="POST" action="{{ url_for('update_project')}}">

In this way, when you click on button it will call the method specified in action attribute.

and if you want to call this API using AJAX then make use of JSON to send data. And if you want to send data using form then remove the Ajax code and change the code as above suggested and click on the button and you will not get the form data.