0

I'm trying to serialize my form using jquery and it does not work as expected. Only one field out of many others is serialized.

My HTML:

<form action="/Devis/auto" id="theForm" method="post" novalidate="novalidate"
class="ui-formwizard ui-helper-reset ui-widget ui-widget-content ui-corner-all">
    <div id="fieldWrapper">
        <fieldset id="first" class="step ui-formwizard-content" style="display: none; margin-left: -1148px; width: 1148px;">
            <legend>Information conducteur</legend>
            <div class="editor-label">
                <label for="DriverInfoViewModel_DriverInfo_NoClaimsDegree">Degré B/M</label>
            </div>
            <div class="editor-field">
                <select data-val="true" data-val-range="[fr-FR: Range]" data-val-range-max="22"
                data-val-range-min="-3" data-val-required="Le champ Degré B/M est obligatoire."
                id="DriverInfoViewModel_DriverInfo_NoClaimsDegree" name="DriverInfoViewModel.DriverInfo.NoClaimsDegree"
                class="ui-wizard-content valid" disabled="disabled">
                    <option value="-3">-3</option>
                    <option value="-2">-2</option>
                    <option value="-1">-1</option>
                    <option value="0">0</option>
                    <option selected="selected" value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                    <option value="13">13</option>
                    <option value="14">14</option>
                    <option value="15">15</option>
                    <option value="16">16</option>
                    <option value="17">17</option>
                    <option value="18">18</option>
                </select> <span class="text-error field-validation-valid" data-valmsg-for="DriverInfoViewModel.DriverInfo.NoClaimsDegree"
                data-valmsg-replace="true"></span>

            </div>
            <div>
                <label for="DriverInfoViewModel_DriverInfo_DrivingLicenceDate">Date de permis de conduire</label>
            </div>
            <div>
                <input class="datefield ui-wizard-content valid" data-val="true" data-val-required="Le champ Date de permis de conduire est obligatoire."
                id="DriverInfoViewModel_DriverInfo_DrivingLicenceDate" name="DriverInfoViewModel.DriverInfo.DrivingLicenceDate"
                type="date" value="10/02/2013"> <span class="text-error inline field-validation-valid" data-valmsg-for="DriverInfoViewModel.DriverInfo.DrivingLicenceDate"
                data-valmsg-replace="true"></span>

            </div>
            <div class="editor-label">
                <label for="DriverInfoViewModel_DriverInfo_DisasterHistory">Nombre de sinistres</label>
            </div>
            <div class="editor-field">
                <select data-val="true" data-val-required="Le champ Nombre de sinistres est obligatoire."
                id="DriverInfoViewModel_DriverInfo_DisasterHistory" name="DriverInfoViewModel.DriverInfo.DisasterHistory"
                class="ui-wizard-content valid" disabled="disabled">
                    <option selected="selected" value="NoDisaster">Pas de sinistre</option>
                    <option value="NoDisasterAndLessThan3YearsDMInsured">Pas de sinistre et garantie DM de moins de 3 ans</option>
                    <option value="OneDisaster">1 sinistre</option>
                    <option value="TwoDisasters">2 sinistres</option>
                    <option value="MoreThanTwoDisasters">3 sinistres</option>
                </select> <span class="text-error field-validation-valid" data-valmsg-for="DriverInfoViewModel.DriverInfo.DisasterHistory"
                data-valmsg-replace="true"></span>

            </div>
        </fieldset>
        <fieldset id="vehicleinfo" class="step ui-formwizard-content" style="display: none; width: 1148px; margin-left: -1148px;">
            <legend>Information véhicule</legend>
            <div class="editor-label">
                <label for="CarInfoViewModel_CarInfo_CarValue">Valeur du véhicule</label>
            </div>
            <div class="editor-field">
                <input data-val="true" data-val-required="Le champ Valeur du véhicule est obligatoire."
                id="CarInfoViewModel_CarInfo_CarValue" name="CarInfoViewModel.CarInfo.CarValue"
                type="text" value="15000" class="ui-wizard-content valid" disabled="disabled"> <span class="text-error field-validation-valid" data-valmsg-for="CarInfoViewModel.CarInfo.CarValue"
                data-valmsg-replace="true"></span>

            </div>
            <div class="editor-label">
                <label for="CarInfoViewModel_CarInfo_AudioValue">Valeur de l'équipement audio</label>
            </div>
            <div class="editor-field">
                <input data-val="true" data-val-required="Le champ Valeur de l'équipement audio est obligatoire."
                id="CarInfoViewModel_CarInfo_AudioValue" name="CarInfoViewModel.CarInfo.AudioValue"
                type="text" value="1000" class="ui-wizard-content valid" disabled="disabled"> <span class="text-error field-validation-valid" data-valmsg-for="CarInfoViewModel.CarInfo.AudioValue"
                data-valmsg-replace="true"></span>

            </div>
            <div class="editor-label">
                <label for="CarInfoViewModel_CarInfo_EngineCapacity">Cylindrée</label>
            </div>
            <div class="editor-field">
                <input data-val="true" data-val-required="Le champ Cylindrée est obligatoire."
                id="CarInfoViewModel_CarInfo_EngineCapacity" name="CarInfoViewModel.CarInfo.EngineCapacity"
                type="text" value="1500" class="ui-wizard-content valid" disabled="disabled"> <span class="text-error field-validation-valid" data-valmsg-for="CarInfoViewModel.CarInfo.EngineCapacity"
                data-valmsg-replace="true"></span>

            </div>
            <div class="editor-label">
                <label for="CarInfoViewModel_CarInfo_AdditionalSeats">Nombre de places additionnelles</label>
            </div>
            <div class="editor-field">
                <input data-val="true" data-val-required="Le champ Nombre de places additionnelles est obligatoire."
                id="CarInfoViewModel_CarInfo_AdditionalSeats" name="CarInfoViewModel.CarInfo.AdditionalSeats"
                type="text" value="1" class="ui-wizard-content valid" disabled="disabled"> <span class="text-error field-validation-valid" data-valmsg-for="CarInfoViewModel.CarInfo.AdditionalSeats"
                data-valmsg-replace="true"></span>

            </div>
            <div class="editor-label">
                <label for="CarInfoViewModel_CarInfo_FirstRegistration">Date de mise en circulation</label>
            </div>
            <div class="editor-field">
                <input class="datefield ui-wizard-content valid" data-val="true" data-val-required="Le champ Date de mise en circulation est obligatoire."
                id="CarInfoViewModel_CarInfo_FirstRegistration" name="CarInfoViewModel.CarInfo.FirstRegistration"
                type="date" value="01/01/2013" disabled="disabled"> <span class="text-error field-validation-valid" data-valmsg-for="CarInfoViewModel.CarInfo.FirstRegistration"
                data-valmsg-replace="true"></span>

            </div>
        </fieldset>
        <fieldset id="comparatif" class="step ui-formwizard-content" style="display: block; width: 1148px; margin-left: 0px;">
            <div id="result"></div>
        </fieldset>
        <fieldset id="customize" class="step ui-formwizard-content" style="display: none; width: 1148px; margin-left: -1148px;">
            <legend>Customize</legend>
            <div id="custom"><span>137,21</span>

            </div>
        </fieldset>
    </div>
</form> <pre></pre>

My Script:

$('pre').text(JSON.stringify($('#theForm').serialize(), null, '  '));

See the code on jsfiddle

I've tried doing:

$('#theForm').serializeArray()

Any idea what I'm doing wrong ?

3
  • Have you tried using just $('#theForm').serialize()
    – Nope
    Mar 8, 2013 at 12:21
  • yes, i've tried and it gives the same result
    – Sam
    Mar 8, 2013 at 12:23
  • I added your code from the fiddle to your question to make sure this question makes sense even when the fiddle is dead.
    – Nope
    Mar 8, 2013 at 12:27

5 Answers 5

5

Try to remove the

disabled="disabled"

before serializing.

0
3

This is an extract from http://api.jquery.com/serialize/:

Note: Only "successful controls" are serialized to the string. No submit button value is serialized since the form was not submitted using a button. For a form element's value to be included in the serialized string, the element must have a name attribute. Values from checkboxes and radio buttons (inputs of type "radio" or "checkbox") are included only if they are checked. Data from file select elements is not serialized.

Maybe it could help.

1
  • as you can see on jsfiddle, I have various input controls, and only one is serialized. They are all valid with a specified value.
    – Sam
    Mar 8, 2013 at 12:30
3

From the jquery API docs, http://api.jquery.com/serializeArray/:

The .serializeArray() method uses the standard W3C rules for successful controls to determine which elements it should include; in particular the element cannot be disabled

Try removing the disabled="disabled" attributes from your input and select tags.

2

All your form elements except the one are disabled (attribute disabled="disabled") which causes them not to get serialized.

0

try this

$('#theForm').stringify()
1
  • that returns nothing. (I'm not sure this useful for serializing actually)
    – Sam
    Mar 8, 2013 at 12:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.