在PHP中將下拉選擇列表的內容從一種形式傳遞到另一種形式

Question

我有一個PHP腳本，它根據用戶填寫的普通表格以表格格式顯示MySQL數據庫中的信息。

當用戶單擊“搜索”時，腳本會自行調用（Get方法）。 重新顯示該窗體，並在其下方是輸出表。 用戶可以優化搜索，然后根據需要重試。

顯示輸出后，我還希望用戶能夠更改他希望在表中顯示的數據庫中的哪些字段，並進行另一次搜索。 我想使其完全直觀。

我可以在表單中添加一堆“選擇”下拉列表，但這不是很直觀。 問題的一部分取決於搜索值，它從兩個不同的MySQL表中產生兩個完全不同的顯示。 因此，很難根據用戶的其他輸入向用戶解釋要填充哪個下拉框。

我能想到的最直觀的方法是將輸出表中的列標題從純文本更改為下拉選擇框。 他第一次進行搜索時，將獲得默認的輸出字段。 然后，他可以將任何列標題下拉框更改為表中的其他字段名稱，然后單擊上方表單上的“搜索”以重新顯示具有不同列的表。

問題在於它確實需要兩種形式，頂部是搜索表單，另一種形式是嵌入在輸出表的第一行中的列標題下拉框。 但這有可能嗎？ 可以將表格嵌入表格中還是必須將表格嵌入表格中？

我使用分頁的原因稍微復雜一些，因為輸出通常太長而無法在一頁上顯示。 因此，我一次顯示500行，並提供頁碼和下一頁的上一個-下一個鏈接，例如Google搜索。

如果我可以解決這個問題，那么可以設想在每個下拉框上設置一個“ onclick”或類似名稱，以調用一些javascript將所選值插入第一種形式的隱藏字段中。 問題是我不知道該怎么做。 以此方式或實現我想要的替代方式的任何想法將不勝感激。

對於它的價值，我目前調用一些javascript提交現有表單：

<form action="'.$_SERVER['PHP_SELF'].'" method="GET" onsubmit="return SubmitForm(this);">

它會進行用戶端表單驗證，還會從搜索字符串中刪除所有空值或默認值。 最簡單的實現是，如果該代碼可以轉到第二種形式，並獲取已更改的列標題，並將其添加到其構建的參數字符串中。 用於格式化$ _GET搜索字符串URL的現有JS代碼如下所示：

var elems = form.getElementsByTagName('input');
var default_values = new Array();
default_values['surname_type'] = 'starts';
default_values['firstname_type'] = 'starts';
default_values['spousename_type'] = 'starts';
default_values['remarks_type'] = 'contains';
default_values['cemname_type'] = 'starts';
default_values['seltype'] = 'all';
default_values['state'] = 'ALL';
var inputs = [];
var getstring = "";

// beautify $_GET querystring to remove blank fields
for(var i = 0; i < elems.length; i++) {
    // add non-blank input fields to querystring and store field names so we can ignore  changed radio buttons for blank fields
    if(elems[i].type == "text" && elems[i].value != "") { 
        getstring += "&" + elems[i].name + "=" + encodeURIComponent(elems[i].value);
        inputs[elems[i].name + "_type"] = "y"; // eg. surname_type = y if surname is present
    }
    // add changed radio buttons if the associated text field was present
    if(elems[i].type == "radio" && elems[i].checked && elems[i].value != default_values[elems[i].name]) {
        if (inputs[elems[i].name] || elems[i].name == "seltype") 
            getstring += "&" + elems[i].name + "=" + encodeURIComponent(elems[i].value);
    }
}
// add state code if no other values input or if a specific state is selected
var state = document.getElementById('state');
if (state.value != "ALL" || getstring == "") 
    getstring += "&state=" + state.value;

var getstring = "?" + getstring.substring(1);  // replace first & with ?
window.location.href = form.action + getstring; // submit form
return false;  // tell form above not to re-submit it

所以我想我真正想要的是在上面第二行之前插入一些JS代碼。 偽代碼將如下所示：

if (first-column-heading-dropdown-in-second-form != "name")
   getstring += '&outputcolumn1=' + value-of-first-column-heading-dropdown-in-second-form; 
if (second-column-heading-dropdown-in-second-form != "address")
   getstring +=  '&outputcolumn2=' + value-of-second-column-heading-dropdown-in-second-form; 
if (third-column-heading-dropdown-in-second-form != "state")
   getstring +=  '&outputcolumn3=' + value-of-third-column-heading-dropdownin-second-form; 

哎呀，在試圖解釋我想要什么時，我正在慢慢回答自己的問題。 我看到我可以使用第二種形式的下拉列表的ID來提取要插入第一種形式的字符串的值。

因此，現在剩下的就是如何將表單集成到輸出表中的列標題中。 如果我將表格包裝在整個輸出表上……嗯。 它開始看起來可行。

Answer 1

在試圖解釋我想要的東西時，我回答了自己的問題。 它像夢一樣運作。 我不需要為下拉列標題創建表單。 我只是插入它們而不是現有的th / th標頭。 不確定它是否為有效的HTML語法，但它可在所有主流瀏覽器上使用。

然后，在javascript中，我使用其ID從下拉選擇中獲取值並將其插入從表單構建的查詢字符串中。 我給了下拉菜單一個類，並使用CSS將其格式化為與其他列標題相同的格式。

列標題的代碼如下所示。 （它包含用於在腳本提交表單時重新調用自身時重新顯示所選值的代碼）：

echo '<table><tr>  
<th>Name</th>';

// Exit from previous echo and php to allow use of conditional echo statements below to select previously selected dropdown item
?>
<td><select id="col1" class="thdropdown" name="col1">
<option value="address" <?php if($col1=="address") { echo "selected"; }?>>Address</option>
<option value="alternate_name" <?php if($col1=="alternate_name") { echo "selected"; }?>>Alt Name</option>
<option value="town" <?php if($col1=="town") { echo "selected"; }?>>Town</option>
<option value="postcode" <?php if($col1=="postcode") { echo "selected"; }?>>Postcode</option>
<option value="latlong" <?php if($col1=="latlong") { echo "selected"; }?>>Lat/Long</option>
<option value="source" <?php if($col1=="source") { echo "selected"; }?>>Source</option>
</select>
</td>
<td><select id="col2" class="thdropdown" name="col2">
<option value="state" <?php if($col2=="state") { echo "selected"; }?>>State</option>
<option value="alternate_name" <?php if($col2=="alternate_name") { echo "selected"; }?>>Alt Name</option>
<option value="town" <?php if($col2=="town") { echo "selected"; }?>>Town</option>
<option value="postcode" <?php if($col2=="postcode") { echo "selected"; }?>>Postcode</option>
<option value="latlong" <?php if($col2=="latlong") { echo "selected"; }?>>Lat/Long</option>
<option value="source" <?php if($col2=="source") { echo "selected"; }?>>Source</option>
</select>
</td>
<?php
echo '<th>... other columns ...</th></tr>';

CSS代碼如下所示：

th, .thdropdown {
    font-weight: bold;
    font-style: italic;
    font-size: 11pt;
    text-align: left;
    vertical-align:top;
}

按照上面的偽代碼插入的Javascript代碼如下：

// add state code if no other values input or if a specific state is selected
    var state = document.getElementById('state');
     if (state.value != "ALL" || getstring == "") 
        getstring += "&state=" + state.value;

// add column headings from dropdown selects in output table
    var col1 = document.getElementById('col1');
     if (col1.value != "address") 
        getstring += "&col1=" + col1.value;
    var col2 = document.getElementById('col2');
     if (col2.value != "state") 
        getstring += "&col2=" + col2.value;

    var getstring = "?" + getstring.substring(1);  // replace first & with ?
    window.location.href = form.action + getstring; // submit form
    return false;  // tell form above not to re-submit it

當我更改值並進行搜索時，查詢字符串現在看起來像這樣：

http://mysite/index.php?state=NSW&col1=town&col2=lat/long