html - 表单输入类型提交干扰其他提交
问题描述
我对 html 很陌生，因为我通常只在后端项目上工作，我只是遇到了一个问题，我试图在我的程序中添加一个注释框，如图所示，但问题是当我按下提交查询按钮时像这样调用我的函数：
{% 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>
该操作似乎被忽略了，它实际上执行了左下角的“验证器”按钮，因此表单操作被忽略并跳到下一页，他们有谁知道解决方案吗？我将不胜感激。这是图片：
解决方案
通常不可能使用嵌套表单，但这是您可以尝试的技巧，
来自HTML 表单属性：
- form属性是 HTML5 中的新属性。
- 指定元素属于哪个
<form>元素。<input>此属性的值必须是<form>同一文档中元素的 id 属性。
<form id="main-form" action="/main-action" method="post"></form>
<form id="sub-form" action="/sub-action" method="post"></form>
<div class="main-component">
<input type="text" name="main-property1" form="main-form" />
<input type="text" name="main-property2" form="main-form" />
<div class="sub-component">
<input type="text" name="sub-property1" form="sub-form" />
<input type="text" name="sub-property2" form="sub-form" />
<input type="submit" name="sub-save" value="Save" form="sub-form" />
</div>
<input type="submit" name="main-save" value="Save" form="main-form" />
</div>
有关更多信息，您可以访问此处并了解为什么您不能在此处嵌套 HTML 表单。
并从这里另外检查form属性浏览器兼容性