Serializing array gives me empty array, how to fix it?

Question

I have a form that was auto generated by my backend. I try to serialize array withouth success. How can I find the error ?

I have tried to select my form with jquery and the form is found. All the inputs have name.

Here is the 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>

And the jquery :

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

I should be getting an array with all key values but I am getting empty array from this.

Your selector comes from the the div element with the id modals-validation-tacite, correct? Your jQuery should the likewise be informed that it is targeting an id in the selector. I.e. var formData = $('#modals-validation-tacite').serializeArray();. Also note that serializeArray() converts your input data to JSON format. — Martin
– Martin, Commented Feb 6, 2019 at 14:29
@Martin Thank you for your answer. The form is inside the targeted div so I specified that it should be looking for a form tag in the div. I try with your selector and it gives me the same result. — Léo Coletta
– Léo Coletta, Commented Feb 6, 2019 at 14:32
Try to either replace the form element with a div with an appropriate id to select from, or give the form element itself and id and serialize it through that specific id. — Martin
– Martin, Commented Feb 6, 2019 at 14:45

Forty3 · Accepted Answer · 2019-02-06 14:38:48Z

1

Every one of your FORM elements of type INPUT are disabled. The serializeArray() skips those:

jQuery.fn.extend( {
    serialize: function() {
        return jQuery.param( this.serializeArray() );
    },
    serializeArray: function() {
        return this.map( function() {

            // Can add propHook for "elements" to filter or add form elements
            var elements = jQuery.prop( this, "elements" );
            return elements ? jQuery.makeArray( elements ) : this;
        } )
        .filter( function() {
            var type = this.type;

            /* RELEVANT CODE */
            // Use .is( ":disabled" ) so that fieldset[disabled] works
            return this.name && !jQuery( this ).is( ":disabled" ) &&
                rsubmittable.test( this.nodeName ) && !rsubmitterTypes.test( type ) &&
                ( this.checked || !rcheckableType.test( type ) );
        } )
        .map( function( i, elem ) {
            var val = jQuery( this ).val();

            if ( val == null ) {
                return null;
            }

            if ( Array.isArray( val ) ) {
                return jQuery.map( val, function( val ) {
                    return { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
                } );
            }

            return { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
        } ).get();
    }
} );

answered Feb 6, 2019 at 14:38

Forty3

2,2291 gold badge16 silver badges20 bronze badges

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

4 Comments

Martin Over a year ago

Wouldn't we need some more information to truely know if the form elements are disabled? The disabled attribute looks empty to me in OP's question. Wouldn't the attribute need to be disabled="disabled" in order to be disabled?

Léo Coletta Over a year ago

The elements are disabled yes ! So serializeArray is not working is that right ? @Martin

Martin Over a year ago

Yes, if the inputs are disabled, then they are skipped. It'll only serialize non-disabled inputs. :) @LéoColetta

Forty3 Over a year ago

@Martin - I would agree that the attribute ought to have a non-blank value to give us the belief that the element is disabled. However, the spec indicates otherwise: w3.org/TR/html4/intro/sgmltut.html#h-3.3.4.2

Forty3 · Accepted Answer · 2019-02-06 14:39:59Z

0

Edit - while the selector may have been incorrect as well, the real problem is the disabled form elements.

Your selector is, I believe, incorrect:

Try:

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

Note the # to tell jQuery you are looking for an element with the ID of modals-validation-tacite. Also, instead of having jQuery look for the full FORM element, have it pick up the INPUT elements.

edited Feb 6, 2019 at 14:39

answered Feb 6, 2019 at 14:22

Forty3

2,2291 gold badge16 silver badges20 bronze badges

3 Comments

Léo Coletta Over a year ago

Thank you for you answer. I tried it a minutes ago and I am still getting an empty array. Maybe my HTML is too different from a classic form. By the way $('#modals-validation-tacite input').length gives me 8 so my elements are well selected.

slon Over a year ago

Make it easy, give id or class name to your form and get that for by id or class name to serialize it.

Léo Coletta Over a year ago

I gave an id to the form and tried $('#formid').serializeArray() and it is still not working.

Martin · Accepted Answer · 2019-02-06 14:47:24Z

0

Firstly, if you're using jQuery and you wish to serialize some data, you don't need the form element. You're already telling the JavaScript that you have secluded element containing your desired inputs. By using .serializeArray(); or .serialize();, JavaScript will automatically act as you know it from a form element and store your data into an array.

Note that .serializeArray() also returns your form data in a JSON format, whereas .serialize() will return the data in a regular url-encoded format.

One error that really sticks out is your selector, which seems to have a typo. When you're targeting a specific element through jQuery, you need to tell it exactly what you're targeting.

Examples:

# this indicates an ID selector, . this indicates a class selector.

Since your form seems to be a div element with an id, you need to use the id selector.

example:

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

So your variable should be like this:

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

Also note, that if your inputs appear to be disabled, then the serialize function will skip those inputs.

Hope this helps.

edited Feb 6, 2019 at 14:47

answered Feb 6, 2019 at 14:40

Martin

2,4221 gold badge14 silver badges23 bronze badges

1 Comment

Léo Coletta Over a year ago

Thank you for explanation ! However as I said to lson giving an id didn't help.

Collectives™ on Stack Overflow

Serializing array gives me empty array, how to fix it?

3 Answers 3

4 Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related