私は自分の道をナビゲートできないように見える問題を抱えています。
まず、専門家によって作成されたウェブサイトを持っていますが、その会社とは仕事上の関係がありません。現在、私は自分でサイトを管理しています。私は有能ですが、経験豊富な Web 開発者ではありません。
背景: エンドユーザーに提示される複数ページのフォームを使用する申請手続きがあります。フォームは 7 つのステップで表示されますが、すべて 1 つの 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;"
プロセス中、firebug で見ることができ、display: none; が表示されることを確認できます。そのフィールドセットと対話するとき、循環して「ブロック」に変わります。
問題: ユーザーが進行状況を保存して後で完了するための方法は一切構築していません。私は今これをやろうとしています。「保存」ボタンを正常に作成しました。これにより、フォームのアクションを変更する JavaScript がトリガーされ、POST データを処理して MySQL に処理する新しい php ファイルにデータが投稿されます。これは機能しますが、POST はすべてのデータを POST するのではなく、現在表示されているフィールドセットからのデータのみを渡します。そして、すべてのフォーム データが POST されていることを確認する方法がわかりません。ガイダンスや提案は役に立ちます。ありがとう。
編集：
次のようにして、正しいページを読み込むことができました。
$(function(){ $('#appForm').formwizard('show','" . $row["current_step"] . "'); });
これにより、正しいページが読み込まれます。ここでの問題は、これの最後のステップが、最終提出のためのすべての入力要素を示す要約ページであることです。ただし、表示されたページの要素のみが表示されるようです。最終的な要約で要素が表示されるかどうかを決定するのは、配列「data.activatedSteps」であると確信しています。あなたのコードは私のものよりもこれにうまく対処できますか? このたびはご協力いただきありがとうございました。–</p>