在 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