preventDefault() won't stop the page from refreshing

Question

So, a bit of background for starters.

I'm following the link below to do a simple post request.

https://codehandbook.org/python-flask-jquery-ajax-post/

I have done everything as it says and the page -surprisingly- works. The only problem is that it still keeps refreshing the page whenever I press "submit" even with the preventDefault() function in it. It is supposed to do some stuff in Flask with the variables I give it in the HTML below and before I get to that I would like to get rid of this little annoyance.

Here's my HTML:

<fieldset>
<form>
    Yrityksen nimi: <input name="Yrityksennimi" type="text" id="YN"  placeHolder="yritys" ></input><br>
    Ennustettu kasvu: <input name="Ennustettukasvu" type="number" min="1" max="2" step="0.001" value="1" id="kasvu"><br>
    Diskonttokorko: <input name="Diskonttokorko" type="number" min="0" max="1" step="0.001" value="0" id="DK"><br>
    BKT: <input name="BKT" type="number" min="0" max="1" step="0.001" value="0" id="BK"><br>
    Osakkeiden yhteenlaskettu määrä: <input name="Osakkeidenyhteenlaskettumaara" type="number" min="0" max="1000000000000000000000000" step="1" value="0" id="OM"><br>
    Vapaa kassavirta: <input name="Vapaakassavirta" type="number" min="0" max="1000000000000000000000000" step="0.1" value="0" id="KV"><br>
    Mittausajan pituus: <input name="Mittausajanpituus" type="number" min="0" max="100" step="1" value="0" id="MP"><br>
    <input type="submit" name="submit" id="submit"></input>
</form>
</fieldset>

Here's the Flask:

@app.route('/DCF-calculator', methods =['POST'])

def DCFcalc():

    n = request.form['Yrityksennimi'];
    g = request.form['Ennustettukasvu'];
    dr = request.form['Diskonttokorko'];
    gdp = request.form['BKT'];
    s = request.form['Osakkeidenyhteenlaskettumaara'];
    f = request.form['Vapaakassavirta'];
    v = request.form['Mittausajanpituus'];
return json.dumps({'status': 'OK', 'YN':n, 'kasvu':g, 'DK':dr, 'BK':gdp,'OM':s,'KV':f,'MP':c});

And finally the JavaScript:

$(document).ready(function() {
    $('submit').click(function(e) {
        e.preventDefault();
        var YN = $('#YN').val();
        var kasvu = $('#kasvu').val();
        var DK = $('#DK').val();
        var BK = $('#BKT').val();
        var OM = $('#OM').val();
        var KV = $('#KV').val();
        var MP = $('#MP').val();
        $.ajax({
            url: '/DCF-calculator',
            data: $('form').serialize(),
            type: 'POST',
            success: function(response) {
                console.log(response);
            },
            error: function(error) {
                console.log(error);
            }
        });
    });
});

What am I doing wrong?

Answer 1

You are not binding the click event to the button, this $('submit') doesn't bind to the submit button, use the id of the submit button $(#submit).

$(document).ready(function () {
        $('#submit').click(function (e) {
            e.preventDefault();
            var YN = $('#YN').val();
            var kasvu = $('#kasvu').val();
            var DK = $('#DK').val();
            var BK = $('#BKT').val();
            var OM = $('#OM').val();
            var KV = $('#KV').val();
            var MP = $('#MP').val();
            //uncomment this lines
            // $.ajax({
            //     url: '/DCF-calculator',
            //     data: $('form').serialize(),
            //     type: 'POST',
            //     success: function (response) {
            //         console.log(response);
            //     },
            //     error: function (error) {
            //         console.log(error);
            //     }
            // });
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    Yrityksen nimi: <input name="Yrityksennimi" type="text" id="YN" placeHolder="yritys"></input><br>
    Ennustettu kasvu: <input name="Ennustettukasvu" type="number" min="1" max="2" step="0.001" value="1" id="kasvu"><br>
    Diskonttokorko: <input name="Diskonttokorko" type="number" min="0" max="1" step="0.001" value="0" id="DK"><br>
    BKT: <input name="BKT" type="number" min="0" max="1" step="0.001" value="0" id="BK"><br>
    Osakkeiden yhteenlaskettu määrä: <input name="Osakkeidenyhteenlaskettumaara" type="number" min="0"
                                            max="1000000000000000000000000" step="1" value="0" id="OM"><br>
    Vapaa kassavirta: <input name="Vapaakassavirta" type="number" min="0" max="1000000000000000000000000" step="0.1"
                             value="0" id="KV"><br>
    Mittausajan pituus: <input name="Mittausajanpituus" type="number" min="0" max="100" step="1" value="0" id="MP"><br>
    <input type="submit" name="submit" id="submit"></input>
</form>

Answer 2

as long as you use "submit" type, the form still submit and refresh the page. Change

<input type="submit" name="submit" id="submit"></input>

to

<input type="button" name="submit" id="submit"></input>

will solve your problem

Hope this helps!

Answer 3

You can use e.stopImmediatePropagation() in such cases

Or give id to form and use

 $("#formid"). submit (function (e){e.preventDefault(); });

Answer 4

change your code to catch submit event of the form and use preventDefault and return false

$('form').submit(function(e) {
     e.preventDefault();

     // code

     return false;
});