經驗交流

重現使用者填寫錯誤的表單

問題說明
　當我們設計一個複雜的表單，供使用者輸入資料時，萬一眾多欄位中僅有一點小錯誤，而被系統所拒絕，並且強迫返回前一頁的話，那麼使用者將得再度面臨一個複雜難填的表單。
　若是在強迫返回的同時，幫使用者保留先前已填的內容，這不但可以讓使用者確實瞭解填表時的錯誤何在，更可以為使用者大大節省重填所需的時間。
　這要怎麼做呢？請參考以下的做法。

我的做法
　首先，我將使用兩支程式來實現這個效果，一個負責前端的填表介面（X_26_demo1.php），另一個擔任後端強迫返回的工作（X_26_demo2.php）。
　我在 X_26_demo1.php 裡使用多種表單元件：
• 會員註冊
<form action="X_26_demo2.php" name="DemoForm" method="POST" onsubmit="return Final_Check( );">
帳號：<input type="text" name="UserName">
密碼：<input type="password" name="Password">
性別：<input type="radio" name="Sex" value="M" checked>男　
<input type="radio" name="Sex" value="F">女
興趣：<input type="checkbox" name="Interest_1" value="music">音樂　
<input type="checkbox" name="Interest_2" value="sport">運動
月薪：<select name="Salary">
<option value="3M">三萬以下
<option value="35" selected>三 ∼ 五萬
<option value="57">五 ∼ 七萬
<option value="7P">七萬以上
</select>
簡歷：<textarea name="Introduction" rows=4 cols=40></textarea>
<input type="submit" value="送出">
</form>

　現在，為了示範的理由，無論使用者填寫什麼內容，在送給 X_26_demo2.php 後，我們都將表單退回去。重點來了，在退回這份表單時，原來填寫的資料，除了「Password」這個欄位之外，我們都必須要回復到他原來所填的樣貌。
　為了達到這種效果，您可以試試以下兩種方法：
《方法一》
　我在 X_26_demo2.php 直接使用 JavaScript 的 history.back() 方法，將畫面導回前一頁。
<script language="JavaScript">
history.back();
</script>

《方法二》
　我在 X_26_demo2.php 裡重製一個類似於 X_26_demo1.php 裡的 DemoForm，以便傳回資料。
<form action="X_26_demo1.php" name="DemoForm" method="POST">
<input type="hidden" name="UserName" value="<?echo stripslashes($_POST['UserName']);?>">
<input type="hidden" name="Sex" value="<?echo $_POST['Sex'];?>">
<input type="hidden" name="Interest_1" value="<?echo $_POST['Interest_1'];?>">
<input type="hidden" name="Interest_2" value="<?echo $_POST['Interest_2'];?>">
<input type="hidden" name="Salary" value="<?echo $_POST['Salary'];?>">
<input type="hidden" name="Introduction" value="<?echo stripslashes($_POST['Introduction']);?>>
</form>

　您注意到了嗎？由於 UserName 與 Introduction 這兩個欄位可能會傳入帶有 ASCII 92 字元（\）的中文字，所以我們必須先以 stripslashes() 為它們加工一下，才能回傳給使用者。
　上述的寫法在表單內容不太大時還能接受，若表單內有數十個元件的話，那就累人了。此時，您可以改用下列這種簡便的方法。
<form action="X_26_demo1.php" name="DemoForm" method="POST">
<?
while ( list($k, $v) = each($_POST) )
  echo "<input type=\"hidden\" name=\"" . $k . "\" value=\"" . stripslashes($v) . "\">\n";
?>
</form>

　之所以能採用這麼簡單的方式，那是因為 X_26_demo1.php 以 POST 的方式送出表單資料，所以整個表單的內容就被存在 $_POST 裡頭。它是一個陣列，內容大致如下：
Array
(
  [UserName] => chensh（使用者填的 UserName）
  [Password] => 123456（使用者填的 Password）
  [Sex] => M（使用者選取的 Sex）
  [Interest_1] => （使用者未選取 Interest_1）
  [Interest_2] => sport（使用者選取 Interest_2）
  [Salary] => 35（使用者選取的 Salary）
  [Introduction] => 我是一個國小教師（使用者填的 Introduction）
)

　由於在 $_POST 這個陣列裡，元素的鍵值（key）並不是數字，而是文字，所以我使用 while 迴圈，並搭配 each 函數，便能一一取出陣列中的 key 與 value。

　上述的「方法二」較為複雜，我將其程式寫成以下的範例，您可以自行試用看看。

範例 X_26_demo1.php 之原始碼 X_26_demo2.php 之原始碼
2005.1.27　寫於嘉義市教網中心
經驗交流