One form, one value, many tables. [Archive]

h8ids

10-11-2006, 02:54 PM

This one is complex. Why? Well, I enjoy a good challenge and beating my head against the desk. :)

I have a page which dynamically populates four listboxes; each listbox is loaded with data from a database. One listbox equals one table within the database; so there are four tables being represented.

The page is intended for a user to Add, Edit or Delete one record at a time. This brings me to the problem; returning values back to the DB.

I can't have multiple forms within the page; IE predicatably chokes at displaying the content within the listboxes. But Firefox doesn't have any problem. :mad:

So I'm left with one form which calls another page. Thinking about have the called page deter what database field needs to be updated.
Also calling an external .js file. Since the file will re-side on the server, would it be possible to pass JS variable values to a PHP script through the external .js file?

I'm trying to avoid the creation and maintenance of thirteen pages (One page for the user to decide what they want to do, Four for adding data, Four for editting data, Four for deleting data.)

Is the above idea feasible? Or should the thirteen pages be put into effect?

Fumigator

10-11-2006, 03:22 PM

If you don't mind using Javascript you can set a hidden variable that describes the action you want to take, then place a control in the processing page (a switch statement for example) that handles all the different actions for the page.

You could even load up the query string for that matter.

CFMaBiSmAd

10-11-2006, 04:07 PM

If you post an example of what the form looks like and how the data/operations are picked, it would be clearer what you need.

I think this can be done using simple conditional logic in the form processing code, but it is not clear what the visitor's choices are.

Also calling an external .js file. Since the file will re-side on the server, would it be possible to pass JS variable values to a PHP script through the external .js file?The browser fetches an external .js file. PHP could build/write the contents of this file and/or PHP can just output inline javascript code to the browser. It is possible to send values from javascript back to the web server using a refresh/$_GET method or AJAX.

If what you are doing is dynamically building listboxes with database data that is dependent on what was selected in a different listbox, you can either submit the form using javascript using an onchange event... or you can do this using AJAX.

If you post your code it would help with the big picture.

h8ids

10-11-2006, 05:45 PM

Fumigator & CFMaBiSmAd,

Thanks for your assistance!
My head has been spinning on this one. Just as soon as I thought it had it figured out in Firefox...

Using $_GET will not work. Only 100 additional characters are allowed in the URL; not enough.
I'm not familiar with a method of passing JS variables from one page to another so that the data can be evaluated. Only familiar with sending data by PHP.

Here's the source.
<HTML>
<HEAD>
<title>Database edit page</title>
<META NAME="EXPIRES" CONTENT="Mon, 01 Jan 2000 12:00:00 GMT">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

<script src="javascript.js"></script>
</HEAD>

<body topmargin="0" marginheight="0" onload="hidden()">


<div>
<b>Database edit tool</b>
</div>

<form name="f1" enctype="multipart/form-data" action="dataResolver.php">


<div>
<table width='631' cellspacing='0'>
<thead bgcolor='lightyellow'>
<tr><th colspan="2">Add, Edit or Delete information</th></tr>
</thead>

<tr bgcolor='#E0E0E0'>
<td width="481"> Majors: <select name="Major" id="MajorChoice" onchange="show('MajorEdit'); hide('MinorEdit'); hide('ConcenEdit'); hide('TheologyEdit'); hide('MajorAdd'); hide('MinorAdd'); hide('ConcenAdd'); hide('TheologyAdd'); testMajor(this); document.getElementById('MinorChoice').selectedIndex=0; document.getElementById('ConcenChoice').selectedIndex=0; document.getElementById('TheolChoice').selectedIndex=0"></select></td>


<td width="150">
 <input type="button" value="Add" name="MajAdd" id="Add" onclick="show('MajorAdd'); hide('MajorEdit'); hide('TheologyEdit'); hide('ConcenEdit'); hide('ConcenAdd'); hide('MinorEdit'); hide('MinorAdd'); hide('TheologyAdd'); document.getElementById('MajorChoice').selectedIndex=0; document.getElementById('MinorChoice').selectedIndex=0; document.getElementById('ConcenChoice').selectedIndex=0; document.getElementById('TheolChoice').selectedIndex=0">
 <input type="button" value="Delete" name="MajorDelete" onclick="resolveData();">
</td>
</tr><tr>
<td>
 <div id="MajorAdd" name="MajorAdd" style='display: none'>
  <b>Add</b> a Major.
<input type='text' id='Majorcode' name='MajorCode' size='4' maxlength='4'>
<input type='text' id='Majors' name='Majors' size='35' maxlength='50'><br>
  <input type="submit" value="Add Major" name="Add Major" title="Add Major" onclick="resolveData();"><p>
</div>
<div id="MajorEdit" name="MajorEdit" style='display: none'>
  <b>Edit</b> a Major.
<input type="text" name="MajorEdit" id="MajorEdit" size="4" onclick="activeMajorRev()">
<input type="text" name="MajorEdit2" size="35" onclick="activeMajorRev()"><br>
  <input disabled type="submit" value="Save revisions" name="MajorRev" id="MajorRev" title="Store Major revisions" onclick="resolveData();">
<p></div>
</td>
</tr>
<tr bgcolor='#E0E0E0'>
<td width="481"> Minors: <select name="Minor" id="MinorChoice" onchange="show('MinorEdit'); hide('MajorEdit'); hide('ConcenEdit'); hide('TheologyEdit'); hide('MinorAdd'); hide('MajorAdd'); hide('ConcenAdd'); hide('TheologyAdd'); testMinor(this); document.getElementById('MajorChoice').selectedIndex=0; document.getElementById('ConcenChoice').selectedIndex=0; document.getElementById('TheolChoice').selectedIndex=0"></select></td>


<td width="150">
 <input type="button" value="Add" name="MinAdd" id="Add" onclick="show('MinorAdd'); hide('MinorEdit'); hide('TheologyEdit'); hide('ConcenEdit'); hide('ConcenAdd'); hide('MajorEdit'); hide('MajorAdd'); hide('TheologyAdd'); document.getElementById('MajorChoice').selectedIndex=0; document.getElementById('ConcenChoice').selectedIndex=0; document.getElementById('TheolChoice').selectedIndex=0; document.getElementById('MinorChoice').selectedIndex=0">
 <input type="button" value="Delete" name="MinorDelete" onclick="resolveData();">
</td>
</tr><tr>
<td>
 <div id="MinorAdd" name="MinorAdd" style='display: none'>
  <b>Add</b> a Minor.
<input type='text' style='background-color: lightyellow' id='Minor' name='MinorCode' size='4' maxlength='4'>
<input type='text' style='background-color: lightyellow' id='Minor' name='Minors' size='35' maxlength='50'><br>
  <input type="submit" value="Add Minor" name="Add Minor" title="Add Minor" onclick="resolveData();"><p>
</div>
<div id="MinorEdit" name="MinorEdit" style='display: none'>
  <b>Edit</b> a Minor.
<input type="text" name="MinorEdit" id="MinorEdit" size="4" onclick="activeMinorRev()">
<input type="text" name="MinorEdit2" size="35" onclick="activeMinorRev()"><br>
  <input disabled type="submit" value="Save revisions" name="MinorRev" id="MinorRev" title="Store Minor revisions" onclick="resolveData();">
<p></div>
</td>
</tr>

<tr bgcolor='#E0E0E0'>
<td width="481"> Concentrations: <select name="Concen" id="ConcenChoice" onchange="show('ConcenEdit'); hide('MajorEdit'); hide('MinorEdit'); hide('TheologyEdit'); hide('ConcenAdd'); hide('MajorAdd'); hide('MinorAdd'); hide('TheologyAdd'); testConcen(this); document.getElementById('MajorChoice').selectedIndex=0; document.getElementById('MinorChoice').selectedIndex=0; document.getElementById('TheolChoice').selectedIndex=0"></select></td>


<td width="150">
 <input type="button" value="Add" name="ConcAdd" id="Add" onclick="hide('ConcenEdit'); hide('TheologyEdit'); hide('MinorEdit'); hide('MinorAdd'); hide('MajorEdit'); hide('MajorAdd'); hide('TheologyAdd'); show('ConcenAdd'); document.getElementById('ConcenChoice').selectedIndex=0; document.getElementById('TheolChoice').selectedIndex=0; document.getElementById('MajorChoice').selectedIndex=0; document.getElementById('MinorChoice').selectedIndex=0;">
 <input type="button" value="Delete" name="ConcenDelete" onclick="deleteGoTo();">
</td>
</tr><tr>
<td>
 <div id="ConcenAdd" name="ConcenAdd" style='display: none'>
  <b>Add</b> a Concentration.
<input type='text' style='background-color: lightyellow' id='ConcenCode' name='ConcenCode' size='4' maxlength='4'>
<input type='text' style='background-color: lightyellow' id='Concen' name='Concen' size='35' maxlength='50'><br>
  <input type="submit" value="Add Concentration" name="Add Concentration" title="Add Concentration" onclick="resolveData();"><p>
</div>
<div id="ConcenEdit" name="ConcenEdit" style='display: none'>
  <b>Edit</b> a Concentration.
<input type="text" name="ConcenEdit" id="ConcenEdit" size="4" onclick="activeConcenRev()">
<input type="text" name="ConcenEdit2" size="35" onclick="activeConcenRev()"><br>
  <input disabled type="submit" value="Save revisions" name="ConcenRev" id="ConcenRev" title="Store Concentration revisions" onclick="resolveData();">
<p></div>
</td>
</tr>
<tr bgcolor='#E0E0E0'>
<td width="481"> School of Theology majors: <select name="Theology" id="TheolChoice" onchange="show('TheologyEdit'); hide('ConcenEdit'); hide('MinorEdit'); hide('MajorEdit'); hide('TheologyAdd'); hide('ConcenAdd'); hide('MinorAdd'); hide('MajorAdd'); testTheology(this); document.getElementById('MajorChoice').selectedIndex=0; document.getElementById('MinorChoice').selectedIndex=0; document.getElementById('ConcenChoice').selectedIndex=0"></select></td>


<td width="150">
 <input type="button" value="Add" name="TheolAdd" id="Add" onclick="hide('TheologyEdit'); hide('ConcenEdit'); hide('ConcenAdd'); hide('MinorEdit'); hide('MinorAdd'); hide('MajorEdit'); hide('MajorAdd'); show('TheologyAdd'); document.getElementById('TheolChoice').selectedIndex=0; document.getElementById('MajorChoice').selectedIndex=0; document.getElementById('MinorChoice').selectedIndex=0; document.getElementById('ConcenChoice').selectedIndex=0;">
 <input type="button" value="Delete" name="TheologyDelete" onclick="resolveData();">
</td>
</tr><tr>
<td>
 <div id="TheologyAdd" name="TheologyAdd" style='display: none'>
  <b>Add</b> a Theology major.
<input type='text' style='background-color: lightyellow' id='TheologyCode' name='TheologyCode' size='4' maxlength='4'>
<input type='text' style='background-color: lightyellow' id='Theology' name='Theology' size='35' maxlength='50'><br>
  <input type="submit" value="Add Theology Major" name="Add Theology Major" title="Add Theology Major" onclick="resolveData();"><p>
</div>
<div id="TheologyEdit" name="TheologyEdit" style='display: none'>
  <b>Edit</b> a Theology major.
<input type="text" name="TheologyEdit" id="TheologyEdit" size="4" onclick="activeTheolRev()">
<input type="text" name="TheologyEdit2" size="35" onclick="activeTheolRev()"><br>
  <input disabled type="submit" value="Save revisions" name="TheolRev" id="TheolRev" title="Store Theology revisions" onclick="resolveData();">
<p></div>
</td>
</tr>

<tfoot bgcolor='lightyellow'>
<tr><td colspan='4'> </td></tr>
</tfoot>
</table>
</form>

<script type="text/javascript">
var empMajorChoice = [['Please Choose One','Please Choose One'],['American Studies','AMST'],['Anglican Studies','ANGL'],['Anthropology','ANTH'],['Art','ART'],['Art History','ARTH'],['Asian Studies','ASIA'] ];

//Collecting of paired data for Major presentation
for(var a=0;a<empMajorChoice.length;a++){
document.f1.MajorChoice[document.f1.MajorChoice.length] = new Option(empMajorChoice[a][0],empMajorChoice[a][0])
}
// Populating Major fields
function testMajor(objMajor){
if(objMajor.selectedIndex!=0){
document.f1.MajorEdit.value=empMajorChoice[objMajor.selectedIndex][1];
document.f1.MajorEdit2.value=empMajorChoice[objMajor.selectedIndex][0]
} else {
document.f1.MajorEdit.value="";
document.f1.MajorEdit2.value=""; }
}

var empMinorChoice = [
['Please Choose One','Please Choose One'],['Anthropology','ANTH'],['Art History','ARTH'],['Asian Studies','ASIA'],['BioChemistry','BIOC'],['Biology','BIOL'],['Chemistry','CHEM'],['Computer Science','CSCI'],['Economics','ECON'],['Environmental Studies','ENVS'],['Fine Arts','FINA'] ];

//Collecting of paired data for Minor presentation
for(var b=0;b<empMinorChoice.length;b++){
document.f1.MinorChoice[document.f1.MinorChoice.length] = new Option(empMinorChoice[b][0],empMinorChoice[b][0])
}
// Populating Minor fields
function testMinor(objMinor){
if(objMinor.selectedIndex!=0){
document.f1.MinorEdit.value=empMinorChoice[objMinor.selectedIndex][1]
document.f1.MinorEdit2.value=empMinorChoice[objMinor.selectedIndex][0]
} else {
document.f1.MinorEdit.value="";
document.f1.MinorEdit2.value=""; }
}

var empConcenChoice = [
['Please Choose One',''],['Education','EDU'],['Womens Studies','WMST'] ];

//Collecting of paired data for Concentration presentation
for(var c=0;c<empConcenChoice.length;c++){
document.f1.ConcenChoice[document.f1.ConcenChoice.length] = new Option(empConcenChoice[c][0],empConcenChoice[c][0])
}
// Populating Concentration fields
function testConcen(objConcen){
if(objConcen.selectedIndex!=0){
document.f1.ConcenEdit.value=empConcenChoice[objConcen.selectedIndex][1]
document.f1.ConcenEdit2.value=empConcenChoice[objConcen.selectedIndex][0]
} else {
document.f1.ConcenEdit.value="";
document.f1.ConcenEdit2.value=""; }
}

var empTheolChoice = [
['Please Choose One',''],['Bible','BIBL'],['Christian Ethics Moral Theology','CEMT'],['Church History Historical Theology','CHHT'] ];

//Collecting of paired data for Theology presentation
for(var d=0;d<empTheolChoice.length;d++){
document.f1.TheolChoice[document.f1.TheolChoice.length] = new Option(empTheolChoice[d][0],empTheolChoice[d][0])
}
// Populating Theology fields
function testTheology(objTheology){
if(objTheology.selectedIndex!=0){
document.f1.TheologyEdit.value=empTheolChoice[objTheology.selectedIndex][1]
document.f1.TheologyEdit2.value=empTheolChoice[objTheology.selectedIndex][0]
} else {
document.f1.TheologyEdit.value="";
document.f1.TheologyEdit2.value=""; }
}
</script>
</BODY>
</HTML>

The include code:
//Revealing edit fields based upon selection
//Major
function hide(){
var MajorEdit = document.getElementById(arguments[0]);
MajorEdit.style.display="none";
}
function show(){
var MajorEdit = document.getElementById(arguments[0]);
MajorEdit.style.display="";
}
//Minor
function hide(){
var MinorEdit = document.getElementById(arguments[0]);
MinorEdit.style.display="none";
}
function show(){
var MinorEdit = document.getElementById(arguments[0]);
MinorEdit.style.display="";
}
//Concentration
function hide(){
var ConcenEdit = document.getElementById(arguments[0]);
ConcenEdit.style.display="none";
}
function show(){
var ConcenEdit = document.getElementById(arguments[0]);
ConcenEdit.style.display="";
}
//Theology
function hide(){
var TheologyEdit = document.getElementById(arguments[0]);
TheologyEdit.style.display="none";
}
function show(){
var TheologyEdit = document.getElementById(arguments[0]);
TheologyEdit.style.display="";
}

//Revision submission button status
function activeMajorRev(){
document.f1.MajorRev.disabled = false;
}
function activeMinorRev(){
document.f1.MinorRev.disabled = false;
}
function activeConcenRev(){
document.f1.ConcenRev.disabled = false;
}
function activeTheolRev(){
document.f1.TheolRev.disabled = false;
}

// Choose which code to process info and the message to display from dataResolver.php
function resolveData(){
alert('found function');
/*if (document.f1.MajorAdd != 'null'){
write='something';
}
if (document.f1.MajorEdit != 'null'){
write='something';
}
if (document.f1.MinorAdd != 'null'){
write='something else';
}
if (document.f1.MinorEdit != 'null'){
write='something else';
}
if (document.f1.ConcenAdd != 'null'){
write='something else';
}
if (document.f1.ConcenEdit != 'null'){
write='something else';
}
if (document.f1.TheologyAdd != 'null'){
write='something else';
}
if (document.f1.TheologyEdit != 'null'){
write='something else';
}*/
}

//Deleting records
function deleteGoTo(){
//Send to somewhere;
}

Fumigator

10-11-2006, 07:54 PM

To use $_GET you only need to indicate what action is being taken. That takes 1 or 2 characters.

For example, make the "delete" link for the 1st table look like this: "form-process.php?action=d1&id=99999". The form-process.php file would then look for $_GET['action'] being set to "d1" and take the appropriate action.

h8ids

10-11-2006, 08:35 PM

$_GET only allows 100 additional characters to appear in the URL; That wouldn't be enough for the data being passed to the Database.

h8ids

10-11-2006, 09:33 PM

The code you describe below, do you mean the 99999 to represent the database records number?

I'm assuming the JS link would capture the selected option and pass it to form-process.php where the command to delete the data from the database would occur.

To use $_GET you only need to indicate what action is being taken. That takes 1 or 2 characters.

For example, make the "delete" link for the 1st table look like this: "form-process.php?action=d1&id=99999". The form-process.php file would then look for $_GET['action'] being set to "d1" and take the appropriate action.

Fumigator

10-11-2006, 10:02 PM

Yes, id=99999 is my example of passing the unique ID for the row you want to delete/update. You would only pass the unique ID and the action you want to perform through the query string (the $_GET array). Other form data would be passed through the $_POST array assuming your <form> tag uses method="post").

I'm assuming the JS link would capture the selected option and pass it to form-process.php where the command to delete the data from the database would occur.

Yes, pretty much. It would depend on how you've got the form elements arranged, but that's the general idea.

h8ids

10-11-2006, 10:14 PM

THANK YOU! :thumbsup: