How do I pass inputs from jQuery to Flask?

I have three inputs I am trying to pass the values back to a function inside my app, from the index.html rendered in Flask.

Here are the inputs:

<form method="POST" action="/">
                <small>What is your gross income? <BR></small>
                <input type="number" id="Income"><BR><BR>

                <div class="slidecontainer">
                    <small> What  % of income for house payment?</small><BR>
                    <input type="range" min="10" max="60" value="28" class="slider" id="percent_income" step="1"><BR>
                    <small><label> Percent: <span id="Percent"></span>%</label></small>
                </div>

                <div class="slidecontainer">
                    <small> What is your interest rate?</small><BR>
                    <input type="range" min="2" max="6" value="3.5" class="slider" id="interest_rate" step=".25"><BR>
                    <small><label> Rate: <span id="Rate"></span>%</label></small>
                </div>

            </form>

Here is the script to assign and render their values on the page (for Rate and Percent of income sliders) as well as my start at trying to pass the values.

$(function() {
            var slider3 = $("#interest_rate");
            $("#Rate").html(slider3.val());

            slider3.change(function() {
            $("#Rate").html(slider3.val());
            })

            var slider4 = $("#percent_income");
            $("#Percent").html(slider4.val());

            slider4.change(function() {
            $("#Percent").html(slider4.val());
            })
        });

function fetchdata()
            {
                $.getJSON({
                    type: "GET",
                    url: "{{ url_for('calcprice') }}",
                    data: {
                        'Income': $('#Income option:selected').html(),
                        'Percent': $('#percent_income option:selected').html(),
                        'Rate': $("#interest_rate option:selected").html(),
                    },
                    success: function(data){
                        console.log(data)
                    }
                });
            }

            $(document).mouseup(function () {fetchdata()});
            $(document).on('change', function () {fetchdata()});

Here is the route I have started that I am trying to pass values / request values from but I am a bit stuck, new to jQuery and I am getting 404 errors when I change the values. Running in loops trying to parse what’s happening and not. Any advice appreciated!

@app.route('/calcprice', methods=['GET', 'POST'])
def calcprice():
    Income = request.args.get('Income')
    Percent = request.args.get('Percent')
    Rate = request.args.get('Rate')
    return price

Answer

To fetch a value from an input field using JQuery, try the following: $('#{Id_of_input_field}').val()

In your example it will look something like:

$.getJSON({
    type: "GET",
    url: "{{ url_for('calcprice') }}",
    data: {
        'Income': $('#Income').val(),
        'Percent': $('#percent_income').val(),
        'Rate': $("#interest_rate").val(),
    },
    success: function(data){
        console.log(data)
    }
});