在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