Hello,
I am new to javascript, but I am doing a project with complicated regforms that require multiple selectboxes..
What I have done to solve the issues is that I have made a selectbox containing several alternatives which in the code is reffered to as "srcList"
I will then populate it with a list fetched from a MySQL db.
The problem is this:What happens now is just plain stupid, (check the link youŽll see what I mean), I have four JS functions that should be two, and all are behaving independently and doing their own thing.
the user should be able to select one or several choices from the first selectbox ("srcList"), then click on what is now the "0" button (if you click the link that I have provided youŽll see what I mean) and get it to appear in a div next to the selectbox so that they see what has been selected. A remove link should also be next to the selected item
also the selected items should be stored in variables sć that they can be sent in a form when everything is filled out.
I know that this can probably be made in AJAX but I tried and had no success.
Just ignore the insert button, that is for later
http://ab.forcafighting.com/yes.html
Code:
<html>
<head>
<script language="JavaScript">
function addSrcToDestList() {
destList1 = window.document.forms[0].destList;
srcList = window.document.forms[0].srcList;
var len = destList1.length;
for(var i = 0; i < srcList.length; i++) {
if ((srcList.options[i] != null) && (srcList.options[i].selected)) {
//Check if this value already exist in the destList or not
//if not then add it otherwise do not add it.
var found = false;
for(var count = 0; count < len; count++) {
if (destList1.options[count] != null) {
if (srcList.options[i].text == destList1.options[count].text) {
found = true;
break;
}
}
}
if (found != true) {
destList1.options[len] = new Option(srcList.options[i].text);
len++;
}
}
}
}
// Deletes from the destination list.
function deleteFromDestList() {
var destList1 = window.document.forms[0].destList;
var len = destList1.options.length;
for(var i = (len-1); i >= 0; i--) {
if ((destList1.options[i] != null) && (destList1.options[i].selected == true)) {
destList1.options[i] = null;
}
}
}
function allSelect()
{
List = document.forms[0].destList;
if (List.length && List.options[0].value == 'temp') return;
for (i=0;i<List.length;i++)
{
List.options[i].selected = true;
}
}
// -------------------------------------------------------------------------
function addEvent()
{
var ni = document.getElementById('myDiv');
var numi = document.getElementById('theValue');
var num = (document.getElementById("theValue").value -1)+ 2;
numi.value = num;
var divIdName = "my"+num+"Div";
var newdiv = document.createElement('div');
newdiv.setAttribute("id",divIdName);
newdiv.innerHTML = "Element Number "+num+"! <a href=\"javascript:;\" onclick=\"removeEvent(\'"+divIdName+"\')\">Remove</a>";
ni.appendChild(newdiv);
}
function removeEvent(divNum)
{
var d = document.getElementById('myDiv');
var olddiv = document.getElementById(divNum);
d.removeChild(olddiv);
}
</SCRIPT>
</head>
<body>
<form name="upload" id="upload" ENCTYPE="multipart/form-data" method="POST" action="<?php $_SERVER['PHP_SELF']?>" onSubmit="allSelect();">
<select name="srcList" multiple size=10 style="width:150;" onChange="moveOver();">
<option value ="0" >Admin</option>
<option value ="1" >Public</option>
<option value ="2" >Private</option>
<option value ="3" >All</option>
</select>
<br> <input type="button" id="theValue" value="0" onClick="javascript:addEvent();javascript:addSrcToDestList();">
<br>
<input type="button" value=" << " onClick="javascript:deleteFromDestList();">
<select name="destList[]" id="destList" size=10 style="width:150;" >
</select>
<div id="myDiv"> </div>
<input type="submit" class="button3" name="upload" value="Insert" >
</body></html>
|
really need help on this guys..
