多頁表單提交

Question

我有一個問題，似乎無法通過我的方式。

首先，我有一個由專業人士建立的網站，我們不再與該公司建立工作關系。 我現在自己管理這個網站。 我有能力，但我絕不是一位經驗豐富的網絡開發人員。

背景：我們有一個應用程序，它使用呈現給最終用戶的多頁表單。 表單以7個步驟呈現，但它都是從一個php文件完成的，使用（我認為）jquery / javascript來循環執行這些步驟，並驗證一些字段。 在最后一步中，將提供摘要供用戶提交。 這很好用。

以下是我認為處理頁面循環的相關javascript：

<script>
$(function () {

    window.confirmLeave = true;

    $('.datefield').datepicker();

    var cache = {};                                                                                             // caching inputs for the visited steps

    $("#appForm").bind("step_shown", function(event,data){  

         if(data.isLastStep){                                                                                      // if this is the last step...then
                $("#summaryContainer").empty();                                                                     // empty the container holding the 
                $.each(data.activatedSteps, function(i, id){                                                        // for each of the activated steps...do
                    if(id === "summary") return;                                                                    // if it is the summary page then just return
                    cache[id] = $("#" + id).find(".input");                                                         // else, find the div:s with class="input" and cache them with a key equal to the current step id
                    cache[id].detach().appendTo('#summaryContainer').show().find(":input").removeAttr("disabled");  // detach the cached inputs and append them to the summary container, also show and enable them
                });
            }else if(data.previousStep === "summary"){                                                              // if we are movin back from the summary page
                $.each(cache, function(id, inputs){                                                                 // for each of the keys in the cache...do
                    var i = inputs.detach().appendTo("#" + id).find(":input");                                      // put the input divs back into their normal step
                    if(id === data.currentStep){                                                                    // (we are moving back from the summary page so...) if enable inputs on the current step
                         i.removeAttr("disabled");
                    }else{                                                                                          // disable the inputs on the rest of the steps
                        i.attr("disabled","disabled");
                    }
                });
                cache = {};                                                                                         // empty the cache again
            }
        });

</script>

我還包括以下表格的html：

<form name="appForm" id="appForm" action="submit-app-exec.php" method="post" 
enctype="multipart/form-data" autocomplete="off" onSubmit="showProgressBar()">

<fieldset class="step" id="page_1">
<div class="input">
<?php include("add-company/step1.html"); ?>
</div>
</fieldset>

<fieldset class="step" id="page_2">
<div class="input">
<?php include("add-company/step2.html"); ?>
</div>
</fieldset>

<fieldset class="step" id="page_3">
<div class="input">
<?php include("add-company/step3.html"); ?>
</div>
</fieldset>

<fieldset class="step" id="page_4">
<div class="input">
<?php include("add-company/step4.html"); ?>
</div>
</fieldset>    

<fieldset class="step" id="page_5">
<div class="input">
<?php include("add-company/step5.html"); ?>
</div>
</fieldset>

<fieldset class="step" id="page_6">
<div class="input">
<?php include("add-company/step6.html"); ?>
</div>
</fieldset>

<fieldset class="step" id="page_7">
<div class="input">
<?php include("add-company/step7.html"); ?>
</div>
</fieldset>

<fieldset class="step" id="summary" >
    <span class="font_normal_07em_black">Summary page</span><br />
    <p>Please verify your information below.</p>
    <div id="summaryContainer"></div>
</fieldset>

<div id="wizardNavigation">

    <button class="navigation_button" onclick="javascript:saveApp()">Save</button>
    <input class="navigation_button" id="back" value="Back" type="reset" />
    <input class="navigation_button" id="next" value="Next" type="submit" onclick="javascript:noSaveApp()" />

    <div class="clearFix"></div>
</div>

加載頁面時，每個字段集都有其他類和樣式屬性：

class="step ui-formwizard-content ui-helper-reset ui-corner-all" style="display: none;"

在這個過程中，我可以用螢火蟲看，並看到顯示：無; 循環並在與該字段集交互時更改為“阻止”。

問題：我們沒有以任何方式構建用戶保存進度並在以后完成。 我現在正試圖這樣做。 我已成功創建了“保存”按鈕，該按鈕觸發javascript以更改表單的操作，該操作將數據發送到處理和處理POST數據到MySQL的新php文件。 但是，這有效，POST只傳遞當前查看的字段集中的數據，而不是POST所有數據。 我無法弄清楚如何確保所有表單數據都被POST。 任何指導或建議都會有所幫助。 謝謝。

編輯：

我能夠使用以下內容加載正確的頁面：

$(function(){ $('#appForm').formwizard('show','" . $row["current_step"] . "'); }); 

這會加載正確的頁面。 現在的問題是，最后一步是一個摘要頁面，顯示最終提交的所有輸入元素。 但是，它似乎只顯示查看過的頁面中的元素，我很確定它是數組“data.activatedSteps”，用於確定元素是否在最終摘要中顯示。 你的代碼會比我的更好地解決這個問題嗎 再次感謝您對此的幫助。 -

Answer 1

具有屬性'disable' <input>對象不會在post / get中返回。

這是在您的問題中需要注意的重要JavaScript。

if(id === data.currentStep){                                                                    // (we are moving back from the summary page so...) if enable inputs on the current step
    i.removeAttr("disabled");
}else{                                                                                          // disable the inputs on the rest of the steps
    i.attr("disabled","disabled");
}

這就是前一個編碼器控制用戶可以編輯的內容的方式。 如果您希望在用戶首先點擊您的保存按鈕時發回所有值

removeAttr("disabled");

從頁面上的所有內容然后提交發布/獲取。

看起來前一個編碼器通過瀏覽頁面上的所有數據並在此處禁用它來完成此操作。

if(data.isLastStep){                                                                                    // if this is the last step...then
    $("#summaryContainer").empty();                                                                     // empty the container holding the 
    $.each(data.activatedSteps, function(i, id){                                                        // for each of the activated steps...do
        if(id === "summary") return;                                                                    // if it is the summary page then just return
        cache[id] = $("#" + id).find(".input");                                                         // else, find the div:s with class="input" and cache them with a key equal to the current step id
        cache[id].detach().appendTo('#summaryContainer').show().find(":input").removeAttr("disabled");  // detach the cached inputs and append them to the summary container, also show and enable them
    });
}

因此，您可以在發布返回時調用該代碼，也可以執行類似的操作以啟用頁面上的輸入。

編輯：

根據您的評論，我建議使用它來解決您的問題，以便您始終使用相同的實用程序和庫來操縱頁面上的對象。 加上JQuery只是方便。

$(':input.ui-wizard-content').each(function() {$( this ).removeAttr("disabled");});

:input獲取頁面上的所有輸入。 .ui-wizard-content告訴JQuery只查找該類的輸入，然后.each循環遍歷運行lambda函數的每個對象（ function() {$( this ).removeAttr("disabled");} ）對象找到。

編輯2：

很難說出代碼中的$row[]是什么。 它顯然是一個容器，但你提供的代碼有點脫離背景，所以我無法確定它是什么。

話雖如此，如果我只使用DOM（頁面上的Java腳本表示），我知道你之前發布的功能，我會做這樣的事情。

更換

if(data.isLastStep){                                                                                    // if this is the last step...then
    $("#summaryContainer").empty();                                                                     // empty the container holding the 
    $.each(data.activatedSteps, function(i, id){                                                        // for each of the activated steps...do
        if(id === "summary") return;                                                                    // if it is the summary page then just return
        cache[id] = $("#" + id).find(".input");                                                         // else, find the div:s with class="input" and cache them with a key equal to the current step id
        cache[id].detach().appendTo('#summaryContainer').show().find(":input").removeAttr("disabled");  // detach the cached inputs and append them to the summary container, also show and enable them
    });
}

同

if(data.isLastStep){ 
    $("#summaryContainer").empty();
    $('.input :input').detach().appendTo('#summaryContainer').show().find(":input").removeAttr("disabled");
}

這主要是借用了之前的編碼器所做的事情。 他假設表單中的所有內容都在data.activatedSteps因為他創建了工作流程但不再是這種情況。 因此，您需要查看他向data.activatedSteps添加數據的data.activatedSteps以及重新加載時以相同的方式將保存的內容放入其中。 或者只使用忽略所有data內容的行，並使用類input抓取對象內的每個<input>並將其添加到容器中。

注意：JQuery的$(TEXT)使用與CSS相同的對象定義語法，並使用一些特別易用的添加內容，如'：input'。 有一個很好的參考什么我談論這里的CSS參考和JQuery的特殊選擇語法的檢查在這里 。 這就是我如何用一個非常緊湊的語句來編寫能夠抓住你感興趣的東西的東西。