0

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.

Improve this question
3
  • 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. 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. 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. Commented Feb 6, 2019 at 14:45

3 Answers 3

Reset to default
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(); } } );
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

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?
The elements are disabled yes ! So serializeArray is not working is that right ? @Martin
Yes, if the inputs are disabled, then they are skipped. It'll only serialize non-disabled inputs. :) @LéoColetta
@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
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.

Improve this answer

3 Comments

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.
Make it easy, give id or class name to your form and get that for by id or class name to serialize it.
I gave an id to the form and tried $('#formid').serializeArray() and it is still not working.
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.

Improve this answer

1 Comment

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.