form表單提交方式「form表單提交action不完整」

上節課主要講解了PHP代碼和HTML代碼進行配合實現動態數據網頁的方法。

這節課開始講解前端網頁如何和後端數據進行交互來實現更複雜的功能。

Form標籤的概念和作用

上節課編寫了一個學生分數查詢一覽頁面，需要根據用戶輸入的條件信息，點擊查詢按鈕後，返回顯示不同的數據。

先來假設實現一個最簡單的功能：假如在姓名檢索條件文本輸入框裡面輸入一個”a”字符串，則返回5條數據記錄，假如在輸入一個”b”字符串，則返回3條數據記錄，其它情況則返回1條數據記錄。

為了實現這個最簡單的功能，需要用到Form標籤。

Form標籤元素稱之為HTML表單，可以用於收集用戶輸入信息。

在3-4節裡面已經介紹過：

一般使用form標籤來包含各種輸入標籤元素，並用於提交給後台程序。

form標籤內部可以使用不同類型的表單元素來輸入不同類型的數據。

例如輸入元素、複選元素、單選元素、下拉框選擇元素、提交按鈕等等。

例如這樣：

<form>

</form>

這樣就是符合規範定義的，input等標籤必須位於form開始和結束標籤之內才能被提交給後端程序。

後端程序一般是通過定義form的action屬性值來進行定義的。

例如：

</form>

這個form在提交的時候，會提交給後端程序studentlist.php進行處理。

那麼假如這段代碼本身就位於studentlist.php內，就是自己提交給自己進行處理，這也是符合規範的。當然了，提交給另外一個文件也是符合規範的。

那麼，按下一個按鈕之後，通過何種代碼方式來觸發提交的動作呢？

有2種辦法，一種是採用默認的<input type=”submit” value=”查詢”/>，當點擊這個按鈕的時候，就會自動提交到form對應的action屬性的php文件來進行處理。

另一種方法是採用JavaScript來進行提交。由於之前的網頁代碼編寫中，查詢按鈕是通過a標籤來實現了，因此這裡我們就來試試看採用JavaScript方法如何提交給後台程序。

JavaScript方式提交Form

首先修改studentlist.php文件，增加form標籤，同時修改查詢按鈕的a標籤的onclick方法：

studentlist.php修改如下：

然後創建另外一個文件studentlist_do.php文件：

然後刷新網頁：

在姓名輸入框裡面輸入字符串a，然後點擊查詢按鈕：

可以看到瀏覽器的地址變成了studentlist_do.php了，並且顯示了剛剛輸入的字符串a信息，說明後端程序studentlist_do.php已經接收到了用戶輸入的信息了。

根據以上示例，可以看到，通過在JavaScript代碼中使用document.forms[0].submit();的方式可以提交到form對應的action程序。

而在action程序中，使用PHP系統全局變量$_POST就可以獲取到form中提交的對應的控件輸入的值，匹配關係是根據輸入控件的name屬性來獲取。例如<input type=”text” name=”studentname”/>，則通過$_POST[“studentname”]就可以取得輸入值。

text文本輸入

重新在瀏覽器裡面訪問studentlist.php網頁，然後在姓名文本輸入框裡面輸入字符串b，點擊查詢按鈕，可以看到如下結果：

也就是input的類型是text的時候，通過$_POST[“控件name”]可以獲取到用戶輸入的值。

接下來，試試看其它控件類型都是如何接收用戶輸入數據的。

注意重新打開瀏覽器網頁的方式，最好是重新開一個Tab網頁窗口，輸入網頁地址。這樣可以避免一些瀏覽器緩存沒有更新的問題。避免出現代碼更新了但是瀏覽器網頁顯示卻沒有變化的情況發生。

radio單選按鈕

性別是2個單選按鈕，如果這2個input的type為radio類型的時候，假如name是一樣的話，則用戶只能點選其中的一個。

可以修改網頁來試試看，在前面增加一個選項：全部。

studentlist.php修改如下：

studentlist_do.php修改如下：

刷新網頁，點擊單選按鈕“男”：

然後點擊單選按鈕“女”：

可以看到只能選中一個。然後點擊單選按鈕“全部”：

可以看到只能選中一個。選中其中任意一個，就不能選中其它選項了。

來看看提交到後端程序是什麼數值，點擊查詢按鈕：

可以看到，接收數據是一個on。如果選擇其它選項，同樣接收數據也是on，這樣就無法區分出選擇了那個項目。

這是因為沒有給每一個input設置value屬性。

studentlist.php修改如下：

刷新網頁，選擇性別“男”，點擊查詢按鈕：

可以看到接收到了輸入的選項數據是”male”，表示單選項選擇了“男”這個選項。

假如選擇了選項“全部”後點擊查查詢按鈕，那麼接收到的數據就應該是”all”了。

checkbox多選按鈕

來看看多選按鈕接收到的數據是怎樣的。

studentlist_do.php修改如下：

刷新網頁，選擇科目：語文和數學：

然後點擊查詢按鈕：

可以看到，接收到的數據內容是：數學。

這不符合預期，由於checkbox是多選，所以可以有2種辦法來獲取每一個checkbox的值。

一個辦法是給每一個checkbox設置不同的name，然後分別一個一個去獲取每一個不同name的值。

另外一個辦法，是給這組checkbox設置一樣的name，但是在名稱後面加上[]，這樣PHP代碼中獲取的就是一個數組值。

studentlist.php修改如下：

studentlist_do.php修改如下：

刷新網頁，選擇科目：語文、數學和繪畫，然後點擊查詢按鈕：

可以看到每一個被選中的checkbox的值都獲取到了。

select下拉框選擇

再來看看下拉框選擇項目是如何接收數據的。

studentlist_do.php修改如下：

刷新網頁，選擇分數段“75-90”：

然後點擊查詢按鈕：

可以看到接收的數據就是對應的option的value的值。

接收不同類型參數的值，並返回不同的值

根據一覽查詢頁面的功能要求，首次進入頁面時，默認不顯示任何查詢數據，當點擊了查詢按鈕之後，根據不同的查詢條件，顯示不同的數據，也就是說，點擊查詢按鈕後，顯示的網頁和點擊之前基本是同一個頁面，如果做成2個php文件，則很不方便也不能重用頁面代碼，因此，可以將form的action屬性修改為studentlist.php自己本身，這樣就可以達到目的了。

將studentlist_do.php裡面的代碼剪切到studentlist.php裡面的開始的位置，並修改action的值。

studentlist.php修改如下：

然後刷新網頁，輸入查詢條件：

點擊查詢按鈕：

可以看到網頁顯示了用戶輸入的數據值。

掌握了如何接收輸入數據之後，可以開始編寫真正的判斷邏輯了。

考慮到頁面上還會增加其它的功能，例如點擊明細行進入其它頁面，那麼同樣的一個action就需要判斷是要執行哪種操作，就需要一個區分的標誌，因此就需要在網頁中增加一個隱藏的輸入項目，通過設置這個隱藏項目的值為不同的值來告訴後端處理程序，要執行的是哪種操作。

在form中增加一個隱藏的輸入項目使用如下方式：

這個輸入項目在瀏覽器中是看不到的項目，但是在$_POST變量裡面是可以接收到它的value的。

在document.forms[0].submit();這句代碼之前通過JavaScript來修改這個項目的value就可以達到設置不同的操作區分的目的了。

同時，將$alldatas變量的定義從後面移動到前面來，並修改為根據輸入的姓名的值不同而返回不同的值。

studentlist.php修改如下：

刷新網頁：

可以看到，網頁顯示沒有查詢數據，這是因為這個時候並沒有提交，所以$_POST裡面對應的fromtype的值為空，因此根據判斷邏輯返回的數據為0條記錄。

在姓名檢索條件輸入字符a，點擊查詢按鈕：

可以看到，網頁顯示了5條數據。這是因為點擊查詢按鈕時，調用了JavaScript函數onquery，函數裡面設置了fromtype的輸入項目的value為search，然後提交到自己本身php文件之後，通過判斷邏輯得知fromtype的值時search，則認為是點擊了查詢按鈕，因此執行查詢邏輯，根據輸入的值為a，返回5條數據記錄。

在姓名檢索條件輸入字符b，點擊查詢按鈕：