在PHP中将下拉选择列表的内容从一种形式传递到另一种形式

Question

I have a PHP script that displays information from a MySQL database in a table format based on a normal form filled in by the user.

When the user clicks Search the script calls itself (Get method). The form is redisplayed and below it is the output table. The user can refine the search and try again if he wants.

After the output is displayed I also want the user to be able to change which fields in the database he wants displayed in the table, and do another search. I want to make it totally intuitive.

I could add a bunch of Select dropdowns to the form, but that is not very intuitive. Part of the problem is depending on the search values it produces two totally different displays from two different MySQL tables. So it would be very difficult to explain to the user which drop-down boxes to fill in depending on his other input.

The most intuitive method I can think of is to change the column headings in the output table from plain text to dropdown select boxes. The first time he does the search he would get the default output fields. He can then change any of the column heading dropdown boxes to a different field name from the table and then click Search on the form above to redisplay the table with different columns.

The problem is it really needs two forms, the search form at the top and another form embedded in the first line of the output table with the column heading dropdown boxes. But is that even possible? Can a form be embedded in a table or does it have to be the other way around?

Complicating things slightly is the fact that I use pagination as the output is generally too long to display on one page. So I display 500 lines at a time and provide page number and previous-next links for the next pages, like a Google search.

If I can sort that bit out I then envisage setting up an "onclick" or similar on each dropdown box that calls some javascript to insert the selected value into a hidden field in the first form. Problem is I have no idea how to do it. Any ideas on doing it that way or alternative ways of achieving what I want would be greatly appreciated.

For what it is worth, I currently call some javascript to submit the existing form:

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

It does user-side form validation plus it remove all empty or default values from the search string. The simplest implementation would be if that code could go out to the second form and grab the column headings that have changed and add them to the parameter string that it builds. The existing JS code to format the $_GET search string URL is like this:

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

So I guess what I am really looking for is some JS code to insert just before the second last line above. The pseudo code would be like this:

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; 

Heck, in trying to explain what I want I am slowly answering my own question. I can see that I can just use the ID of the dropdowns in the second form to extract the values to insert in the first form get string.

So now all that leaves is how to integrate a form into the column headings in the output table. If I wrap a form around the entire output table... Hmmm. It is starting to look do-able.

Answer 1

In trying to explain what I wanted I answered my own question. It works like a dream. I did not need to create a form for the drop-down column headers. I simply inserted them instead of the existing th /th headers. Not sure if it is valid HTML syntax but it works on all major browsers.

In the javascript I then grabbed the values from the dropdown selects using their ID and inserted them in the querystring I had built from the form. I gave the dropdowns a class and formatted them the same as the other column headings using CSS.

The code for the column headers looks like this. (It includes code to re-display the selected value when the script re-calls itself on form submission):

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>';

The CSS code looks like this:

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

The Javascript code that I inserted as per the pseudo code above is as follows:

// 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

When I change the values and do a search the querystring now looks something like this:

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