Question

我有一个由后端自动生成的表格。我尝试序列化数组没有成功。如何找到错误？

我尝试用jquery选择表单，然后找到表单。所有输入都有名称。

这是HTML

<div class="modal fade show" tabindex="0" role="dialog" id="modals-validation-tacite" data-idsource="validation-tacite" aria-modal="true" data-vivaldi-spatnav-clickable="1" style="display: block; padding-right: 17px;">
   <div class="modal-dialog" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title">Validation de la Tacite</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
            </button>
         </div>
         <div class="modal-body">
            <form action="#" method="POST" role="form">
               <div class="container-fluid">
                  <input type="hidden" name="csrf" id="csrf" value="3573ee07287bcb2c29e124f673587e3712e67880dcf2fe76ec0b775132960b50-075d2c347340cd4fc527be7cdc2b5ee89224e749d3f995171d7bb112cdb57ab8" disabled="">
                  <div class="form-group row">
                     <div class="  col-12 col-md-6  text-sm-left text-md-right ">
                        <label for="nb-tacite" id="nb-tacite-label" class="form-control-label">Nombre de tacites&nbsp;<abbr class="required" title="champ obligatoire">*</abbr>&nbsp;:</label>
                     </div>
                     <div class=" mb-2 mb-md-0  col-12 col-md-6 ">
                        <input type="number" name="nb-tacite" aria-label="Nombre de tacites" id="nb-tacite" class="form-control" value="" disabled="">
                     </div>
                  </div>
                  <div class="form-group row">
                     <div class="  col-12 col-md-6  text-sm-left text-md-right ">
                        <label for="duree-tacite" id="duree-tacite-label" class="form-control-label">Durée de la tacite (en années)&nbsp;<abbr class="required" title="champ obligatoire">*</abbr>&nbsp;:</label>
                     </div>
                     <div class=" mb-2 mb-md-0  col-12 col-md-6 ">
                        <input type="number" name="duree-tacite" aria-label="Durée de la tacite (en années)" id="duree-tacite" class="form-control" value="" disabled="">
                     </div>
                  </div>
                  <div class="form-group row">
                     <div class="  col-12 col-md-6  text-sm-left text-md-right ">
                        <label for="duree-preavis-tacite" id="duree-preavis-tacite-label" class="form-control-label">Durée de préavis (en mois)&nbsp;<abbr class="required" title="champ obligatoire">*</abbr>&nbsp;:</label>
                     </div>
                     <div class=" mb-2 mb-md-0  col-12 col-md-6 ">
                        <input type="number" name="duree-preavis-tacite" aria-label="Durée de préavis (en mois)" id="duree-preavis-tacite" class="form-control" value="" disabled="">
                     </div>
                  </div>
                  <div class="form-group row">
                     <div class="  col-12 col-md-6  text-sm-left text-md-right ">
                        <label for="date-fin-tacite" id="date-fin-tacite-label" class="form-control-label">Date de fin de tacite&nbsp;<abbr class="required" title="champ obligatoire">*</abbr>&nbsp;:</label>
                     </div>
                     <div class=" mb-2 mb-md-0  col-12 col-md-6 ">
                        <input type="date" name="date-fin-tacite" aria-label="Date de fin de tacite" id="date-fin-tacite" class="form-control" value="" disabled="">
                     </div>
                  </div>
                  <div class="form-group row">
                     <div class="  col-12 col-md-6  text-sm-left text-md-right ">
                        <label for="date-maj-tacite" id="date-maj-tacite-label" class="form-control-label">Date de mise à jour dans GID&nbsp;<abbr class="required" title="champ obligatoire">*</abbr>&nbsp;:</label>
                     </div>
                     <div class=" mb-2 mb-md-0  col-12 col-md-6 ">
                        <input type="date" name="date-maj-tacite" aria-label="Date de mise à jour dans GID" id="date-maj-tacite" class="form-control" value="" disabled="">
                     </div>
                  </div>
                  <div class="form-group row">
                     <div class="  col-12 col-md-6  text-sm-left text-md-right ">
                        <label for="commentaire" id="commentaire-label" class="form-control-label">Commentaire&nbsp;:</label>
                     </div>
                     <div class=" mb-2 mb-md-0  col-12 col-md-6 ">
                        <textarea name="commentaire" aria-label="Commentaire" id="commentaire" class="form-control" disabled=""></textarea>
                     </div>
                  </div>
                  <div class="form-group row">
                     <div class="  col-12 col-md-6  text-sm-left text-md-right ">
                        <label for="tacite_flag" id="tacite_flag-label" class="form-control-label">GID est à jour&nbsp;<abbr class="required" title="champ obligatoire">*</abbr>&nbsp;:</label>
                     </div>
                     <div class=" mb-2 mb-md-0  col-12 col-md-6 ">
                        <div class="form-check">
                           <div class="form-check-label">&nbsp;<input type="hidden" name="tacite_flag" value="0" disabled=""><input type="checkbox" name="tacite_flag" aria-label="GID est à jour" id="tacite_flag" aria-labelledby="tacite_flag-label" class="form-check-input" value="1" disabled=""></div>
                        </div>
                     </div>
                  </div>
               </div>
            </form>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal" data-idsource="validation-tacite">Fermer</button>
            <button type="button" class="btn btn-primary modal-send" data-idsource="validation-tacite" data-vivaldi-spatnav-clickable="1" disabled="">Sauvegarder</button>
         </div>
      </div>
   </div>
</div>

还有jquery：

var formData = $('modals-validation-tacite form').serializeArray()

我应该得到一个包含所有键值的数组，但是我从中得到的是空数组。

Answer 1

类型FORM的{{1}}元素中的每个元素都是INPUT。 serializeArray（）跳过那些：

disabled

Answer 2

编辑-尽管选择器也可能不正确，但真正的问题是disabled表单元素。

我相信您的选择器不正确：

尝试：

var formData = $('#modals-validation-tacite input').serializeArray();

注意#，告诉jQuery您正在寻找ID为modals-validation-tacite的元素。另外，与其让jQuery寻找完整的FORM元素，不如让它选择INPUT元素。

Answer 3

首先，如果您使用的是jQuery，并且希望序列化某些数据，则不需要form元素。您已经在告诉JavaScript您已隔离了包含所需输入的元素。通过使用.serializeArray();或.serialize();，JavaScript将从表单元素自动执行您所知的操作，并将数据存储到数组中。

请注意，.serializeArray()还以JSON格式返回表单数据，而.serialize()将以常规的url编码格式返回数据。

一个真正突出的错误是您的选择器，它似乎有错字。通过jQuery定位特定元素时，您需要准确告诉它所定位的对象。

示例：

#这表示一个ID选择器， .表示类选择器。

由于您的 form 似乎是具有 id 的div元素，因此您需要使用id选择器。

示例：

$('#modals-validation-tacite')。

所以您的变量应如下所示：

var formData = $('#modals-validation-tacite').serializeArray();

还请注意，如果您的输入似乎被禁用，则序列化功能将跳过这些输入。

希望这会有所帮助。

序列化数组给我空数组，如何解决？

3 个答案: