Adding onclick javascript function to template blocks Python Flask routing

Question

I have an HTML form and a submit button attached to a JavaScript function that greys out the button on click.

<form action="/feedback" method="POST">
<fieldset class="rating">
    <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
    <!-- there are more fields but I omit them for brevity -->
</fieldset>
<input type="submit" value="Submit" id="feedback-submit" onclick="thanks()">
</form>

<script>
function thanks(){
    var button = document.getElementById("feedback-submit")
    button.value = "Thanks!";
    button.disabled = true;
}
</script>

And the /feedback endpoint is routed to a Flask function that reads the value from the fieldset.

@app.route('/feedback', methods=["POST", "GET"]
def feedback():
    if request.method == "POST":
        logging.info(form['rating'])
        return "Thanks for submitting"

It seems like having the onclick tag in my submit button makes it so that the feedback() function is never reached. When I remove the onclick feedback() executes normally.

I am just curious as to why this is and if there is any way to still get similar functionality.

Thanks!

Hello, will you please provide feedback for the given answer? Did that work for you? — BeeBee8
– BeeBee8, Commented Mar 28, 2018 at 12:54

BeeBee8 · Accepted Answer · 2018-03-27 17:33:57Z

4

You can read about why onclick on submit button does not work together Submit and onclick not working together

Here is working solution for you.

In your form just assigned id=someForm

<form id="someForm" action="/feedback" method="POST">
<fieldset class="rating">
    <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
    <!-- there are more fields but I omit them for brevity -->
</fieldset>
<input type="submit" value="Submit" id="feedback-submit" onclick="thanks()">
</form>

In your script:

function thanks(){
    var button = document.getElementById("feedback-submit");
    button.value = "Thanks!";
    button.disabled = true;
    var form = document.getElementById("someForm");
    form.submit();
}

answered Mar 27, 2018 at 17:33

BeeBee8

3,0842 gold badges30 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Adding onclick javascript function to template blocks Python Flask routing

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related