Pass python flask object into jQuery or JavaScript

Question

I have following jQuery which modifies my html code:

$('input[name="date-format"]').change(function () {
    if ($(this).val() == '0') {
        $(".date-range").html(`<div class="eu-input">
                                    <label>Date from</label><input name="eu-date-from">
                                    <label>Date to</label><input name="eu-date-to">
                                </div>`);
    }
    else if ($(this).val() == '1') {
        $(".date-range").html(`<div class="us-input">
                                    <label>Date from</label><input name="us-date-from">
                                    <label>Date to</label><input name="us-date-to">
                                </div>`);
    }
});

On the backend however, I have python flask and I am trying to pass flask-wtf form within the modified html. Plain html and python code on the backend would look like this:

<div class="eu-input">
    <label>Date from</label>
    {{ form.eu_dates() }}
    <label>Date to</label>
    {{ form.eu_dates() }}
</div>


@app.route('/', methods=["GET", "POST"])
def home():
    form = MyForm()
    return render_template('index.html', form=form)

I am struggling to pass the python object into the JavaScript code and then include within the new html content. Thanks for your help.

P/S: I wouldn't wish to use .show()/.hide() method to achieve my goals because the forms are required and despite that they are hidden they still exist in the html code. This is my main reason for replacing the entire html code inside the div.

Mosallamy · Accepted Answer · 2022-09-25 14:07:35Z

0

I'm not sure what are you trying to accomplish, my guess is that you want to change the date format based on user choice between:

DD.MM.YYYY
MM.DD.YYYY

And you have two form field, one for the US format and the other for the EU format.

If this the case you can render the two fields and wrap them in a div as follows:

    <div id="us-date-container">
        {{ form.us_dates() }}
    </div>

    <div id="eu-date-container">
        {{ form.eu_dates() }}
    </div>

and toggle their visibility using jQuery or JavaScript:

$('input[name="date-format"]').change(function () {
    if ($(this).val() == '0') { // show EU format
        $("#eu-date-container").show();
        $("#us-date-container").hide();
    }
    else if ($(this).val() == '1') { // show US format
        $("#eu-date-container")[0].hide();
        $("#us-date-container")[0].show();
    }
});

answered Sep 25, 2022 at 14:07

Mosallamy

766 bronze badges

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

2 Comments

rumnen Over a year ago

Thanks for the suggestion. The problem is that the form fields are required and despite that they are hidden they still exist. They must not be part of the html code at all. That's why I'd prefer to replace the entire html inside the '.date-range' div if possible.

Mosallamy Over a year ago

If both are required you can change the validation in the controller based on which date type is selected using form.field.validators = []

Collectives™ on Stack Overflow

Pass python flask object into jQuery or JavaScript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related