I am very new to html as i normaly only work on backend projects and I just ran into a problem, I am trying to add a comment box to my program as shown in the picture but the problem is that when I press the Submit Query button to call my function like so:
{% macro display_msr() %}
{{display_errors(form)}}
{% if msr.refus.motif %}
<div class="row">
<div class="col-md-12 col-lg-12">
<div class="panel panel-danger">
<div class="panel-heading">
<div class="row">
<div class="col-md-8 col-lg-8">
Motif de refus par <b>{{msr.refus.user.nom}}</b>
</div>
<div class="col-md-4 col-lg-4 text-right">
<b>{{msr.refus.date_str}}</b>
</div>
</div>
</div>
<div class="panel-body">{{msr.refus.motif}}</div>
</div>
</div>
</div>
{% endif %}
<div class="row">
<div class="col-md-3">
<div class="container-fluid sidebox">
<div class="row">
<div class="col-md-12">
{{display_field(form.id)}}
</div>
<div class="col-md-12">
{{display_field(form.user)}}
</div>
<div class="col-md-12">
{{display_field(form.site_impression)}}
</div>
<div class="col-md-12">
<div class="form-group">
{% if form.mere in can_edit %}
{{form.mere.label(class="control-label")}}
<div class="form-check">
<label class="form-check-label">
{{form.mere()}}
MSR Mère
</label>
</div>
{% else %}
{{form.mere.label(class="control-label")}}
<input disabled class="form-control" value="{{msr.genre or MSR_Genre.E}}">
{% endif %}
</div>
</div>
<div class="col-md-12">
{{display_field(form.nature)}}
</div>
<div class="col-md-12">
{{display_field(form.etat_tranche)}}
</div>
{% if msr.id %}
<div class="col-md-12">
<div class="form-group">
<label>Impressions</label>
<div class="btn-list">
{% if msr.can_print_amsr %}
{% set cls = "btn-primary" %}
{% else %}
{% set cls = "btn-default disabled" %}
{% endif %}
<a href="{{url_for("msr_print_amsr", item_id=msr.id)}}"
title="Attestation de mise sous régime" class="btn {{cls}}">
<i class="fa fa-print"></i> AMSR
</a>
{% if msr.can_print_fm %}
{% set cls = "btn-primary" %}
{% else %}
{% set cls = "btn-default disabled" %}
{% endif %}
<a href="{{url_for("msr_print_fm", item_id=msr.id)}}" title="Fiche de manoeuvres"
class="btn {{cls}}">
<i class="fa fa-print"></i> FM
</a>
{% if msr.can_print_pancarte_verte and msr.can_print_pancarte_rouge %}
{% set cls = "btn-primary" %}
{% else %}
{% set cls = "btn-default disabled" %}
{% endif %}
<a href="{{url_for("msr_print_pancartes", item_id=msr.id)}}"
title="Impression des pancartes" class="btn {{cls}}">
<i class="fa fa-print"></i> Pancartes
</a>
<a href="{{url_for("msr_print_amsr_pdf", item_id=msr.id)}}"
title="Attestation de mise sous régime en PDF" class="btn {{cls}}">
<i class="fa fa-print"></i> AMSR PDF
</a>
<a href="{{url_for("msr_print_fm_pdf", item_id=msr.id)}}"
title="fiche de manoeuvres en PDF" class="btn {{cls}}">
<i class="fa fa-print"></i> FM PDF
</a>
<a href="{{url_for("msr_print_pancartes_pdf", item_id=msr.id)}}"
title="Impression des pancartes en PDF" class="btn {{cls}}">
<i class="fa fa-print"></i> Pancartes PDF
</a>
</div>
</div>
</div>
{% endif %}
</div>
</div>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-8">
<div
class="form-group {{"has-error" if form.equipement_id.errors}} {{"required" if form.equipement_id.flags.required}}">
{{form.equipement.label(class="control-label")}}
{{form.equipement_id(autocomplete="off")}}
<div class="input-group">
<input id="equipement" class="form-control" type="text" autocomplete="off" autocapitalize="off"
name="equipement" readonly="readonly" value="{{form.equipement.data or ""}}" />
<span class="input-group-btn">
{% if ajax %}
<button type="button" id="btn-view-equipement" class="btn btn-default"
onclick="window.location.href='/msr/{{ msr.id }}'">
<i class="fa fa-eye"></i>
</button>
{% else %}
<button type="button" id="btn-view-equipement" class="btn btn-default">
<i class="fa fa-eye"></i>
</button>
{% endif %}
{% if form.equipement_id in can_edit %}
<button type="button" id="btn-choose-equipement" class="btn btn-default">
<i class="fa fa-search"></i>
</button>
{% endif %}
</span>
</div>
</div>
</div>
{% if msr.nature != MSR_Nature.ASR %}
<div class="col-md-4">
<div class="form-group">
<label class="control-label label-manoeuvres">Manoeuvres ({{msr.manoeuvres | length}})</label>
<div class="btn-list">
{% if form.manoeuvres in can_edit %}
{{form.manoeuvres(autocomplete="off")}}
<a id="btn-choose-manoeuvres" class="btn btn-default">
<i class="fa fa-fw fa-search"></i>
</a>
<a id="btn-edit-manoeuvres" class="btn btn-default {{"disabled" if not msr.manoeuvres}}"
href="#">
<i class="fa fa-fw fa-pencil"></i>
</a>
<a id="btn-add-gamme" class="btn btn-default pull-right" href="#">
Ajouter une gamme
<i class="fa fa-fw fa-th-list"></i>
</a>
{% else %}
{% if ajax and msr.manoeuvres %}
<a id="btn-view-manoeuvres" class="btn btn-default" href="/msr/{{ msr.id }}">
<i class="fa fa-fw fa-eye"></i>
</a>
{% else %}
<a id="btn-view-manoeuvres" class="btn btn-default {{"disabled" if not msr.manoeuvres}}"
href="#">
<i class="fa fa-fw fa-eye"></i>
</a>
{% endif %}
{% endif %}
</div>
</div>
</div>
{% endif %}
</div>
<hr />
<div class="row">
<div class="col-md-4">
{{display_field(form.start_date, **{'data-toggle':'datepicker'})}}
</div>
<div class="col-md-4">
{{display_field(form.end_date, **{'data-toggle':'datepicker'})}}
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label">Durée</label>
<input id="duration" type="text" readonly class="form-control" value="{{msr.duration}}">
</div>
</div>
</div>
<hr />
<div class="row">
<div class="col-md-12">
{{display_field(form.designation)}}
</div>
</div>
<div class="row">
<div class="col-md-12">
{{display_field(form.point_cle)}}
</div>
</div>
<div class="row">
<div class="col-md-12">
<form method="post" action="/validate_comment">
<label>Commentaire</label>
<input id="text" name="text" type="text">
<!-- <input id="text" name="text" type="text" /> -->
<input type="submit">
</form>
<!-- {{display_field(form.commentaire)}} -->
</div>
</div>
<hr />
<div class="row">
<div class="col-md-4">
{{display_field(form.entreprise)}}
</div>
<div class="col-md-4">
{{display_field(form.charge_travaux)}}
</div>
<div class="col-md-4">
{{display_field(form.assistant_charge_travaux)}}
</div>
<div class="col-md-4">
{{display_field(form.section)}}
</div>
<div class="col-md-4">
{{display_field(form.coordinateur_exploitation)}}
</div>
<div class="col-md-4">
{{display_field(form.coordinateur_intervention)}}
</div>
</div>
</div>
</div>
<div class="row">
{% if msr.genre != MSR_Genre.M %}
<div class="col-md-12 col-lg-12">
<label class="control-label" for="mere">MSR mère{{"s" if msr.meres | length > 1}}
</label>
<table class="table table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Nature</th>
<th>Position</th>
<th>Équipement</th>
<th></th>
</tr>
</thead>
<tbody>
{% for mere in msr.meres %}
<tr>
<td>{{mere.id}}</td>
<td>{{mere.nature}}</td>
<td>{{mere.pos}}</td>
<td>{{mere.equipement}}</td>
<td class="text-right">
{% if not ajax %}
<a href="{{url_for("msr_edit", item_id=mere.id)}}" target="_blank">
<button type="button" class="btn btn-default">
<span class="fa fa-fw fa-eye"></span>
</button>
</a>
<button type="button" class="btn btn-danger" data-toggle="popover"
data-content="<button onclick='delete_link({{mere.id}}, {{msr.id}})' type='button' class='btn btn-danger'>Supprimer</button>"
data-placement="bottom"
{{"disabled" if (not g.user.has_privileges(_privileges.SAISIE_MERE))}}>
<i class="fa fa-fw fa-trash"></i>
</button>
{% endif %}
</td>
</tr>
{% endfor %}
{% if msr.pos == MSR_Position.AP %}
<tr>
<td colspan=5 class="text-center">
<button id="btn-choose-mere" type="button" class="btn btn-success"
{{"disabled" if (not g.user.has_privileges(_privileges.SAISIE_MERE))}}>
Rattacher à une MSR mère
</button>
</td>
</tr>
{% endif %}
</tbody>
</table>
</div>
{% elif msr.genre == MSR_Genre.M %}
{% if msr.filles%}
<div class="col-md-12 col-lg-12">
<label class="control-label">
MSR fille{{"s" if msr.filles | length > 1}}
</label>
<table class="table table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Nature</th>
<th>Position</th>
<th>Équipement</th>
<th></th>
</tr>
</thead>
<tbody>
{% for fille in msr.filles %}
<tr>
<td>{{fille.id}}</td>
<td>{{fille.nature}}</td>
<td>{{fille.pos}}</td>
<td>{{fille.equipement}}</td>
<td class="text-right">
{% if not ajax %}
<a href="{{url_for("msr_edit", item_id=fille.id)}}" target="_blank">
<button type="button" class="btn btn-default">
<span class="fa fa-fw fa-eye"></span>
</button>
</a>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<div class="col-md-12 col-lg-12">
<label class="control-label">
Aucune MSR fille
</label>
</div>
{% endif %}
{% endif %}
</div>
<hr>
{% endmacro %}
{% block body %}
{% if ajax %}
{{display_msr()}}
{% else %}
<div class="page-body">
<form class="form" method="post">
{{form.csrf_token}}
{{form.goto}}
<div class="container-fluid">
<div class="panel panel-default">
<div class="panel-heading">
{% if msr.history %}
<h4 class="pull-right">
<a href="{{url_for("msr_history", item_id=msr.id)}}">
<span class="fa fa-fw fa-history"></span>
</a>
</h4>
{% endif %}
<h4 class="text-center">
{{form.pos.data if form.pos.data else "Demande de MSR"}}
</h4>
</div>
<div class="panel-body">
{{display_msr()}}
<br />
<p class="pull-right"><span class="asterisk">Champ obligatoire.</span></p>
</div>
{% if msr_new %}
<div class="panel-footer">
<div class="form-group">
<a class="btn btn-danger" href="javascript:window.history.back()">Annuler</button></a>
<button class="btn btn-success" type="submit">Valider</button>
</div>
</div>
{% elif form._valid_pos%}
<div class="panel-footer">
<div class="form-group">
<div class="row">
<div class="col-md-2">
{% if g.user.can_set_pos(msr.pos) %}
<button class="btn btn-success" type="submit">
<i class="fa fa-fw fa-save"></i>
Sauvegarder
</button>
{% endif %}
</div>
<div class="col-md-10 text-right btn-row">
{% for pos in form._valid_pos %}
{% if g.user.can_set_pos(pos) %}
<button id="btn-{{pos.name}}" class="btn btn-{{pos.value.color}}">{{pos.name}} -
{{pos.value.action}}</button>
{% endif %}
{% endfor %}
</div>
</div>
</div>
<script>
{% for pos in form._valid_pos %}
$("#btn-{{pos.name}}").on("click", function (ev) {
{% if pos.value.popup %}
ev.preventDefault()
$("#popup-refus").modal("show").on('shown.bs.modal', function () {
$('#motif_refus').focus();
})
{% endif %}
{% if pos.value.confirm %}
ev.preventDefault()
$("#popup-confirm").modal("show");
{% endif %}
$("#goto").val({{ pos.name | tojson }})
});
{% endfor %}
</script>
</div>
{% endif%}
</div>
</div>
<div class="page-popup modal fade" id="popup-refus" role="dialog">
<div class="modal-dialog" role="document">
<div class="panel panel-default">
<div class="panel-heading">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
<p class="panel-title">Commentaire</p>
</div>
<div class="panel-body data">
{{display_field(form.motif_refus, autofocus="autofocus")}}
</div>
<div class="panel-footer">
<div class="btn-group">
<button id="motif_valid" class="btn btn-success">Valider</button>
</div>
<div class="btn-group">
<a class="btn btn-danger" href="#popup-refus" data-dismiss="modal">Annuler</a>
</div>
</div>
</div>
</div>
</div>
<div class="page-popup modal fade" id="popup-confirm" role="dialog">
<div class="modal-dialog" role="document">
<div class="panel panel-default">
<div class="panel-heading">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
<p class="panel-title">Êtes-vous sûr de vouloir continuer?</p>
</div>
{% if msr.getLastHistory(MSR_Position.EX)%}
<div class="panel-body data">
<p>ID de la MSR : {{ msr.id }}</p>
<p>Initiateur :
{{ msr.getLastHistory(MSR_Position.EX).user.nom }}
({{ msr.getLastHistory(MSR_Position.EX).user.email }})</p>
<p>Nom du chargé de travaux : {{ msr.charge_travaux }}</p>
<p>Nom du chargé de consignation : {{ msr.coordinateur_exploitation }}</p>
<p>Désignation de l'intervention : {{ msr.designation }}</p>
</div>
{% endif %}
<div class="panel-footer">
<div class="btn-group">
<button id="confirm_validate" class="btn btn-success">Oui</button>
</div>
<div class="btn-group">
<a class="btn btn-danger" href="#popup-confirm" data-dismiss="modal">Non</a>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
The action seems to be ignored and it actualy executes the "valider" button in the bottom left corner so the form action is just ignored and it skips to the next page, is their anyone who knows of a solution? I would greatly appreciate it. Here's the picture:
