I have multiple Add/Remove Multiple Select Fields on a form. I have 2 questions regarding how I can accomplish two different functions.
How do I get multiple values (that I am pulling into the field using MySQL) that are placed in the 'Add', to be parsed and placed into a field or email separated by a comma.
I have 6 groups of these multiple select fields. When the user selects the value and moves it to be added, I want the values to removed from the other groups, so that they can not be added.
Here is the my code:
JS:
//GROUP 1
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function() {
$('#add').click(function() {
return !$('#select1 option:selected').remove().appendTo('#select2');
});
$('#remove').click(function() {
return !$('#select2 option:selected').remove().appendTo('#select1');
});
});
</script>
//GROUP 2
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function() {
$('#add2').click(function() {
return !$('#select3 option:selected').remove().appendTo('#select4');
});
$('#remove2').click(function() {
return !$('#select4 option:selected').remove().appendTo('#select3');
});
});
</script>
//GROUP 3
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function() {
$('#add3').click(function() {
return !$('#select5 option:selected').remove().appendTo('#select6');
});
$('#remove3').click(function() {
return !$('#select6 option:selected').remove().appendTo('#select5');
});
});
</script>
//GROUP 4
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function() {
$('#add4').click(function() {
return !$('#select7 option:selected').remove().appendTo('#select8');
});
$('#remove3').click(function() {
return !$('#select8 option:selected').remove().appendTo('#select7');
});
});
</script>
//GROUP 5
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function() {
$('#add5').click(function() {
return !$('#select9 option:selected').remove().appendTo('#select10');
});
$('#remove5').click(function() {
return !$('#select9 option:selected').remove().appendTo('#select10');
});
});
</script>
//GROUP 6
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function() {
$('#add6').click(function() {
return !$('#select11 option:selected').remove().appendTo('#select12');
});
$('#remove6').click(function() {
return !$('#select12 option:selected').remove().appendTo('#select11');
});
});
</script>
HTML:
//GROUP 1
<select name="select1" [] multiple class="calloutForm" id="select1" title="<? php echo $row_allUsers['submittername']; ?>">
<?php
do {
?>
<option value="<?php echo $row_allUsersDynamicList['submittername']? >"><?php echo $row_allUsersDynamicList['submittername']?></option>
<?php
} while ($row_allUsersDynamicList = mysql_fetch_assoc($allUsersDynamicList));
$rows = mysql_num_rows($allUsersDynamicList);
if($rows > 0) {
mysql_data_seek($allUsersDynamicList, 0);
$row_allUsersDynamicList = mysql_fetch_assoc($allUsersDynamicList);
}
?>
</select>
</div></td>
<td width="138" rowspan="2"><div align="center">>>></div></td>
<td width="181"><div align="left">
<select name="select2" multiple class="calloutForm" id="select2">
</select>
//GROUP 2
<td width="139"><div align="right">
<select name="select3" multiple="multiple" class="calloutForm" id="select3" title="<?php echo $row_allUsers['submittername']; ?>">
<?php
do {
?>
<option value="<?php echo $row_allUsersDynamicList['submittername']?>"><?php echo $row_allUsersDynamicList['submittername']?></option>
<?php
} while ($row_allUsersDynamicList = mysql_fetch_assoc($allUsersDynamicList));
$rows = mysql_num_rows($allUsersDynamicList);
if($rows > 0) {
mysql_data_seek($allUsersDynamicList, 0);
$row_allUsersDynamicList = mysql_fetch_assoc($allUsersDynamicList);
}
?>
</select>
</div></td>
//GROUP 3
<td width="139"><div align="right">
<select name="select5" multiple="multiple" class="calloutForm" id="select5" title="<?php echo $row_allUsers['submittername']; ?>">
<?php
do {
?>
<option value="<?php echo $row_allUsersDynamicList['submittername']?>"><?php echo $row_allUsersDynamicList['submittername']?></option>
<?php
} while ($row_allUsersDynamicList = mysql_fetch_assoc($allUsersDynamicList));
$rows = mysql_num_rows($allUsersDynamicList);
if($rows > 0) {
mysql_data_seek($allUsersDynamicList, 0);
$row_allUsersDynamicList = mysql_fetch_assoc($allUsersDynamicList);
}
?>
</select>
/div></td>
//GROUP 4
<td width="139"><div align="right">
<select name="select7" multiple="multiple" class="calloutForm" id="select7" title="<?php echo $row_allUsers['submittername']; ?>">
<?php
do {
?>
<option value="<?php echo $row_allUsersDynamicList['submittername']?>"><?php echo $row_allUsersDynamicList['submittername']?></option>
<?php
} while ($row_allUsersDynamicList = mysql_fetch_assoc($allUsersDynamicList));
$rows = mysql_num_rows($allUsersDynamicList);
if($rows > 0) {
mysql_data_seek($allUsersDynamicList, 0);
$row_allUsersDynamicList = mysql_fetch_assoc($allUsersDynamicList);
}
?>
</select>
</div></td>
//GROUP 5
<td width="139"><div align="right">
<select name="select9" multiple="multiple" class="calloutForm" id="select9" title="<?php echo $row_allUsers['submittername']; ?>">
<?php
do {
?>
<option value="<?php echo $row_allUsersDynamicList['submittername']?>"><?php echo $row_allUsersDynamicList['submittername']?></option>
<?php
} while ($row_allUsersDynamicList = mysql_fetch_assoc($allUsersDynamicList));
$rows = mysql_num_rows($allUsersDynamicList);
if($rows > 0) {
mysql_data_seek($allUsersDynamicList, 0);
$row_allUsersDynamicList = mysql_fetch_assoc($allUsersDynamicList);
}
?>
</select>
</div></td>
//GROUP 6
<td width="139"><div align="right">
<select name="select11" multiple="multiple" class="calloutForm" id="select11" title="<?php echo $row_allUsers['submittername']; ?>">
<?php
do {
?>
<option value="<?php echo $row_allUsersDynamicList['submittername']?>"><?php echo $row_allUsersDynamicList['submittername']?></option>
<?php
} while ($row_allUsersDynamicList = mysql_fetch_assoc($allUsersDynamicList));
$rows = mysql_num_rows($allUsersDynamicList);
if($rows > 0) {
mysql_data_seek($allUsersDynamicList, 0);
$row_allUsersDynamicList = mysql_fetch_assoc($allUsersDynamicList);
}
?>
</select>
</div></td>