6
Hello,
I realise there are a lot of topics related to this problem but many of what I have found has run cold or unresolved. What I have is an addressbook clone where there are groups which have members. I have this formatted in a way where the groups are in a drop down box. Once a group is selected, the two selection boxes below are refreshed with those who are members or non members of the selected group. The user has the ability to transfer those contacts from the members box to the non members box, and vice versa. PHP, html and MySQL are being used.
I also have three tables:
contacts: containing account details including contactID as its PK
groups: containing the group description including groupID as its PK
groupmembers: containing the previous two PKs as FKs
After searching for resources, I've managed to get a javascript function that allows the transfer of contacts from one selection box to the other
[HTML]function move(nonMemBox, memBox)
{
var arrNonMemBox = new Array();
var arrMemBox = new Array();
var arrLookup = new Array();
var i;
// This for loop gets the length from the destination field
for (i = 0; i < memBox.options. length; i++)
{
arrLookup[memBox.options[i].text] = memBox.options[i].value;
arrMemBox[i] = memBox.options[i].text;
}
var nonMemLength = 0;
var memLength = arrMemBox.lengt h;
// This for loop gets the length of the source field
for(i = 0; i < nonMemBox.optio ns.length; i++)
{
arrLookup[nonMemBox.optio ns[i].text] = nonMemBox.optio ns[i].value;
// If if the item is selected and not empty
if (nonMemBox.opti ons[i].selected && nonMemBox.optio ns[i].value != "")
{
arrMemBox[memLength] = nonMemBox.optio ns[i].text;
memLength++;
}
else
{
arrNonMemBox[nonMemLength] = nonMemBox.optio ns[i].text;
nonMemLength++;
}
}
// This alphabetically sorts the array of the items
//arrFbox.sort();
//arrTbox.sort();
nonMemBox.lengt h = 0;
memBox.length = 0;
var c;
// now transfer the items stored in the arrFbox[] array
for(c = 0; c < arrNonMemBox.le ngth; c++)
{
var no = new Option();
no.value = arrLookup[arrNonMemBox[c]];
no.text = arrNonMemBox[c];
nonMemBox[c] = no;
}
// now send all the items to the destination field
for(c = 0; c < arrMemBox.lengt h; c++)
{
var no = new Option();
no.value = arrLookup[arrMemBox[c]];
no.text = arrMemBox[c];
memBox[c] = no;
}
}
function addMe()
{
theValues = document.combo_ box.member;
for(i = 0; i < theValues.lengt h; i++)
{
alert(theValues[i].value);
if(document.com bo_box.theNumbe rs.value == "" )
{
document.combo_ box.theNumbers. value = theValues[i].value;
}
else
{
document.combo_ box.theNumbers. value += "," + theValues[i].value;
}
}
return true;
}[/HTML]
The function responsible for refreshing the page with the drop down box are as follows:
[HTML]function reload(form)
{
var val=form.Group. options[memberAssignmen tForm.Group.opt ions.selectedIn dex].value;
self.location=' groupContacts.p hp?Group=' + val ;
}[/HTML]
The above function uses $Group = $_GET['Group'] to get the selected groupID. That is then used for the following code
[HTML]<form name="memberAss ignmentForm" method="post" action="groupCo ntacts.php" onsubmit="retur n addMe();">
<input id="theNumbers " name="theNumber s" type="hidden" />
<table>
<tr>
<td><b>Group: </b><select name="Group" onchange="retur n reload(this.for m);">
<option value="select"> Select one</option>
<?
// Retrieves and displays groups from db
$query="select * from groups order by Name";
$result=$db->query($query );
$num_results=$r esult->num_rows;
for($i=0; $i<$num_results ; $i++)
{
$row=$result->fetch_assoc( );
echo '<option value=';
echo $row['groupID'];
echo '>';
echo $row['Name'];
echo '</option>';
}
$result->free();
?>
</select></td>
</tr><tr></tr>
<tr>
<td align="center"> <b>Non-members</b></td>
<td><p> </p></td>
<td align="center"> <b>Members</b></td>
</tr>
<tr>
<td><select name="nonMember " size="10" multiple style="width: 150px;" ondblclick="mov e(this.form.non Member,this.for m.member)">
<?
// Retrieves contact names that belong to selected group and displays in the right selection box
$query = "select * from contacts where contactID not in (select contactID from groupcontact where groupID = '".$Group."' )";
$result=$db->query($query );
$num_results=$r esult->num_rows;
for($i=0; $i<$num_results ; $i++)
{
$row=$result->fetch_assoc( );
echo '<option value=';
echo $row['contactID'];
echo '>';
echo $row['Surname'],', ', $row['Firstname'];
echo '</option>';
}
$result->free();
?>
</select></td>
<td><input type="button" name="Disable" value="> " style="width: 20px;" onClick="move(t his.form.nonMem ber,this.form.m ember)"><br>
<br>
<input type="button" name="Enable" value="<" style="width: 20px;" onClick="move(t his.form.member ,this.form.nonM ember)"><br></td>
<br>
<td><select name="member" size="10" multiple style="width: 150px;" ondblclick="mov e(this.form.mem ber,this.form.n onMember)">
<?php
// Retrieves contact names that are don't belong to selected group and displays in the left selection box
$query = "select * from contacts where contactID in (select contactID from groupcontact where groupID = '".$Group."' )";
$result=$db->query($query );
$num_results=$r esult->num_rows;
for($i=0; $i<$num_results ; $i++)
{
$row=$result->fetch_assoc( );
echo '<option value=';
echo $row['contactID'];
echo '>';
echo $row['Surname'], ', ', $row['Firstname'];
echo '</option>';
}
$result->free();
?>
</select></td>
</tr>
<tr>
<td><input type="submit" name="submit" value="Save"></td>
</tr>
</table>
</form>
</body>
</html>[/HTML]
Now what I am trying to resolve is to submit the form where the contacts in their respective boxes and insert them into the database - specifically the groupmembers table, which would end up looking like...
groupID contactID
12 44
12 45
12 46
13 22
Another problem I'm having difficulty understanding is that when I select a group from the drop down box, it obviously refreshes. However, once it does the correct contacts are displayed but the drop down box reverts back to its original state eg. Select one
What am I missing that ensures the selected group is displayed once refreshed?
I have tried working with arrays on the selection box inputs but it breaks the move function. An answer to these two questions would be greatly appreciated. Apologies for the length of this question but I figured giving this much information would provide a better answer. Of course I'll be happy to clarify anything that is vague.
Thank you
