jquery - jquery を使用してフォームをシリアライズしても、すべてのフィールドがシリアライズされない

Question

jquery を使用してフォームをシリアル化しようとしていますが、期待どおりに動作しません。他の多くのフィールドのうち 1 つのみがシリアル化されます。

私の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>

私のスクリプト:

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

jsfiddleのコードを参照してください

私はやってみました：

$('#theForm').serializeArray()

私が間違っていることは何ですか？

Answer 1

を削除してみてください

disabled="disabled"

シリーズ化前。

Answer 2

jquery API ドキュメントからhttp://api.jquery.com/serializeArray/ :

.serializeArray() メソッドは、制御を成功させるための標準 W3C ルールを使用して、含める要素を決定します。特に、要素を無効にすることはできません

タグdisabled="disabled"から属性をinput削除してみてください。select

Answer 3

これはhttp://api.jquery.com/serialize/からの抜粋です。

注: 「成功したコントロール」のみが文字列にシリアル化されます。フォームはボタンを使用して送信されていないため、送信ボタンの値はシリアル化されません。シリアル化された文字列にフォーム要素の値を含めるには、要素に name 属性が必要です。チェックボックスとラジオボタン (「ラジオ」または「チェックボックス」タイプの入力) からの値は、それらがチェックされている場合にのみ含まれます。ファイル選択要素からのデータはシリアル化されません。

多分それは役立つかもしれません。

Answer 4

1 つを除くすべてのフォーム要素が無効にdisabled="disabled"なっている (属性) ため、シリアル化されません。

Answer 5

これを試して

$('#theForm').stringify()