Javascript inactive after first submit

[bodgerbarnett]

Any extra javascript I have in the modal seems to become inactive after the user submits the form for the first time.

For instance, if I add a datepicker to one of the fields, but the user simply deletes the contents of the field (to make it invalid) and clicks submit, the form displays an error but the field no longer has a datepicker on it.

[trco]

@bodgerbarnett You must achieve that your extra javascript is always loaded with the form. You could for example put it inside of the form tag. There is no reason this wouldn't work. It's not related directly to the package but to the loading of the javascript.

[bodgerbarnett]

The javascript is inside the form tag already:-

<form method="post" action="/kickoff/">
    <div class="modal-content">
        Edit Kick Off
        <input type="hidden" name="csrfmiddlewaretoken" value="0FSpzgygfldHLhL0QUGqiWpf8d7wi0E8Kn9juoMwVKiItUlIIaUXJW4QDljdOhhN">
        <div id="div_id_date" class="form-group">
            <label for="id_date" class="control-label requiredField">
                Date
                <span class="asteriskField">*</span>
            </label>
            <div class="controls">
                <input type="text" name="date" value="31/05/2019" class="dateinput form-control" required="" id="id_date">
            </div>
        </div>
        <div id="div_id_kickoff_time" class="form-group has-error">
            <label for="id_kickoff_time" class="control-label requiredField">
                Kickoff time
                <span class="asteriskField">*</span>
            </label>
            <div class="controls">
                <input type="text" name="kickoff_time" value="" class="timeinput form-control form-control-danger" required="" id="id_kickoff_time">
                <div id="error_1_id_kickoff_time" class="help-block text-right animated fadeInDown">
                    This field is required.
                </div>
            </div>
        </div>

        <script type="text/javascript">
            $("input.dateinput").datepicker({
                format: 'dd/mm/yyyy',
                autoclose: true
            });

            $('.timeinput').clockpicker({
                donetext: 'Done'
            });
        </script>
    </div>
    <div class="modal-footer">
            <button type="button" class="btn btn-sm btn-primary" data-dismiss="modal">Cancel</button>
            <button type="button" class="submit-btn btn btn-sm btn-success">Submit</button>

    </div>
</form>

[trco]

@bodgerbarnett Your form tag is around modal-content div. That's not how this package is used. Please refer to the docs https://github.com/trco/django-bootstrap-modal-forms#5-bootstrap-modal-and-trigger-element.

[bodgerbarnett]

Ahah! Doh! I didn't notice that I'd used modal-content inside my modal template as well as in the main template. Thanks for the quick reply!